component-variants
CommunityStyle components with variants.
Design & Creative#design system#styling#frontend development#ui components#variants#class-variance-authority
AuthorJorge-Ivan
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This Skill streamlines the creation of UI components by providing a structured way to manage multiple visual styles and variations, ensuring consistency and maintainability.
Core Features & Use Cases
- Variant Management: Define and apply distinct visual styles (e.g., Glass, Outline, Flat) to components.
- Style Switching: Easily toggle between different component appearances based on context or props.
- Dark Mode Support: Ensures variants adapt correctly to light and dark themes.
- Use Case: When building a design system, use this Skill to define a Button component with 'glass', 'outline', and 'flat' variants, each with appropriate hover states and dark mode styling.
Quick Start
Use the component-variants skill to create a card component with glass, outline, and flat variants.
Dependency Matrix
Required Modules
None requiredComponents
references
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: component-variants Download link: https://github.com/Jorge-Ivan/uam-hogar-nazareth-web/archive/main.zip#component-variants Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.