← ClaudeAtlas

devrites-ux-shapelisted

Shape UX/UI direction, states, and interactions before code. Use for screens, forms, dashboards, or settings; not for implementation or polish.
ViktorsBaikers/DevRites · ★ 1 · Web & Frontend · score 60
Install: claude install-skill ViktorsBaikers/DevRites
# devrites-ux-shape: plan the UX/UI before code Decide what the UI *is* and how it should look and behave **before** code, and write it to the feature's `design-brief.md`: the contract the build (`devrites-frontend-craft`), polish, and seal all check against. This is "shape before code" raised to a **feature-level artifact**: produced once at spec time, refined per slice. It is **woven into the lifecycle** (`/rite-spec` calls it when UI is detected; `/rite-build` refines it), not a separate phase the user runs. ## When it runs - `/rite-spec` invokes it after references-intake when the feature touches UI (`../rite-build/reference/frontend-trigger.md`). Output: `design-brief.md` + a confirmation pause. - `/rite-build` / `devrites-frontend-craft` read the brief as the **build target** and refine it for the slice's surface. They don't re-derive it. - Skip entirely for backend / data / CLI / infra-only features. ## 1. Foundation: discover, don't impose Reuse what's there first. Read the design system + register and any references the spec gathered: - Design system + register (tokens, components, type, spacing, neighbors; brand-vs-product) → `../devrites-frontend-craft/reference/design-references.md`. - `PRODUCT.md` / `DESIGN.md` / `CLAUDE.md` if present: anchors that reduce questions. `DESIGN.md` is the project's **rolled-up design memory** (tokens, calibration baseline, proven component behaviors) earlier features closed during Polish via `../rite-polish/referenc