# UX Design

Section-by-section UX spec authoring for a screen, flow or HUD.

- Repository: https://github.com/Donchitos/Claude-Code-Game-Studios (32144 stars)
- Category: Design
- License: MIT
- Last updated: 2026-10-19
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add Donchitos/Claude-Code-Game-Studios --skill ux-design -g -a claude-code -y`
Codex: `npx skills add Donchitos/Claude-Code-Game-Studios --skill ux-design -g -a codex -y`
Cursor: `npx skills add Donchitos/Claude-Code-Game-Studios --skill ux-design -g -a cursor -y`
Gemini CLI: `npx skills add Donchitos/Claude-Code-Game-Studios --skill ux-design -g -a gemini-cli -y`

## Description

Section-by-section UX spec authoring for a screen, flow or HUD. Reads the player journey to provide context; also project-wide accessibility.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

!`bash "${CLAUDE_SKILL_DIR}/../../hooks/yaml-helper.sh" resolve_config --keys automation,workflow,docs.density`

Resolved above, use as-is. No block → defaults in
`.claude/docs/config-resolution.md`.

# UX Design

When this skill is invoked:

Every `AskUserQuestion` call follows `.claude/docs/automation-modes.md`
(collaborative asks always · guided major-only · autonomous logs and proceeds;
`automation_always_ask` categories always prompt).

**Authoring guidance**: the skeletons below are self-contained, author from them
directly. When a section needs depth (worked examples, pattern catalogs,
accessibility criteria), the matching guide has it:

| Producing | Guide |
|---|---|
| UX spec | `.claude/docs/templates/guidance/ux-spec-guide.md` |
| HUD design | `.claude/docs/templates/guidance/hud-design-guide.md` |
| Interaction patterns | `.claude/docs/templates/guidance/interaction-pattern-library-guide.md` (routes to three topic files) |
| Accessibility requirements | `.claude/docs/templates/guidance/accessibility-requirements-guide.md` |

**Load a guide per-section, never whole**, each is organised by section and the
pointers in the templates name the exact section to read.

**`workflow`** (see `.claude/docs/workflow-modes.md`):
- `full`, a UX spec is required per screen.
- `standard`, core screens only (main menu, HUD, primary game loop).
- `minimal`, not required. Can still be run voluntarily.

**`docs.density`**, it controls per-section *depth*, where `workflow`
controls which screens are specced. `modes.rigor` sets both together; set
`docs.density` explicitly to vary depth alone: `terse` (the default, via `rigor: minimal`) = wireframe descriptions +
interaction bullets; `balanced` = wireframes + paragraph descriptions of flows
(`rigor: standard`); `thorough` = full prose including user-research summaries and
alternative flow considerations. Apply it to every section you author.

## 1. Parse Arguments & Determine Mode

The rest: https://github.com/Donchitos/Claude-Code-Game-Studios/blob/HEAD/.claude/skills/ux-design/SKILL.md