UI/UX Improvement Research Command
Parse user input for:
- Focus Area: Specific component, page, or feature to improve (optional)
- Mode:
research (default) or implement (immediate action)
- Scope:
full (entire app) or targeted (specific area)
If empty, analyze entire application with research mode.
Overview
This command combines AI-powered UI/UX analysis with real-time trend research to generate actionable improvement recommendations.
Key Features
- 🎨 UI/UX Designer Agent: Specialized analysis via ui-ux-designer agent
- 🛠️ Tech Stack Advisor Agent: Library/framework recommendations via tech-stack-advisor agent
- 🔍 Trend Research: Web search for current UI/UX trends (2024-2025)
- 📊 Gap Analysis: Compare current state vs best practices
- 📝 Actionable Report: Generate improvement roadmap in markdown
- 🚀 Optional Implementation: Execute improvements on demand
Execution Steps
1. Context Gathering
Analyze Project Structure
Detect Frontend Framework:
- Check
package.json for: React, Next.js, Vue, Svelte, Angular
- Identify styling approach: Tailwind, CSS Modules, styled-components, CSS-in-JS
- Find component library: shadcn/ui, MUI, Chakra, Radix
Explore UI Components:
- Use Glob to find component files (
**/*.tsx, **/components/**/*)
- Identify layout components (Header, Footer, Sidebar, Navigation)
- Map page structure and routing
Analyze Current Design System:
- Color palette (CSS variables, theme config)
- Typography (fonts, sizes, weights)
- Spacing and layout patterns
- Component consistency
2. Invoke UI/UX Designer Agent
REQUIRED: Use Task tool with subagent_type: "ui-ux-designer" to perform:
- User experience evaluation
- Accessibility assessment (WCAG guidelines)
- Information architecture review
- Component usability analysis
- Mobile responsiveness check
Agent Prompt Template:
Analyze the UI/UX of this project focusing on:
1. User journey and flow optimization
2. Visual hierarchy and information architecture
3. Accessibility compliance (WCAG 2.1 AA)
4. Component reusability and consistency
5. Responsive design patterns
6. User interaction feedback patterns
Project context:
- Framework: {detected framework}
- Styling: {styling approach}
- Component library: {if any}
- Focus area: {from user input or "entire application"}
Provide specific, actionable recommendations with priority levels.
3. Invoke Tech Stack Advisor Agent
REQUIRED: Use Task tool with subagent_type: "tech-stack-advisor" when:
- Recommending new UI component libraries
- Evaluating animation/interaction libraries
- Comparing styling solutions
- Suggesting accessibility tooling
- Recommending state management for UI
Agent Prompt Template:
Evaluate UI/UX related technologies for this project:
Current stack:
- Framework: {detected framework}
- Styling: {styling approach}
- Component library: {if any}
Evaluate these categories based on project needs:
1. Component libraries (shadcn/ui, Radix, Headless UI, etc.)
2. Animation libraries (Framer Motion, React Spring, GSAP)
3. Accessibility tools (axe-core, react-aria, etc.)
4. Icon libraries (Lucide, Heroicons, Phosphor)
5. Form libraries (React Hook Form, Formik, etc.)
For each recommendation:
- Modernity score (0-10)
- Stability score (0-10)
- Bundle size impact
- Migration complexity
- Learning curve
Focus on: {user focus area or "general UI/UX improvement"}
4. Trend Research (Web Search)
Search Queries (use WebSearch tool):
"UI/UX trends 2025" best practices"{framework} UI design patterns 2025" (e.g., "React UI design patterns 2025")"modern web design trends" accessibility"{component type} UX best practices" (if specific focus area)"best {library type} library 2025" (e.g., "best React animation library 2025")
Information to Gather:
- Current design trends (micro-interactions, glassmorphism, etc.)
- Accessibility improvements
- Performance optimization patterns
- User engagement techniques
- Mobile-first strategies
- Emerging UI libraries and tools
- Bundle size optimization techniques
5. Gap Analysis
Compare and Identify:
- Current design vs trend recommendations
- Missing accessibility features
- Outdated patterns to modernize
- Quick wins vs major refactors
- Priority based on impact/effort ratio
- Library/tool upgrades or additions needed
6. Generate Report
Create: UI-UX-IMPROVEMENTS.md at project root
Structure:
markdown
1# UI/UX Improvement Recommendations
2
3> **Generated**: {YYYY-MM-DD HH:mm}
4> **Scope**: {full/targeted: specific area}
5> **Mode**: {research/implement}
6
7---
8
9## 📊 Current State Analysis
10
11### Framework & Stack
12
13- **Framework**: {detected}
14- **Styling**: {approach}
15- **Component Library**: {if any}
16
17### Strengths
18
19- {what's working well}
20
21### Areas for Improvement
22
23- {identified issues}
24
25---
26
27## 🎯 Trend Insights (2024-2025)
28
29### Design Trends
30
31- {trend 1}: {how it applies}
32- {trend 2}: {how it applies}
33
34### Accessibility Standards
35
36- {WCAG requirements}
37- {current compliance status}
38
39### UX Best Practices
40
41- {practice 1}
42- {practice 2}
43
44---
45
46## 🛠️ Technology Recommendations
47
48### Recommended Libraries
49
5051| ---------- | --------- | ------ | ----------- | -------- |
52| {category} | {library} | {X}/10 | {size} | {reason} |
53
54### Migration Considerations
55
56- {library 1}: {migration notes}
57- {library 2}: {migration notes}
58
59---
60
61## 🚀 Recommendations
62
63### Critical Priority
64
65#### 1. {Recommendation Title}
66
67**Problem**: {what's wrong}
68**Solution**: {how to fix}
69**Impact**: {user benefit}
70**Effort**: {Low/Medium/High}
71**Files**: {affected files}
72
73### High Priority
74
75#### 2. {Recommendation Title}
76
77{same structure}
78
79### Medium Priority
80
81#### 3. {Recommendation Title}
82
83{same structure}
84
85---
86
87## 📋 Implementation Roadmap
88
89### Phase 1: Quick Wins (1-2 days)
90
91- [ ] {task 1}
92- [ ] {task 2}
93
94### Phase 2: Core Improvements (1-2 weeks)
95
96- [ ] {task 3}
97- [ ] {task 4}
98
99### Phase 3: Advanced Enhancements (2-4 weeks)
100
101- [ ] {task 5}
102- [ ] {task 6}
103
104---
105
106## 🔗 Resources
107
108- {relevant documentation links}
109- {trend articles referenced}
110- {component library docs}
7. Implementation Mode (if requested)
If user specified implement mode or requests immediate action:
- Confirm scope with user before proceeding
- Start with Critical Priority items
- Make incremental changes with clear commits
- Verify each change doesn't break existing functionality
- Update report with completed items
Key Rules
✅ MUST DO
- Always invoke ui-ux-designer agent for expert analysis
- Always invoke tech-stack-advisor agent for library/tool recommendations
- Perform web search for current trends and library comparisons
- Analyze actual project code (not assumptions)
- Provide specific file paths in recommendations
- Include effort estimates for each recommendation
- Evaluate bundle size impact for library recommendations
- Generate report at project root (
UI-UX-IMPROVEMENTS.md)
- Consider accessibility in all recommendations
- Prioritize by impact/effort ratio
❌ NEVER DO
- Skip ui-ux-designer or tech-stack-advisor agent invocation
- Make recommendations without code analysis
- Suggest breaking changes without migration path
- Ignore mobile/responsive considerations
- Recommend trends that conflict with project constraints
- Implement without user confirmation (in implement mode)
- Generate vague or non-actionable recommendations
- Recommend libraries without bundle size consideration
- Suggest libraries with poor stability scores (<6/10)
🎯 Quality Standards
Each recommendation must include:
- Clear Problem Statement: What's wrong and why it matters
- Specific Solution: How to fix with code examples if applicable
- User Impact: How it improves user experience
- Effort Estimate: Implementation complexity (Low/Medium/High)
- File References: Which files need changes
Completion Report
After execution, provide summary:
markdown
1## UI/UX Improvement Research Complete
2
3### 📊 Analysis Summary
4
5- **Components Analyzed**: {X}
6- **Pages Reviewed**: {Y}
7- **Trends Researched**: {Z}
8- **Libraries Evaluated**: {W}
9
10### 🎯 Recommendations
11
12- **Critical**: {N}
13- **High**: {M}
14- **Medium**: {K}
15
16### 📄 Generated Report
17
18`UI-UX-IMPROVEMENTS.md` created at project root.
19
20### Next Steps
21
22{Based on mode}:
23
24- **Research mode**: Review recommendations and run with `implement` to proceed
25- **Implement mode**: {X} improvements applied, {Y} remaining
Execute
Start the UI/UX improvement research following the guidelines above.
