Domains
Forms
Mechanism
Breaks down how the skill works and what it produces, so you can quickly judge whether it fits your scenario and value.
When creating component libraries, implementing design systems, standardizing UI patterns, or migrating from Tailwind v3 to v4 with CSS-first config and design tokens.
@theme, @custom-variant, and OKLCH color tokensA scalable, accessible Tailwind v4 design system with consistent tokens, reusable components, and standardized UI across the codebase.
Use Cases
A frontend team starts a new SaaS product and needs a shared component library. Using this skill, they define OKLCH-based semantic color tokens and dark mode via @theme and @custom-variant, then build base→variant→state components. This avoids inconsistent styling, speeds up feature work, and ensures accessibility from day one.
A legacy project on Tailwind v3 must upgrade to v4 for better performance and CSS-first theming. The skill's v3→v4 mapping and migration patterns help replace tailwind.config.ts with @theme blocks and class-based dark mode with @custom-variant. Result: cleaner config, modern tokens, and zero broken styles post-migration.
Skill Relationships
Dependency relationships read as "the upper tier points to the lower tier." The current Skill sits in the middle tier — above are Skills that depend on it, below are Skills it depends on.
Tier 1 · These Skills Use Me
Tier 2 · Current Skill
Tier 3 · I Use These Skills
Browse this skill's relationships within its skillset. Click a node to switch the side panel; use the search box to jump to any skill.
Skill File