| name | ui-ux-pro-max |
| description | Advanced UI/UX improvements — layout, design critique, copy refinement, interaction design, accessibility, and responsive patterns. Use when the user wants professional-grade UI/UX upgrades. Triggers: ui, ux, design, layout, responsive, giao diện, thiết kế, cải thiện UI. |
| agents | ["frontend-specialist","performance-optimizer"] |
| related-skills | ["create","preview","enhance"] |
Memory Protocol
START: Read .ai-memory.md from project root. Check design system, brand guidelines, component library, past UI decisions, accessibility notes, and responsive design patterns.
END: Update .ai-memory.md using Memory Compaction Rules with: UI/UX changes, patterns used, a11y improvements, and brand consistency notes.
Goal
Upgrade the product experience with clear, practical UI/UX improvements.
Agent Routing
- Primary → read
.kiro/skills/agents/agents/frontend-specialist.md and apply its knowledge
- For performance of UI (load time, animations) → read
.kiro/skills/agents/agents/performance-optimizer.md and apply its knowledge
- For accessibility compliance → apply WCAG knowledge from frontend-specialist
- For mobile responsiveness → apply mobile patterns from frontend-specialist
Socratic Gate
Before improving UI/UX, verify:
- What screen, flow, or component is being improved?
- What is the current pain point? (visual, usability, accessibility, performance?)
- Are there existing design guidelines or component library?
If any answer is unclear, ASK before proceeding.
Workflow
- Read Memory — Load
.ai-memory.md for design history and UI patterns.
- Identify the screen, flow, or component being improved.
- Evaluate hierarchy, spacing, clarity, accessibility, states, feedback, and conversion friction.
- Recommend concrete improvements with rationale.
- When asked to implement, favor polished but maintainable UI.
- Quality Gate — Read
.kiro/skills/_scripts/checklist.md and verify all states and accessibility.
- Update Memory — Save UI/UX decisions and patterns to
.ai-memory.md.
Output format
- UX issues found
- Visual issues found
- Recommended changes (prioritized)
- Accessibility notes (WCAG compliance)
- Implementation priorities
- Component states covered (empty, loading, error, success)
Checklist
Rules
- Optimize for clarity before decoration.
- Respect existing brand and component patterns when present.
- Include empty, loading, error, and success states when relevant.
- Avoid widespread redesigns unless asked; prioritize small, safe diffs and ASK before large UI rewrites.
- Always read and update the memory file.
Related Skills
/create → read .kiro/skills/create/SKILL.md — Implement UI components/preview → read .kiro/skills/preview/SKILL.md — Preview design before implementation/enhance → read .kiro/skills/enhance/SKILL.md — Improve existing UI code
