/ui-optimize - Full UI Optimization Pipeline
Run the complete MoE UI optimization pipeline including quality gate validation, navigation optimization, and visual design refinement for enterprise-grade UI generation.
Usage
# Optimize current UI specification
/ui-optimize
# Optimize specific file or directory
/ui-optimize src/components/Dashboard/
# Optimize with specific focus
/ui-optimize --focus navigation
/ui-optimize --focus visual
/ui-optimize --focus accessibility
# Dry run (preview changes without applying)
/ui-optimize --dry-run
# Generate detailed report
/ui-optimize --report
# Strict mode (all quality gates must pass)
/ui-optimize --strict
Pipeline Stages
┌──────────────────────────────────────────────────────────────────┐
│ UI OPTIMIZATION PIPELINE │
├──────────────────────────────────────────────────────────────────┤
│ │
│ 1. Quality Gate 2. Navigation 3. Visual │
│ Validation Optimization Design │
│ ┌─────────────────┐ ┌─────────────────┐ ┌─────────────┐ │
│ │ Requirements │ │ Flatten depth │ │ Hierarchy │ │
│ │ Design tokens │ ──▶ │ Frequency lift │ ──▶ │ Spacing │ │
│ │ Accessibility │ │ Header merge │ │ Polish │ │
│ │ Performance │ │ Smart grouping │ │ Consistency │ │
│ └─────────────────┘ └─────────────────┘ └─────────────┘ │
│ │ │ │ │
│ ▼ ▼ ▼ │
│ ┌───────────────────────────────────────────────────────┐ │
│ │ 4. A2UI RENDERING │ │
│ │ Generate optimized component tree │ │
│ └───────────────────────────────────────────────────────┘ │
│ │ │
│ ▼ │
│ ┌───────────────────────────────────────────────────────┐ │
│ │ 5. CODE GENERATION │ │
│ │ Output production-ready React/Vue code │ │
│ └───────────────────────────────────────────────────────┘ │
│ │
└──────────────────────────────────────────────────────────────────┘
Output Format
UI OPTIMIZATION: Dashboard Components
═══════════════════════════════════════════════════════════════
Stage 1: Quality Gate Validation
───────────────────────────────────────────────────────────────
✅ PASS Requirements Complete (100%)
✅ PASS Design Tokens Loaded (Acme Corp v2.1)
✅ PASS Accessibility Ready (WCAG AA)
⚠️ WARN Performance Budget (no explicit limits defined)
└─ Applied default: 200KB bundle, 3s load time
Stage 2: Navigation Optimization
───────────────────────────────────────────────────────────────
✅ Depth Reduction: 4 levels → 2 levels
✅ Items Lifted: 3 (Analytics, Reports, Team)
✅ Header Consolidated: 180px → 64px
✅ Items Grouped: Settings (5 items)
Before: Dashboard > Analytics > Revenue > Monthly
After: Analytics ▾ > Revenue, Monthly
Stage 3: Visual Design Refinement
───────────────────────────────────────────────────────────────
✅ Hierarchy Score: 78 → 92
✅ Spacing Score: 72 → 95
✅ Polish Score: 80 → 94
✅ AI Markers Removed: 6
Changes Applied:
├─ Card gap: 16px → 24px
├─ Shadow intensity: reduced 40%
├─ Border radius: standardized to 8px
└─ Font sizes: reduced from 7 to 4 scales
Stage 4: A2UI Tree Generated
───────────────────────────────────────────────────────────────
Components: 24 total
├─ Atoms: 15
├─ Molecules: 6
├─ Organisms: 2
└─ Templates: 1
Stage 5: Code Generation Ready
───────────────────────────────────────────────────────────────
Files to generate: 8
├─ Header.tsx
├─ DashboardGrid.tsx
├─ ProjectCard.tsx
├─ StatsCard.tsx
├─ TaskCard.tsx
├─ UserMenu.tsx
├─ NavMenu.tsx
└─ index.ts
Summary
═══════════════════════════════════════════════════════════════
Overall Quality Score: 68 → 93 (+25 improvement)
Ready for Generation: ✅ YES
Requires Approval: ✅ YES (navigation changes)
RESULT: ✅ OPTIMIZATION COMPLETE
Agents Invoked
| Stage | Agent | Purpose |
|---|---|---|
| 1 | moe-ui-quality-gate-enforcer | Validate pre-conditions |
| 2 | moe-ui-navigation-optimizer | Optimize navigation |
| 3 | moe-ui-visual-design-specialist | Refine visual design |
| 4 | moe-ui-a2ui-renderer | Generate component tree |
| 5 | generative-ui-code-generator | Generate code |
Options
| Option | Description |
|---|---|
--focus <area> | Focus on specific area (navigation, visual, accessibility) |
--dry-run | Preview changes without applying |
--report | Generate detailed optimization report |
--strict | Require all quality gates to pass |
--skip-approval | Skip HITL approval (use with caution) |
--output <dir> | Output directory for generated code |
--format <format> | Output format (react, vue, html) |
Focus Areas
Navigation Focus (--focus navigation)
- Flatten hierarchy depth
- Lift frequently accessed items
- Consolidate headers
- Group related items
Visual Focus (--focus visual)
- Improve visual hierarchy
- Optimize spacing
- Polish shadows and borders
- Remove AI-generated markers
Accessibility Focus (--focus accessibility)
- WCAG AA compliance
- Keyboard navigation
- Screen reader support
- Color contrast validation
Exit Codes
| Code | Meaning |
|---|---|
| 0 | Optimization complete, all checks passed |
| 1 | Optimization complete with warnings |
| 2 | Quality gates failed |
| 3 | User denied approval |
| 4 | Invalid input specification |
Related Commands
/ui-quality- Run quality gates only/ui-design-system- Load/enforce design system/ui-a2ui-render- Generate A2UI tree only/ui-approve- Manage approvals
Completion Checklist
Before marking complete:
- Quality gates evaluated
- Navigation optimized
- Visual design refined
- A2UI tree generated
- Code ready for generation
- Approvals handled
When NOT to Use
Do NOT use when:
- ❌ Only need quality check (use
/ui-quality) - ❌ Only need design system (use
/ui-design-system) - ❌ Simple component generation
- ❌ No optimization needed
Success Output
✅ COMMAND COMPLETE: /ui-optimize
Quality Score: 68 → 93
Components: 24
Files Ready: 8
Approval: Granted
Command Version: 1.0.0 Created: 2026-01-19 Part of: CODITECT MoE UI/UX Agent System