ux-speclisted

Authors a UX specification for a flow or screen — user goal, flow, screens, all states, UI copy, accessibility, responsive behaviour, UX metrics. Produces docs/specs/ux/UX-NNN-name.md. Use before implementing user-facing features.
gonimar/claude-web-studio · ★ 0 · Web & Frontend · score 76

Install: claude install-skill gonimar/claude-web-studio

# UX Spec Reply in the project conversation language (CLAUDE.md → Language); code, identifiers, paths and commit messages stay in English. Template `.claude/docs/templates/ux-spec.md`. ## Phase 1: Context Read the feature spec, `docs/specs/design-system.md` (missing → suggest `/design-system`, continue with the UI kit's base components from technical-preferences), the product spec (personas, platforms). ## Phase 2: Flow and screens Questions: entry point, device, frequency. A flow sketch (mermaid `flowchart`), then screens with design-system components; **states per screen** (empty/loading/error/success/offline/no permission) are mandatory. ## Phase 3: Copy, accessibility, responsive Copy table; focus order and aria; behaviour at 320–400 px; reduced motion. `accessibility-specialist` via Task — a quick check of section 6 (Haiku). ## Phase 4: Write "May I write `docs/specs/ux/UX-NNN-<slug>.md`?" — one `AskUserQuestion`: write (Recommended) · show the draft/diff first · not now After the "write" answer: `touch .claude/.write-consent` (rule 7 — the consent-guard hook checks the marker). Verdict: `APPROVED` | `NEEDS REVISION`. Next step — one `AskUserQuestion`: `/create-stories F-NNN` (Recommended) · `/dev-story` · revise the spec.