ux-atomic-design

Classify bottom-up: identify atoms first (single-function elements like buttons and inputs), then molecules (2-5 atoms serving one purpose), then organisms (recognizable sections with layout logic), templates, and pages. Ambiguous molecule/organism boundaries are resolved with a five-step adjudication procedure.

Token drift occurs when components use hardcoded style values instead of design token references. It is measured as drift_ratio = hardcoded_values / total_style_values per token category, with a ratio above 0.20 flagged as a FAIL indicating lost token governance.

Yes, it falls back to Manual Component Inventory Mode when the Storybook MCP adapter is unavailable. In degraded mode, coverage percentages and token audits rely on user-provided inventory data, and the output discloses reduced accuracy per P-022.

Use atomic design to structure and classify components into a hierarchy; use heuristic evaluation (/ux-heuristic-eval) to assess usability quality against Nielsen's 10 heuristics. Atomic design produces the component inventory that downstream accessibility evaluation consumes.

Component coverage targets are 80% for atoms and 60% for molecules/organisms; state coverage targets are 70% and 50%; variant coverage targets are 60% and 40%. These are framework-internal heuristics adjustable to team maturity.