Use when applying Atomic Design methodology to organize UI components into quarks, atoms, molecules, organisms, templates, and pages. Core principles and hierarchy.
View on GitHubplugins/patterns/atomic-design/skills/atomic-design-fundamentals/SKILL.md
February 5, 2026
Select agents to install to:
npx add-skill https://github.com/TheBushidoCollective/han/blob/main/plugins/patterns/atomic-design/skills/atomic-design-fundamentals/SKILL.md -a claude-code --skill atomic-design-fundamentalsInstallation paths:
.claude/skills/atomic-design-fundamentals/# Atomic Design Fundamentals Master Brad Frost's Atomic Design methodology (extended with quarks) for building scalable, maintainable component-based user interfaces. This skill covers the core hierarchy, principles, and organization strategies for modern design systems. ## Overview Atomic Design is a methodology for creating design systems inspired by chemistry. Just as atoms combine to form molecules, which combine to form organisms, UI components follow a similar hierarchical structure. We extend this with **quarks** - the sub-atomic level of design tokens: 0. **Quarks** - Design tokens (colors, spacing, typography scales, shadows) 1. **Atoms** - Basic building blocks (buttons, inputs, labels) 2. **Molecules** - Groups of atoms functioning together (search form, card) 3. **Organisms** - Complex UI sections (header, footer, sidebar) 4. **Templates** - Page-level layouts without real content 5. **Pages** - Templates with real representative content ## The Six Stages ### 0. Quarks The sub-atomic building blocks - design tokens and primitive values that atoms consume. Quarks are not UI components themselves; they are the raw values that define your design language. **Examples:** - Color tokens (primary-500, neutral-100) - Spacing scales (4px, 8px, 16px) - Typography tokens (font sizes, weights, line heights) - Border radii - Shadow definitions - Animation durations and easing functions - Breakpoints **Characteristics:** - Pure values, not visual components - Cannot import from any other level - Define the design language - Enable theming and consistency - Single source of truth for design decisions ### 1. Atoms The smallest functional UI units of your interface. Atoms consume quarks for styling but cannot be broken down further without losing meaning. **Examples:** - Buttons - Input fields - Labels - Icons - Typography elements (headings, paragraphs) - Color swatches - Avatars **Characteristics:** - Self-contained and independent - No business logic