atomic-design
Installation
SKILL.md
Atomic Design — Quick Reference
Level Decision Table
| Level | Folder | Composes | Has State | Fetches Data | Real Content |
|---|---|---|---|---|---|
| Atom | components/ui/ |
Nothing | No | No | No |
| Molecule | components/molecules/ |
2–5 atoms | Maybe | No | No |
| Organism | components/organisms/ |
Molecules + atoms | Yes | Yes | No |
| Template | components/templates/ |
Organisms | No | No | Placeholder |
| Page | (route file) | Templates | No | Yes | Real |
If you can't decide: IF it composes nothing → atom. IF it composes ≤5 atoms → molecule. IF it manages state or fetches data → organism. IF it's a full layout skeleton → template.