This skill documents how to define and structure quarks — the smallest design tokens (colors, spacing, typography, shadows, breakpoints, z-index) that atoms and components consume. It provides examples, TypeScript token files, CSS variable generation, and integration notes for Tailwind and CSS-in-JS.
Use this skill when building or refactoring a design system, migrating hard-coded styles into tokens, or introducing runtime theming and CSS custom properties. Appropriate for frontend engineers, design systems teams, and component library maintainers.
{ }
Pure documentation skill providing guidance on creating design tokens (quarks) for atomic design systems. No scripts to execute. Well-structured with comprehensive code examples for color, spacing, typography, border, shadow, animation, and breakpoint tokens. Includes CSS custom property generation, theming patterns, and clear best practices vs anti-patterns.
No security concerns whatsoever — purely advisory content with TypeScript/CSS code examples. Well-written reference material for design system token organization.