Build consistent and reusable user interfaces with Tailwind CSS v4. This skill helps you create a design system using design tokens, component libraries, and responsive patterns. You can define your theme directly in CSS with the new @theme directive.
It covers dark mode setup with native CSS features and keyframe animations. Use it to standardize UI patterns across your project. Whether you are starting a new component library or upgrading from Tailwind v3, this skill gives you the steps to build production-ready design systems.
Global
mkdir -p ~/.claude/skills/tailwind-design-systemProject
mkdir -p .claude/skills/tailwind-design-systemSource Repository
Frontend Designanthropics/skills
Create striking frontend interfaces with bold design and polished code every time
Vercel React Best Practicesvercel-labs/agent-skills
Optimize React and Next.js apps using proven Vercel performance guidelines
Design Taste Frontendleonxlnx/taste-skill
Enforce premium frontend design with metric-based rules and smart component architecture
Vercel Composition Patternsvercel-labs/agent-skills
Clean React components with composition instead of boolean props
Shadcnshadcn/ui
Manage shadcn UI components easily with CLI commands and clear styling rules
Impeccablepbakaus/impeccable
Polish your frontend interfaces with expert design critique and code
Minimalist Uileonxlnx/taste-skill
Build warm minimal web interfaces with editorial typography and flat bento grids
Industrial Brutalist Uileonxlnx/taste-skill
Raw mechanical UIs fusing Swiss print with military terminal aesthetics and high data density