How do Quarks differ from Atoms?

Quarks are non-visual raw values like hex codes or rem units, while Atoms are the smallest visual components like buttons or inputs that consume those values.

Is this skill compatible with existing CSS frameworks?

Absolutely. Quarks provide the foundational values that can be used to configure Tailwind CSS themes, Styled Components, or standard CSS modules.

What are Quarks in Atomic Design?

Quarks are the design tokens (colors, spacing, typography) that exist a level below Atoms, serving as the raw materials and values used to style UI components.

Can this skill generate CSS variables?

Yes, it includes patterns for exporting TypeScript-based tokens as CSS custom properties to support runtime theming and CSS module usage.

Atomic Design Quarks & Design Tokens

Name: Atomic Design Quarks & Design Tokens
Author: TheBushidoCollective

byTheBushidoCollective

•

设计工具

Architects foundational design tokens and CSS primitives to establish a consistent, scalable design system using sub-atomic principles.

This skill empowers developers to define and organize 'quarks'—the smallest possible units of a design system—which sit below atoms in the Atomic Design hierarchy. It provides structured patterns for managing design tokens like color scales, spacing units, typography, shadows, and z-index as either TypeScript constants or CSS custom properties. By establishing these primitives first, developers can ensure absolute visual consistency across their entire UI library while making global design changes manageable through a single source of truth.

主要功能

01Establish responsive breakpoints and media query helper constants

02Generate runtime-ready CSS custom properties from TypeScript definitions

0397 GitHub stars

04Define comprehensive design token scales for colors, spacing, and typography

05Implement sub-atomic primitives for borders, shadows, and animations

06Create a centralized directory structure for design system foundations

使用场景

01Migrating hardcoded CSS values into a reusable and themeable token architecture

02Building a new design system foundation for a modern web application

03Standardizing z-index scales and animation timings across a large frontend codebase

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add thebushidocollective/han atomic-design-quarks

For use in Claude.ai and ChatGPT

Download Skill