Manages sub-atomic design tokens and primitive values to build consistent, scalable design systems.
This skill implements the 'Quarks' layer of Atomic Design, extending the traditional methodology to include design tokens as the foundational layer below Atoms. It provides structured guidance and patterns for defining primitive values like colors, spacing, typography, and shadows using CSS custom properties or TypeScript constants. By standardizing these sub-atomic elements, the skill helps developers maintain visual consistency, simplify theming, and establish a robust design language that scales across complex frontend applications.
Key Features
01Implementation guides for CSS-in-JS and CSS Modules
02Standardized patterns for CSS custom property generation
03Templates for shadow, animation, and breakpoint tokens
04Definition of design tokens for colors, spacing, and typography
0572 GitHub stars
06Structured directory organization for design system foundations
Use Cases
01Refactoring hard-coded CSS values into a centralized quarks architecture
02Setting up runtime theming using dynamic CSS variable generation
03Bootstrapping a new design system with structured design tokens
