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.

Install to Claude Code

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