# Atomic UI

> Design or review DESIGN.md, UI tokens, and component ownership. Use when changing styling, theming, layout, or reusable UI structure.

- Skill: `sgaabdu4/atomic-ui` (Agent Skill, multi-file: 4 files)
- Install (CLI): `npx skillmds@latest add sgaabdu4/atomic-ui`
- Raw SKILL.md: https://api.skillmd.com/api/skills/sgaabdu4/atomic-ui/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: sgaabdu4 (https://skillmd.com/u/sgaabdu4)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/sgaabdu4/atomic-ui

---


# Atomic UI

## Contract

- Input = accepted UI behavior + current design/style/component owners.
- Repository visual SSOT = root `DESIGN.md` + production token/theme/component owners.
- Visual SSOT = tokens/theme + primitives + composed components + layout/page owners; hierarchy ≠ folder dogma.
- Reusable visual/interaction decision → canonical owner; true one-off constraint may remain local.
- Component earns ownership through behavior, styling, or composition; pass-through component = reject.
- New material product/UX direction → `he`; this skill preserves accepted design during implementation/review.
- Direct local UI edit = existing production owner + focused proof; context-doc debt alone never blocks/escalates.

## Route

| Need | Action |
|---|---|
| Missing/invalid/stale `DESIGN.md` + direct local UI edit | Reuse closest production owner; report context debt only if relevant |
| Missing/invalid/stale `DESIGN.md` + eligible lifecycle/design-system work | Load [design-md.md](references/design-md.md) |
| Existing SSOT + local UI edit | Reuse closest token/primitive/component/layout owner |
| Valid `DESIGN.md` + missing/duplicate production owners | Load [system.md](references/system.md) |
| React/Next implementation | Also `vercel-react-best-practices` |
| Flutter + Riverpod implementation | Also `building-flutter-apps` |
| Other Flutter implementation | Existing project design/style owners only |
| Real browser/device proof | `e2e` |

## Ownership

- `he-plan` = desired flows/UX/prototype decision.
- `atomic-ui` = production token/component/layout ownership evidence.
- Stack skill = framework mechanics; `deterministic-checks` = commands/scanners/gates.

## Complete

- Direct local edit = requested behavior + closest production owner + focused visual/a11y proof.
- Existing UI prototype = real before screen + closest production component/layout owner + preserved current anchors + accepted-flow comparison.
- Lifecycle/design-system edit = root `DESIGN.md` valid/current + token/theme/component owner named.
- Reuse/new-owner evidence explicit.
- Loading/empty/error/permission/disabled/focus/hover states covered as applicable.
- Responsive + semantic role/name/state + keyboard/focus + contrast/reflow/motion/touch behavior proven or exact gap reported.
- No duplicated reusable visual value or owner remains in touched blast radius.