atomic-design-fundamentals

SKILL.md

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:

Quarks - Design tokens (colors, spacing, typography scales, shadows)

Atoms - Basic building blocks (buttons, inputs, labels)

Molecules - Groups of atoms functioning together (search form, card)

Organisms - Complex UI sections (header, footer, sidebar)

Templates - Page-level layouts without real content

Pages - Templates with real representative content

The Six Stages

0. Quarks