component-spec
Installation
SKILL.md
Overview
Based on "Atomic Design" by Brad Frost. Frost's atomic design methodology organizes UI into: atoms (basic elements), molecules (groups of atoms), organisms (groups of molecules), templates (page structures), and pages (specific instances). A component spec documents where a component sits in this hierarchy, what it's made of, how it behaves, and how it should be used.
The goal of a component spec is to make the engineering handoff self-contained. A developer should be able to build the component correctly without asking questions.
Workflow
Step 1: Classify the component (Atomic Design)
| Level | What it is | Examples |
|---|---|---|
| Atom | Smallest UI unit, not decomposable | Button, input, icon, label |
| Molecule | 2-3 atoms working together | Search field (input + button), form field (label + input + error) |
| Organism | Complex UI section | Navigation bar, product card, comment thread |
| Template | Page-level layout | Dashboard layout, article layout |
Knowing the level sets expectations for complexity and reusability.