component-variants_skill

Overview

This skill helps teams implement multi-style UI components using class-variance-authority (CVA) patterns. It codifies three consistent visual variants—Glass, Outline, and Flat—plus dark mode and hover behaviors. Use it to standardize variant props, default values, and validation for component libraries.

How this skill works

The skill provides CVA configurations and example variant definitions for cards, buttons, and other primitives. It enforces a checklist: define glass/outline/flat variants, use CVA (or an equivalent typed variant system), specify a default variant, and include dark-mode and hover states. It also includes an agent workflow to research existing patterns and validate the final implementation.

When to use it

• Building new reusable components that need multiple visual styles
• Migrating or refactoring existing components to a consistent variant system
• Creating design-system tokens that must support light and dark themes
• Implementing variant props with type-safety in TypeScript
• Adding hover, focus, and accessibility-aware states to variants

Best practices

• Use CVA for type-safe, composable variant definitions
• Define all three variants (glass, outline, flat) for consistency
• Set a sensible default variant to avoid undefined styling
• Provide dark-mode alternatives per variant rather than global overrides
• Add hover and focus states to each variant for predictable interactions

Example use cases

• Card component with cva-based variant prop and default set to glass
• Button primitive exposing variant prop: glass, outline, flat with typed VariantProps
• Theme-aware components switching border/fill for dark and light modes
• Component migration where each existing style maps to one of the three canonical variants
• Automated validation step that checks variant presence, CVA usage, defaults, and hover states