feat: add ui_design_specialist (Phase 3 UI Design) v0.2.0

- New specialist: ui_design_specialist with iterative mockup dialog
- New Phase 3 (UI Design) between Architecture and Implementation
- Relay model: orchestrator passes responses verbatim in Phase 3
- Cost-control exception for UI Design phase (unlimited subagent calls)
- Webspace mockup workflow with cache-buster and obscure dirs
- UX states coverage (loading, empty, error, partial)
- WCAG 2.1 AA accessibility guidelines
- Design tokens (CSS custom properties) in design system
- Component states (hover, focus, active, disabled, loading, error)
- Sitemap/wireframe before mockups for complex UIs
- Real content strategy (no Lorem Ipsum)
- Form validation UX in mockups
- Dark mode and i18n support (optional)
- Design handoff support (specialist available during implementation)
- Skip mechanism for non-UI projects
- Mockup state file for context compression recovery
- Multi-page mockup strategy with index.html
- task_graph.json mockup references
- Plugin version: 0.1.14 -> 0.2.0
- 47 files changed across 7 implementation blocks
- 3 review rounds with 41 corrections integrated
This commit is contained in:
Software Orchestrator
2026-06-19 21:33:21 +02:00
parent 2343f0e717
commit f6691b74f6
44 changed files with 995 additions and 40 deletions
@@ -6,3 +6,12 @@ A task is done when:
- [ ] Code reviewed
- [ ] State files updated
- [ ] No open errors
A UI design phase is done when:
- [ ] All mockups approved by user
- [ ] Component inventory complete with states
- [ ] Design system documented with design tokens
- [ ] UX states covered (loading, empty, error, partial)
- [ ] Accessibility: WCAG 2.1 AA basics followed
- [ ] Sitemap/user flow approved
- [ ] Real content used (no Lorem Ipsum)
@@ -6,6 +6,13 @@
## Architecture
## UI Design
- Mockup URLs (final approved versions with cache-busters)
- Component inventory summary
- Design system summary (design tokens, typography, spacing, animations, icons)
- UX states coverage summary
- Accessibility compliance summary
## Deployment
## Known Issues
@@ -4,6 +4,7 @@
|---|---|---|
| Requirements | 0 | 100 |
| Architecture | 0 | 100 |
| UI Design | 0 | 100 |
| Implementation | 0 | 100 |
| Testing | 0 | 100 |
| Runtime | 0 | 100 |
@@ -1,7 +1,20 @@
# Quality Gates
## Gate 1: Ready for Implementation
## Gate 2: Ready for Runtime Verification
## Gate 3: Ready for Deployment Preparation
## Gate 4: Ready for Release Handoff
## Gate 5: Ready for Production Handoff
## Gate 2: UI Design Approved → Ready for Implementation
- [ ] UI technology stack documented and aligns with architecture.md
- [ ] Interactive HTML mockups published and accessible (HTTP 200)
- [ ] User has reviewed and approved ALL mockups
- [ ] Component inventory complete with all states (hover, focus, active, disabled, loading, error)
- [ ] Responsive design demonstrated (mobile + desktop)
- [ ] ui_design.md written with design system, UX states, accessibility
- [ ] Design system includes CSS custom properties (design tokens), typography, spacing, animations, icons
- [ ] UX states covered for all views (loading, empty, error, partial)
- [ ] Accessibility: WCAG 2.1 AA basics (contrast, semantic HTML, ARIA, keyboard, alt text, form labels)
- [ ] Sitemap/user flow created and approved
- [ ] Real content used (no Lorem Ipsum)
- [ ] Mockup URLs include cache-buster parameters
## Gate 3: Ready for Runtime Verification
## Gate 4: Ready for Deployment Preparation
## Gate 5: Ready for Release Handoff
## Gate 6: Ready for Production Handoff
@@ -4,6 +4,13 @@
## New Features
## UI Design
- UI technology stack
- Design system (design tokens, typography, spacing, animations, icons)
- UX states coverage (loading, empty, error, partial)
- Accessibility: WCAG 2.1 AA compliance
- Mockup URLs (approved versions)
## Bug Fixes
## Breaking Changes
@@ -3,6 +3,9 @@ profiles:
codebase_explorer:
enabled: true
max_per_session: 3
ui_design_specialist:
enabled: true
max_per_session: 99 # No limit during Phase 3 (cost-control exception)
implementation_engineer:
enabled: true
max_per_session: 5
@@ -1,4 +1,6 @@
# Traceability Matrix
| Requirement | Task(s) | Test(s) | Status |
|---|---|---|---|
| Requirement | Task(s) | UI Design Ref | Test(s) | Status |
|---|---|---|---|---|
<!-- UI Design Ref: Mockup URL or component name from ui_design.md / component_inventory.md -->