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.

Install to Claude Code

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