Atomic Design

Brad Frost's atomic design methodology codified as build rules: atoms are indivisible UI elements, molecules group atoms into functional units, organisms compose molecules into interface sections, and templates arrange organisms into page layouts. Never skip levels, keep components presentational (data in via props, events out via callbacks), and reference design tokens for all visual properties instead of hardcoding values. This is opinionated structure for component libraries. If you've ever inherited a React codebase where Button has fifteen variant props and nobody can agree what counts as reusable, this enforces a shared vocabulary. Works with any UI framework. Pairs well with design system specs and TDD for isolated component testing.

skills.sh installs: 244
GitHub stars: 5
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add jwilger/agent-skills --skill atomic-design --agent claude-code

Installs into .claude/skills of the current project.

Files

Atomic Design

Value: Simplicity and communication. Building UI from small, named, composable pieces makes the interface understandable to everyone on the team and prevents the complexity that comes from monolithic components.

Purpose

Teaches how to organize UI components into a hierarchy of increasing complexity: atoms, molecules, organisms, and templates. Each level has clear responsibilities and composition rules. The outcome is a component system where every piece is reusable, testable in isolation, and named in a shared vocabulary.

Practices

Build Bottom-Up Through Four Levels

Start with the smallest reusable elements and compose upward. Never skip a level.

The four levels:

Atoms: Indivisible UI elements. A button, an input, a label, an icon. One visual element, one responsibility. Atoms reference design tokens for all visual properties (color, spacing, typography).
Molecules: Small groups of atoms functioning as a unit. A form field (label + input + error message). A search bar (input + button + icon). One interaction pattern per molecule.

SKILL.md on GitHub