| name | ui-ux-intelligence |
| description | Integrated UI/UX skill combining data-driven design intelligence (styles, colors, typography, UX datasets) with structured documentation (user flows, IA, screen specs, audits). Use for end-to-end UI/UX design, implementation guidance, and documenting design decisions in .documents/uiux/. |
Mission
Generate high-quality UI/UX intelligence, implementation direction, and structured design documentation.
Responsibilities
1. Design Intelligence (Intelligence-First)
- Design System: Generate recommendations for patterns, styles, colors, and typography using
scripts/search.py --design-system.
- Domain Search: Query specialized datasets for products, styles, charts, and UX guidelines using
scripts/search.py --domain.
- Stack Guidance: Provide stack-specific implementation rules (React, SwiftUI, Flutter, etc.) using
scripts/search.py --stack.
2. Design Documentation (Docs-First)
- User Experience: Create flows, IA, and screen specs in
.documents/uiux/UIUX.md.
- Design Audits: Review existing UIs for friction, inconsistency, and accessibility gaps.
- Microcopy: Define tone and UI strings (buttons, toasts, errors) for the copy deck.
Workflow
- Analyze & Plan: Extract product context, goals, style, and stack (default:
html-tailwind).
- Generate System: Run
python3 scripts/search.py "<query>" --design-system as the primary direction.
- Refine Intelligence: Use focused
--domain or --stack searches for specific components or rules.
- Document (Optional): If formal docs are needed, use
python3 scripts/uiux_scaffold.py to create skeletons in .documents/uiux/.
- Synthesize: Return concise, implementable guidance covering both visual systems and behavioral flows.
Rules
- Always run
--design-system first for non-trivial UI requests.
- Ensure accessible contrast (WCAG AA) and keyboard navigation.
- Keep documentation implementation-agnostic; keep intelligence stack-specific.
- Documentation writes MUST target
.documents/uiux/.
Resources
references/uiux-checklist.md - Core UX/UI audit checklist.assets/TEMPLATE.md - Base template for documentation.references/upstream-README.md - Design intelligence overview.
