atomic-design
Installation
SKILL.md
Atomic Design — Componentization Guide
This skill teaches how to classify and build decoupled components following Atomic Design. The scope is deliberate: classify correctly, build correctly. Business logic, routing, and state management live elsewhere in the app architecture — this skill does not dictate those.
Mandatory vs Optional Levels
| Level | Status | Notes |
|---|---|---|
| ⚛️ Atom | Mandatory | Always applies in every project |
| 🧪 Molecule | Mandatory | Always applies in every project |
| 🦠 Organism | Mandatory | Always applies in every project |
| 🧩 Template | Optional | Skip if the framework provides layout conventions (e.g. Next.js layout.tsx) |
| 📄 Page | Optional | Skip if the framework owns routing and page structure (e.g. Next.js app/ or pages/) |
The mandatory core is always Atom → Molecule → Organism. Templates and Pages are useful in framework-agnostic projects or when the app has no built-in layout/routing conventions. When the framework already handles those concerns — like Next.js does — imposing them as extra component folders creates unnecessary duplication. In those cases, skip them and let the framework own that layer.