Tailwindcss Advanced Design Systems

What it does

This skill allows you to generate complex, reusable UI components and design systems in Tailwind CSS. It leverages the @theme directive within Tailwind CSS to define a complete system of design tokens (colors, typography, etc.). You can specify semantic color tokens like --color-surface-primary, or brand colors with full scales, providing granular control over your project's visual style. This skill is particularly useful for establishing consistent and maintainable UI patterns.

When to use it

• Creating a new design system from scratch.
• Establishing a standardized color palette for a large project.
• Defining reusable component styles with consistent branding.
• Generating Tailwind CSS configuration files based on specific design requirements.
• Implementing semantic color tokens for accessibility and theming.

Key capabilities

• Generation of complete design token systems using @theme.
• Definition of semantic color tokens (e.g., --color-surface-primary).
• Creation of brand color scales with varying intensities.
• Specification of status colors (success, warning, error, info).
• Control over typography styles via --font-* variables.

Example prompts

• "Generate a Tailwind CSS design system with semantic color tokens for primary, secondary, and tertiary surfaces."
• "Create a brand color scale from 50 to 950 using oklch values."
• "Define status colors for success, warning, error, and info states in my Tailwind CSS theme."

Tips & gotchas

• This skill requires familiarity with Tailwind CSS configuration and the @theme directive.
• The output is intended to be integrated into your existing tailwind.config.js or similar configuration file.
• Oklch color values are used for precise color definition; understanding these values may be helpful for customization.