Standardizes frontend development using a tokenized design system and reusable UI component patterns.
The Core Components skill provides a comprehensive framework for building consistent and maintainable user interfaces by enforcing a strict design system. It guides Claude to utilize semantic design tokens for spacing, typography, and colors rather than hard-coding values, ensuring visual coherence across the entire application. By leveraging a library of layout primitives like Box and Stacks alongside high-level components like Buttons and Inputs, this skill eliminates common anti-patterns such as inline styling and raw platform component usage, resulting in cleaner, more scalable production code.
주요 기능
01Token-based styling for consistent spacing, colors, and typography
02Automated detection and prevention of hard-coded styling anti-patterns
03Pre-defined layout patterns for screens, forms, and list items
04Standardized UI components for Buttons, Inputs, and Cards
051 GitHub stars
06Flexible layout primitives including Box, HStack, and VStack
사용 사례
01Refactoring legacy UI code to move from inline styles to semantic tokens
02Rapidly prototyping complex forms and layouts using pre-built component patterns
03Building a scalable mobile or web interface using a unified design system
