HAND-TAGGED >>> 991 SKILLS LIVE <<<* OPEN SOURCE *NO LOGIN, NO TRACKING FRESH DROPS WEEKLY HAND-TAGGED >>> 991 SKILLS LIVE <<<* OPEN SOURCE *NO LOGIN, NO TRACKING FRESH DROPS WEEKLY HAND-TAGGED >>> 991 SKILLS LIVE <<<* OPEN SOURCE *NO LOGIN, NO TRACKING FRESH DROPS WEEKLY HAND-TAGGED >>> 991 SKILLS LIVE <<<* OPEN SOURCE *NO LOGIN, NO TRACKING FRESH DROPS WEEKLY HAND-TAGGED >>> 991 SKILLS LIVE <<<* OPEN SOURCE *NO LOGIN, NO TRACKING FRESH DROPS WEEKLY HAND-TAGGED >>> 991 SKILLS LIVE <<<* OPEN SOURCE *NO LOGIN, NO TRACKING FRESH DROPS WEEKLY
← back to homepage
tailwind-design-systemSKILL #STEM
Creative

tailwind-design-system

Build production-ready design systems with Tailwind CSS, including design tokens, component variants, responsive patterns, and accessibility.

↗ github · ★ 28k·src: davila7/claude-code-templates

the manual

Tailwind 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.md for detailed patterns and examples.

more creative

Transform ideas into actionable designs
Creative
HOT
Transform ideas into actionable designs
brainstorming
1@ 0 240k
Create clear implementation plans fast
Creative
HOT
Create clear implementation plans fast
writing-plans
0@ 0 240k
Boost your writing skills for clarity
Creative
HOT
Boost your writing skills for clarity
writing-skills
0@ 0 240k
Style your artifacts in seconds
Creative
HOT
Style your artifacts in seconds
theme-factory
0@ 0 156k
Build complex web artifacts fast
Creative
HOT
Build complex web artifacts fast
web-artifacts-builder
0@ 0 156k
Streamline your document co-authoring process
Creative
HOT
Streamline your document co-authoring process
doc-coauthoring
0@ 0 156k
Design stunning frontends that stand out
Creative
HOT
Design stunning frontends that stand out
frontend-design
0@ 0 156k
Transform your visuals with brand style
Creative
HOT
Transform your visuals with brand style
brand-guidelines
0@ 0 156k