ReddRadar
Agent skill
tailwind-design-system
Create consistent, scalable design systems using Tailwind CSS utility classes with custom themes, design tokens, and responsive design patterns. Use when building design systems, implementing custom themes, creating reusable utility patterns, configuring Tailwind theme extensions, implementing dark mode, building responsive layouts, creating design tokens, using arbitrary values, or establishing consistent spacing and typography scales.
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/data/tailwind-design-system-pascallammers-mylo-travel-concierg
SKILL.md
Tailwind CSS - Utility-First Styling
When to use this skill
- Building design systems with Tailwind CSS
- Implementing custom themes and design tokens
- Creating reusable utility class patterns
- Configuring Tailwind theme extensions
- Implementing light and dark mode themes
- Building responsive layouts with Tailwind grid/flexbox
- Creating consistent spacing and typography scales
- Using arbitrary values for one-off styles
- Implementing custom color palettes
- Building component variants with Tailwind
- Creating animation and transition systems
- Establishing design consistency across projects
When to use this skill
- Styling with Tailwind, creating design systems, responsive layouts.
- When working on related tasks or features
- During development that requires this expertise
Use when: Styling with Tailwind, creating design systems, responsive layouts.
Core Pattern
```jsx
Resources
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?