About tailwind-design-system
A skill for building Tailwind CSS design systems, intended for teams creating or standardizing component libraries. It covers tokens, variants, responsive layouts, theming, and accessibility, with an implementation playbook for detailed patterns.
Key features
- 01Design tokens and theming
- 02Tailwind component variants
- 03Responsive component patterns
- 04Accessible UI components
- 05Dark mode and color schemes
Use cases
- 01Creating a Tailwind component library
- 02Standardizing UI patterns across a codebase
- 03Extending Tailwind with a theme
- 04Building responsive, accessible components
Install
Copy the command and run it in a terminal.
$
npx skills add https:/After installing, type/tailwind-design-systemin Claude Code to confirm it loaded.
Bundled filesresources/implementation-playbook.md
Details
From the project READMETailwind Design System
Build production-ready design systems with Tailwind CSS, including design tokens, component variants, responsive patterns, and accessibility.
Use this skill when
- Creating a component library with Tailwind
- Implementing design tokens and theming
- Building responsive and accessible components
- Standardizing UI patterns across a codebase
- Migrating to or extending Tailwind CSS
- Setting up dark mode and color schemes
Do not use this skill when
- The task is unrelated to tailwind design system
- You need a different domain or tool outside this scope
Instructions
- Clarify goals, constraints, and required inputs.
- Apply relevant best practices and validate outcomes.
- Provide actionable steps and verification.
- If detailed examples are required, open
resources/implementation-playbook.md.
Resources
resources/implementation-playbook.mdfor detailed patterns and examples.
Comments
Markdown supported