sgaabdu4 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 |
| Existing SSOT + local UI edit | Reuse closest token/primitive/component/layout owner |
Valid DESIGN.md + missing/duplicate production owners |
Load 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.mdvalid/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.