← ClaudeAtlas

ui-pickerlisted

UI shell and component semantics. Use when scaffolding a product page (list, dashboard, settings, detail, agent-admin), or when the wrong template/Badge-Tag pairing is about to be coded.
Bandersnatch0x/design-playbook · ★ 1 · Web & Frontend · score 57
Install: claude install-skill Bandersnatch0x/design-playbook
# ui-picker Before code: map the job to a **template** (shell) and **component semantics**. Appearance follows meaning. ## Steps ### 1. Density + scene Choose density (console-tight vs marketing-loose) and scene class (list / detail / settings / dashboard / editor / agent-admin / …). When a verified `.scratch/<run>/design-baseline/state.json` binds a baseline (`status: ready` from `design_baseline.verify`), read that binding path first (`baseline.path`, usually `DESIGN.md` or `.stitch/DESIGN.md`). It is the project-specific authority for atmosphere, visual roles, density, layout, motion, and component conventions. Preserve it unless the requested change explicitly revises the baseline. When `.scratch/<run>/reference/contract.md` exists (ADR-0011), read its **Visual cues for ui-picker**, Keep/Change, and Do not copy / exclusions. Use them as input for density, scene, region weight, and risks — never as hex tokens or as a license to copy brand chrome. **Done when:** one scene label and one density choice are explicit; a bound baseline is cited by path + SHA-256; if a reference contract exists, the decision report's risks or exclusions surface its Do not copy / brand risks (path citation is enough). ### 2. Template Read [`references/template.md`](references/template.md). Assign main / side / action / status regions. **Done when:** each region maps to a duty from `spec` L2 (or a stated gap in the spec). ### 3. Components Read [`references/components.md`](references/co