/ui-quality - UI Quality Gate Verification
Run quality gates to validate UI against design tokens, accessibility standards (WCAG), and visual consistency requirements.
Usage
# Run all quality gates
/ui-quality
# Run on specific path
/ui-quality src/components/Dashboard/
# Run specific gate
/ui-quality --gate accessibility
/ui-quality --gate tokens
/ui-quality --gate visual
# Strict mode (fail on warnings)
/ui-quality --strict
# Generate detailed report
/ui-quality --report
# Auto-fix violations
/ui-quality --fix
# WCAG level selection
/ui-quality --wcag AAA
Output Format
UI QUALITY GATES
═══════════════════════════════════════════════════════════════
Target: src/components/
Files Scanned: 24
Gate 1: Requirements Completeness
───────────────────────────────────────────────────────────────
✅ PASS (100%)
Checks:
├─ ✅ UI type specified
├─ ✅ Target framework defined (React)
├─ ✅ User flows documented
└─ ✅ Acceptance criteria present
Gate 2: Design Token Compliance
───────────────────────────────────────────────────────────────
⚠️ WARN (95%)
Checks:
├─ ✅ Color tokens (100%) - 0 raw hex values
├─ ⚠️ Typography (95%) - 2 violations
│ ├─ Button.tsx:42 - Font size 15px not on scale
│ └─ Card.tsx:28 - Font weight 450 not defined
├─ ✅ Spacing (100%) - All on 8px grid
└─ ✅ Borders (100%) - Consistent radius
Auto-fixable: 2 issues
Gate 3: Accessibility (WCAG AA)
───────────────────────────────────────────────────────────────
✅ PASS (98%)
Checks:
├─ ✅ Color contrast (4.5:1 text, 3:1 UI)
├─ ✅ Heading hierarchy (no skipped levels)
├─ ✅ Form labels (all inputs labeled)
├─ ✅ Alt text (all images)
├─ ✅ Focus indicators (visible on all)
├─ ✅ Touch targets (44x44px minimum)
└─ ⚠️ Skip links (not implemented)
Warnings:
└─ Consider adding skip link to main content
Gate 4: Visual Consistency
───────────────────────────────────────────────────────────────
✅ PASS (92%)
Checks:
├─ ✅ Hierarchy Score: 92
├─ ✅ Spacing Score: 95
├─ ✅ Polish Score: 94
├─ ✅ Border radius: Consistent (8px)
├─ ✅ Shadow levels: 2 (within limit)
└─ ⚠️ Icon style: Mixed (outline + filled)
Recommendations:
└─ Standardize to outline icons throughout
Gate 5: Performance Budget
───────────────────────────────────────────────────────────────
✅ PASS (100%)
Checks:
├─ ✅ Bundle size: 145KB (limit: 200KB)
├─ ✅ Component count: 24 (no limit)
├─ ✅ Nesting depth: 3 (limit: 5)
└─ ✅ Props count: avg 4 (limit: 10)
Summary
═══════════════════════════════════════════════════════════════
Gate Status Score
────────────────────────────────────────────
Requirements ✅ PASS 100%
Design Tokens ⚠️ WARN 95%
Accessibility ✅ PASS 98%
Visual Consistency ✅ PASS 92%
Performance ✅ PASS 100%
────────────────────────────────────────────
Overall ✅ PASS 97%
Issues:
├─ Violations: 0
├─ Warnings: 4
└─ Auto-fixable: 2
RESULT: ✅ QUALITY GATES PASSED
Ready for UI generation: YES
Quality Gates
Gate 1: Requirements Completeness
| Check | Description | Pass Criteria |
|---|---|---|
ui_type | UI type specified | component/layout/app |
framework | Target framework | React/Vue/Angular |
user_flows | User flows documented | At least 1 flow |
acceptance | Acceptance criteria | Criteria defined |
Gate 2: Design Token Compliance
| Check | Description | Pass Criteria |
|---|---|---|
colors | Color token usage | 100% tokens, 0 raw hex |
typography | Font scale adherence | All on defined scale |
spacing | 8px grid compliance | All values on grid |
borders | Border consistency | Consistent radius |
Gate 3: Accessibility (WCAG)
| Check | Description | Pass Criteria |
|---|---|---|
contrast | Color contrast ratios | 4.5:1 text, 3:1 UI |
headings | Heading hierarchy | No skipped levels |
labels | Form input labels | All inputs labeled |
alt_text | Image alt text | All images have alt |
focus | Focus indicators | Visible on all |
touch | Touch targets | 44x44px minimum |
Gate 4: Visual Consistency
| Check | Description | Pass Criteria |
|---|---|---|
hierarchy | Visual hierarchy | Score ≥ 85 |
spacing | Spacing rhythm | Score ≥ 85 |
polish | Visual polish | Score ≥ 90 |
consistency | Pattern consistency | Consistent styles |
Gate 5: Performance
| Check | Description | Pass Criteria |
|---|---|---|
bundle_size | Component bundle size | ≤ 200KB |
nesting | Component nesting depth | ≤ 5 levels |
props | Average props per component | ≤ 10 |
Options
| Option | Description |
|---|---|
--gate <name> | Run specific gate only |
--strict | Fail on any warning |
--report | Generate detailed report file |
--fix | Auto-fix violations where possible |
--wcag <level> | WCAG compliance level (A, AA, AAA) |
--json | Output as JSON |
--output <file> | Save report to file |
Agent Invoked
| Gate | Agent | Purpose |
|---|---|---|
| Requirements | moe-ui-quality-gate-enforcer | Validate requirements |
| Design Tokens | moe-ui-design-system-enforcer | Check token compliance |
| Accessibility | generative-ui-accessibility-auditor | WCAG validation |
| Visual | moe-ui-visual-design-specialist | Consistency check |
| Performance | moe-ui-quality-gate-enforcer | Performance budget |
Exit Codes
| Code | Meaning |
|---|---|
| 0 | All gates passed |
| 1 | Passed with warnings |
| 2 | Gates failed |
| 3 | Invalid path or configuration |
Related Commands
/ui-optimize- Full optimization pipeline/ui-design-system- Design system management/ui-a2ui-render- A2UI tree generation/ui-approve- Approval management
Completion Checklist
Before marking complete:
- All gates evaluated
- Violations identified
- Warnings documented
- Auto-fixes applied (if requested)
- Report generated (if requested)
- Ready for generation status determined
When NOT to Use
Do NOT use when:
- ❌ Need full optimization (use
/ui-optimize) - ❌ Quick component generation
- ❌ Design system not loaded yet
Command Version: 1.0.0 Created: 2026-01-19 Part of: CODITECT MoE UI/UX Agent System