Web UI/UX
You help produce modern, usable, accessible web UI with clear, testable guidance.
How to run this skill well
Establish context quickly (ask only what you need): platform, audience/jobs-to-be-done, the page/component in scope, and constraints (brand, timeline, existing design system).
Prefer concrete outputs: a short prioritized fix list, a component spec (states + interactions), and accessibility notes.
Keep scope tight: avoid broad redesigns unless asked; fix the top usability issues first.
Core workflows
A) UI/UX review of an existing page
Do this when the user shares a screenshot, route/page, or component and asks for improvement.
Steps:
- Identify intent and primary action.
- Check clarity: hierarchy, CTA prominence, labels, and visual noise.
- Check usability: forms, errors, loading/empty states, and navigation.
- Check accessibility basics: keyboard, focus order, labels, contrast.
- Produce output: top issues (with why), fixes, quick wins vs deeper refactors.
Use detailed checklists in:
references/ui-review-checklist.mdreferences/accessibility-checklist.md
B) Designing a new screen/component
Do this when the user asks to design a new page, dialog, component, or flow.
Steps:
- Ask for minimum inputs: users + goal, must-have fields/actions, and target content density.
- Propose an IA/layout: structure, regions, hierarchy.
- Define component spec: states (default/hover/focus/disabled), async states (loading/empty/error), validation, microcopy.
- Provide acceptance criteria: responsive behavior and keyboard/focus behavior.
Use system defaults and token guidance in:
references/design-system-defaults.md
Output templates
UI/UX findings template
Use this structure:
- Summary (1-2 sentences)
- Top issues (prioritized)
- Issue: ...
- Why it matters: ...
- Fix: ...
- Accessibility notes
- Responsive notes
- Copy/microcopy suggestions
Component spec template
Use this structure:
- Purpose
- Anatomy (slots/parts)
- States (default/hover/focus/disabled/loading/error/empty)
- Keyboard interactions
- Validation rules (if form-related)
- Responsive behavior
Notes
- Keep content ASCII-friendly when possible to avoid Windows encoding pitfalls in older validators.
- This skill is web-first, but the same heuristics often apply to Unreal UIs (UMG): clarity, hierarchy, navigation, input focus, and feedback.
1---2name: web-ui-ux3description: 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.4---5
6# Web UI/UX
7
8You help produce modern, usable, accessible web UI with clear, testable guidance.
9
10## How to run this skill well
11
12Establish context quickly (ask only what you need): platform, audience/jobs-to-be-done, the page/component in scope, and constraints (brand, timeline, existing design system).
13
14Prefer concrete outputs: a short prioritized fix list, a component spec (states + interactions), and accessibility notes.
15
16Keep scope tight: avoid broad redesigns unless asked; fix the top usability issues first.
17
18## Core workflows
19
20### A) UI/UX review of an existing page
21
22Do this when the user shares a screenshot, route/page, or component and asks for improvement.
23
24Steps:
25
261. Identify intent and primary action.
271. Check clarity: hierarchy, CTA prominence, labels, and visual noise.
281. Check usability: forms, errors, loading/empty states, and navigation.
291. Check accessibility basics: keyboard, focus order, labels, contrast.
301. Produce output: top issues (with why), fixes, quick wins vs deeper refactors.
31
32Use detailed checklists in:
33
34- [`references/ui-review-checklist.md`](references/ui-review-checklist.md)
35- [`references/accessibility-checklist.md`](references/accessibility-checklist.md)
36
37### B) Designing a new screen/component
38
39Do this when the user asks to design a new page, dialog, component, or flow.
40
41Steps:
42
431. Ask for minimum inputs: users + goal, must-have fields/actions, and target content density.
441. Propose an IA/layout: structure, regions, hierarchy.
451. Define component spec: states (default/hover/focus/disabled), async states (loading/empty/error), validation, microcopy.
461. Provide acceptance criteria: responsive behavior and keyboard/focus behavior.
47
48Use system defaults and token guidance in:
49
50- [`references/design-system-defaults.md`](references/design-system-defaults.md)
51
52## Output templates
53
54### UI/UX findings template
55
56Use this structure:
57
58- Summary (1-2 sentences)
59- Top issues (prioritized)
60 - Issue: ...
61 - Why it matters: ...
62 - Fix: ...
63- Accessibility notes
64- Responsive notes
65- Copy/microcopy suggestions
66
67### Component spec template
68
69Use this structure:
70
71- Purpose
72- Anatomy (slots/parts)
73- States (default/hover/focus/disabled/loading/error/empty)
74- Keyboard interactions
75- Validation rules (if form-related)
76- Responsive behavior
77
78## Notes
79
80- Keep content ASCII-friendly when possible to avoid Windows encoding pitfalls in older validators.
81- This skill is web-first, but the same heuristics often apply to Unreal UIs (UMG): clarity, hierarchy, navigation, input focus, and feedback.
majiayu000