Atomic Design Fundamentals

This walks you through Brad Frost's Atomic Design methodology with an added "quarks" layer for design tokens. It covers the full hierarchy from tokens through atoms, molecules, organisms, templates, and pages, explaining what belongs at each level and how they compose together. The skill includes practical directory structures, naming conventions, and import patterns for organizing component libraries. Most helpful when you're setting up a design system from scratch or refactoring an existing component library into a more maintainable structure. The composition rules are strict but sensible: atoms can only use quarks, molecules can only use atoms, and so on up the chain.

skills.sh installs: 780
GitHub stars: 200
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add thebushidocollective/han --skill atomic-design-fundamentals --agent claude-code

Installs into .claude/skills of the current project.

Files

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

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.

SKILL.md on GitHub