tailwindcss-design_skill

Overview

This skill provides TailwindCSS implementation patterns that translate Refactoring UI principles into production-ready utility-class recipes. It is a companion to design theory guidance and focuses on concrete Tailwind class choices, component recipes, dark mode handling, spacing, typography, shadows, and responsive patterns. Use it to standardize UI implementations across projects and enforce brand-first color usage.

How this skill works

The skill inspects project Tailwind configuration (tailwind.config.js) for custom colors and preferred tokens, then recommends class recipes that prioritize project-defined colors over generic Tailwind palettes. It supplies spacing and typography scales, shadow strategies, component examples (cards, buttons, inputs, nav items), animation timings, and dark-mode variations. Outputs are concise utility-class patterns you can copy into templates or component libraries.

When to use it

• When implementing UI from a design system or Refactoring UI guidance
• When you need consistent Tailwind class patterns across components
• When onboarding developers to project-specific Tailwind conventions
• When adding or auditing dark mode support and responsive behavior
• When defining spacing, typography, and shadow scale for a project

Best practices

• Always check tailwind.config.js and use project-defined colors (primary, secondary, brand) before generic colors
• Adopt one depth strategy per project (flat, subtle lift, layered, or surface shift) and apply consistently
• Use symmetric spacing tokens from a 4px grid and prefer p-4/m-4 over asymmetric padding unless justified
• Map semantic roles (primary/secondary/neutral) to color tokens, not concrete color names
• Prefer subtle durations (150–200ms) for hover/interaction transitions; use staggered delays for list reveals

Example use cases

• Create a primary CTA button using bg-primary-600 hover:bg-primary-700 text-white with rounded-md and duration-150
• Build card components with either border-based flat style or elevated shadow-sm + ring-1 for premium look
• Implement inputs with consistent focus rings: focus:border-primary-500 focus:ring-primary-500 and dark variants
• Convert a legacy UI to utility-first by applying the spacing scale (gap-4, p-4, gap-6) and typography tokens (text-base, text-lg, font-semibold)
• Standardize navigation items with default and active recipes to ensure accessible contrast and consistent spacing