ux-design

Solid

Guided, section-by-section UX spec authoring for a screen, flow, or HUD. Reads game concept, player journey, and relevant GDDs to provide context-aware design guidance. Produces ux-spec.md (per screen/flow) or hud-design.md using the studio templates.

Web & Frontend 20,555 stars 2999 forks Updated 1 weeks ago MIT

Install

View on GitHub

Quality Score: 97/100

Stars 20%
100
Recency 20%
90
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
50
License 10%
100
Description 5%
100

Skill Content

When this skill is invoked: ## 1. Parse Arguments & Determine Mode Three authoring modes exist based on the argument: | Argument | Mode | Output file | |----------|------|-------------| | `hud` | HUD design | `design/ux/hud.md` | | `patterns` | Interaction pattern library | `design/ux/interaction-patterns.md` | | Any other value (e.g., `main-menu`, `inventory`) | UX spec for a screen or flow | `design/ux/[argument].md` | | No argument | Ask the user | (see below) | **If no argument is provided**, do not fail — ask instead. Use `AskUserQuestion`: - "What are we designing today?" - Options: "A specific screen or flow (I'll name it)", "The game HUD", "The interaction pattern library", "I'm not sure — help me figure it out" If the user selects "I'll name it" or types a screen name, normalize it to kebab-case for the filename (e.g., "Main Menu" becomes `main-menu`). --- ## 2. Gather Context (Read Phase) Read all relevant context **before** asking the user anything. The skill's value comes from arriving informed. ### 2a: Required Reads - **Game concept**: Read `design/gdd/game-concept.md` — if missing, warn: > "No game concept found. Run `/brainstorm` first to establish the game's > foundation before designing UX." > Continue anyway if the user asks. ### 2b: Player Journey Read `design/player-journey.md` if it exists. For each relevant section, extract: - Which journey phase(s) does this screen appear in? - What is the player's emotional state on arrival at this...

Details

Author
Donchitos
Repository
Donchitos/Claude-Code-Game-Studios
Created
3 months ago
Last Updated
1 weeks ago
Language
Shell
License
MIT

Integrates with

Similar Skills

Semantically similar based on skill content — not just same category

Web & Frontend Solid

ux-review

Validates a UX spec, HUD design, or interaction pattern library for completeness, accessibility compliance, GDD alignment, and implementation readiness. Produces APPROVED / NEEDS REVISION / MAJOR REVISION NEEDED verdict with specific gaps.

20,555 Updated 1 weeks ago
Donchitos
Web & Frontend Listed

web-ui-ux

Web UI/UX specialist guidance for designing, reviewing, and polishing web product UI (layout, usability, microcopy, accessibility, responsive behavior, forms, navigation). Use when asked to improve UI/UX, audit a page, design a screen, create a component spec, or generate HTML head/manifest/icon guidance for a web app; optionally applicable to Unreal UI (UMG) for UX heuristics.

1 Updated today
KhaiEr720
Web & Frontend Listed

design_ui_ux

Use this skill when the user is designing, evaluating, or improving a user interface — including component layouts, user flows, information architecture, interaction design, or accessibility. Triggers on: "how should I design this UI?", "what's the best layout for X?", "review this interface", "design a form for", "improve the UX of", "what should this screen look like?", "is this flow intuitive?", "accessibility review", "design the user journey for". Also use proactively when asked to build a UI component and the design hasn't been specified — propose the design before implementing.

0 Updated yesterday
feralbureau
Web & Frontend Listed

aio-uiux

Web UI design and review advisor — applies UX psychology, interaction patterns, WCAG accessibility, and modern CSS to design new interfaces or critique existing ones. Use proactively when reviewing any frontend UI, scaffolding new components, or deciding layout/color/typography trade-offs.

3 Updated 2 days ago
aiocean
Web & Frontend Listed

bmad-create-ux-design

Plan UX patterns and design specifications. Use when the user says "lets create UX design" or "create UX specifications" or "help me plan the UX"

2 Updated 2 days ago
mouadja02