UI/UX Pro Max
Use the bundled offline search tools and data to turn product context into a
coherent design direction, then validate the implemented interface. Treat
search output as recommendations, not as a substitute for inspecting the
existing product, codebase, or accessibility requirements.
Workflow
- Identify the product type, users, primary task, target surface, visual
direction, implementation stack, and constraints. Preserve an existing
design system unless the user asks to replace it.
- Read
references/design-workflow.md for domain selection, command syntax,
and the delivery checklist.
- For a new product or visual direction, generate a design-system proposal
before implementation. For a focused review or small change, search only
the relevant domains and existing stack.
- Run targeted searches for accessibility, interaction, layout, charts, or
implementation guidance when they affect the task.
- Synthesize the results with repository conventions. Do not copy conflicting
recommendations blindly.
- Implement or review the interface, then verify responsive behavior,
keyboard navigation, focus visibility, contrast, motion preferences,
loading and error states, and absence of horizontal overflow.
Search Tool
Resolve UI_UX_SKILL_DIR to the directory containing this SKILL.md before
running commands. The tools use only Python's standard library and bundled CSV
data.
UI_UX_SKILL_DIR="<directory-containing-this-SKILL.md>"
PYTHONDONTWRITEBYTECODE=1 python3 "$UI_UX_SKILL_DIR/references/scripts/search.py" \
"SaaS model evaluation dashboard" --design-system --format markdown
Supplement a proposal with a domain or stack search:
PYTHONDONTWRITEBYTECODE=1 python3 "$UI_UX_SKILL_DIR/references/scripts/search.py" \
"accessible benchmark comparison chart" --domain chart
PYTHONDONTWRITEBYTECODE=1 python3 "$UI_UX_SKILL_DIR/references/scripts/search.py" \
"responsive data table loading error states" --stack react
Guardrails
- Accessibility and interaction correctness outrank visual novelty.
- Verify claims against the current code and rendered result.
- Do not install packages merely to run the bundled search tool.
- Do not fetch fonts, icons, or other assets without considering repository
policy, licensing, privacy, and offline requirements.
- Use one consistent icon family; do not use emoji as interface icons.
- Never rely on color alone to communicate state.
- Prefer project-native components, tokens, and patterns over introducing a
parallel design system.
For provenance, imported revisions, and licensing, read
references/provenance.md when maintaining or redistributing this skill.
1---2name: ui-ux-pro-max3description: Design and review accessible, responsive web or mobile interfaces with a searchable UI/UX knowledge base. Use for page or component design, dashboard and landing-page UX, visual direction, color and typography selection, design-system recommendations, chart selection, frontend stack guidance, or UI quality reviews.4---56# UI/UX Pro Max78Use the bundled offline search tools and data to turn product context into a9coherent design direction, then validate the implemented interface. Treat10search output as recommendations, not as a substitute for inspecting the11existing product, codebase, or accessibility requirements.1213## Workflow14151. Identify the product type, users, primary task, target surface, visual16 direction, implementation stack, and constraints. Preserve an existing17 design system unless the user asks to replace it.182. Read `references/design-workflow.md` for domain selection, command syntax,19 and the delivery checklist.203. For a new product or visual direction, generate a design-system proposal21 before implementation. For a focused review or small change, search only22 the relevant domains and existing stack.234. Run targeted searches for accessibility, interaction, layout, charts, or24 implementation guidance when they affect the task.255. Synthesize the results with repository conventions. Do not copy conflicting26 recommendations blindly.276. Implement or review the interface, then verify responsive behavior,28 keyboard navigation, focus visibility, contrast, motion preferences,29 loading and error states, and absence of horizontal overflow.3031## Search Tool3233Resolve `UI_UX_SKILL_DIR` to the directory containing this `SKILL.md` before34running commands. The tools use only Python's standard library and bundled CSV35data.3637```bash38UI_UX_SKILL_DIR="<directory-containing-this-SKILL.md>"39PYTHONDONTWRITEBYTECODE=1 python3 "$UI_UX_SKILL_DIR/references/scripts/search.py" \40 "SaaS model evaluation dashboard" --design-system --format markdown41```4243Supplement a proposal with a domain or stack search:4445```bash46PYTHONDONTWRITEBYTECODE=1 python3 "$UI_UX_SKILL_DIR/references/scripts/search.py" \47 "accessible benchmark comparison chart" --domain chart4849PYTHONDONTWRITEBYTECODE=1 python3 "$UI_UX_SKILL_DIR/references/scripts/search.py" \50 "responsive data table loading error states" --stack react51```5253## Guardrails5455- Accessibility and interaction correctness outrank visual novelty.56- Verify claims against the current code and rendered result.57- Do not install packages merely to run the bundled search tool.58- Do not fetch fonts, icons, or other assets without considering repository59 policy, licensing, privacy, and offline requirements.60- Use one consistent icon family; do not use emoji as interface icons.61- Never rely on color alone to communicate state.62- Prefer project-native components, tokens, and patterns over introducing a63 parallel design system.6465For provenance, imported revisions, and licensing, read66`references/provenance.md` when maintaining or redistributing this skill.
yenhao-huang