component-variants

What problem does it solve?

This Skill addresses the challenge of creating visually distinct and consistent styles for UI components, enabling easy switching between predefined aesthetics like Glass, Outline, and Flat.

Core Features & Use Cases

• Multi-Style Components: Define and manage multiple visual styles for a single component.
• Variant Props: Utilize class-variance-authority (CVA) for type-safe variant definitions.
• Style Switching: Seamlessly apply different styles (Glass, Outline, Flat) based on props.
• Use Case: When designing a button component that needs to appear as a primary action (flat), a secondary action (outline), or a visually striking element (glass), this Skill provides the structure to manage these variations efficiently.

Quick Start

Use the component-variants skill to generate a CVA for a card component with glass, outline, and flat variants.