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
@@ -22,3 +22,15 @@ Basic deployment instructions.
|
||||
- Code style
|
||||
- Commit message format
|
||||
- Branch naming
|
||||
|
||||
## Specialists
|
||||
- `requirements_analyst` – Requirements, acceptance criteria, assumptions, non-goals
|
||||
- `solution_architect` – Architecture, design, task graph, deployment implications
|
||||
- `ui_design_specialist` – Interactive UI design planning, HTML mockup creation via webspace, UX states, accessibility, design tokens, design handoff support
|
||||
- `implementation_engineer` – Code implementation and refactoring
|
||||
- `test_debug_engineer` – Tests, debugging, root cause
|
||||
- `quality_reviewer` – Validates ALL artifacts at every phase gate
|
||||
- `runtime_devops_engineer` – Runtime verification, deployment basics
|
||||
- `security_data_engineer` – Security, data, migration and backup risks
|
||||
- `deploy_agent` – Coolify Deployment Architect and Operator
|
||||
- `release_auditor` – Final audit, release readiness, handoff
|
||||
|
||||
@@ -16,3 +16,6 @@
|
||||
- **Decision**: ...
|
||||
- **Rationale**: ...
|
||||
- **Alternatives Considered**: ...
|
||||
|
||||
## Next Phase
|
||||
**UI Design** — After architecture is approved, the next phase is UI Design (Phase 3). The orchestrator delegates to `ui_design_specialist` for interactive UI design planning with HTML mockups. For non-UI projects (API, CLI, library), this phase can be skipped with explicit user approval.
|
||||
|
||||
@@ -0,0 +1,73 @@
|
||||
# Component Inventory
|
||||
|
||||
## Project Overview
|
||||
- **Project Name:** {{project_name}}
|
||||
- **UI Technology Stack:** {{ui_technology}}
|
||||
- **Date:** {{date}}
|
||||
|
||||
## Component List
|
||||
|
||||
| # | Component | Description | View(s) | Architecture Module | States Documented | Mockup Ref |
|
||||
|---|---|---|---|---|---|---|
|
||||
| 1 | {{component_name}} | {{description}} | {{views}} | {{module}} | Yes/No | {{mockup_url}} |
|
||||
|
||||
## Component Details
|
||||
|
||||
### {{component_name}}
|
||||
|
||||
- **Description:** {{description}}
|
||||
- **Used in Views:** {{views}}
|
||||
- **Architecture Module:** {{module}}
|
||||
- **API Endpoints Used:** {{endpoints}}
|
||||
- **Props/Parameters:** {{props}}
|
||||
|
||||
#### States
|
||||
|
||||
| State | Visual | CSS Implementation | Notes |
|
||||
|---|---|---|---|
|
||||
| Default | {{description}} | — | Normal state |
|
||||
| Hover | {{description}} | `:hover` | Mouse over |
|
||||
| Focus | {{description}} | `:focus`, `:focus-visible` | Keyboard focus, visible focus ring |
|
||||
| Active | {{description}} | `:active` | Pressed |
|
||||
| Disabled | {{description}} | `:disabled` | Reduced opacity, not clickable |
|
||||
| Loading | {{description}} | Spinner/skeleton | In-progress |
|
||||
| Error | {{description}} | Red border + message | Validation failed |
|
||||
|
||||
#### Accessibility
|
||||
- **ARIA labels:** {{aria_labels}}
|
||||
- **Keyboard interaction:** {{keyboard_interaction}}
|
||||
- **Focus management:** {{focus_management}}
|
||||
|
||||
## Component Mapping to Architecture
|
||||
|
||||
| Component | API Endpoint | Data Model | Notes |
|
||||
|---|---|---|---|
|
||||
| {{component_name}} | {{endpoint}} | {{model}} | {{notes}} |
|
||||
|
||||
## Reusable Components
|
||||
|
||||
Components shared across multiple views:
|
||||
|
||||
| Component | Used In | Reuse Notes |
|
||||
|---|---|---|
|
||||
| {{component_name}} | {{views}} | {{reuse_notes}} |
|
||||
|
||||
## Form Components
|
||||
|
||||
| Form Component | Validation | Submit Behavior | Error Display |
|
||||
|---|---|---|---|
|
||||
| {{component_name}} | {{validation_rules}} | {{submit_behavior}} | {{error_display}} |
|
||||
|
||||
## Navigation Components
|
||||
|
||||
| Component | Type | Items | Active State Indicator |
|
||||
|---|---|---|---|
|
||||
| {{component_name}} | {{type}} | {{items}} | {{active_indicator}} |
|
||||
|
||||
## Status
|
||||
|
||||
- [ ] All components have states documented (default, hover, focus, active, disabled, loading, error)
|
||||
- [ ] All components map to architecture modules
|
||||
- [ ] All form components have validation UX documented
|
||||
- [ ] All interactive components have accessibility notes
|
||||
- [ ] Reusable components identified and documented
|
||||
@@ -1,5 +1,7 @@
|
||||
# Current Status
|
||||
|
||||
<!-- Valid phase values: init, intake, architecture, ui_design, implementation, test, runtime, deployment, release -->
|
||||
|
||||
## Phase: init
|
||||
|
||||
## Last Completed
|
||||
|
||||
@@ -11,3 +11,6 @@
|
||||
## Deployment Implications
|
||||
|
||||
## Technology Decisions
|
||||
|
||||
## Next Phase
|
||||
**UI Design** — After design is approved, the next phase is UI Design (Phase 3). The orchestrator delegates to `ui_design_specialist` for interactive UI design planning with HTML mockups. For non-UI projects (API, CLI, library), this phase can be skipped with explicit user approval.
|
||||
|
||||
@@ -45,7 +45,30 @@ Jede Phase hat einen "Gate" (Torschluss). Ein Gate ist erst dann offen wenn ALLE
|
||||
|
||||
---
|
||||
|
||||
## Gate 3: IMPLEMENTATION → DEPLOY
|
||||
## Gate 3: UI DESIGN → IMPLEMENTATION
|
||||
|
||||
**Vorraussetzungen:**
|
||||
- [ ] `ui_design.md` erstellt (Design-System, UX States, Accessibility, Design Tokens)
|
||||
- [ ] `component_inventory.md` erstellt (alle UI-Komponenten mit States)
|
||||
- [ ] Mockup URLs veröffentlicht und erreichbar (HTTP 200)
|
||||
- [ ] User hat ALLE Mockups explizit bestätigt
|
||||
- [ ] Sitemap/User Flow erstellt und bestätigt
|
||||
- [ ] UI-Technologie-Stack aligniert mit architecture.md
|
||||
- [ ] Responsive Design demonstriert (mobile + desktop)
|
||||
- [ ] UX States abgedeckt (loading, empty, error, partial)
|
||||
- [ ] Accessibility: WCAG 2.1 AA Basics (Kontrast, Semantic HTML, ARIA, Keyboard)
|
||||
- [ ] Real Content verwendet (kein Lorem Ipsum)
|
||||
|
||||
**Was zu tun ist:**
|
||||
1. `call_subordinate profile=ui_design_specialist` für UI-Design-Planung
|
||||
2. Iterativer Dialog: Mockup erstellen → User-Feedback → modifizieren → bis User abnimmt
|
||||
3. `ui_design.md` und `component_inventory.md` schreiben
|
||||
4. Quality Reviewer für UI-Design-Gate
|
||||
5. User um Bestätigung bitten
|
||||
|
||||
---
|
||||
|
||||
## Gate 4: IMPLEMENTATION → DEPLOY
|
||||
|
||||
**Vorraussetzungen:**
|
||||
- [ ] Backend implementiert + läuft (Health-Check OK)
|
||||
@@ -96,6 +119,7 @@ Jede Phase hat einen "Gate" (Torschluss). Ein Gate ist erst dann offen wenn ALLE
|
||||
|
||||
| Task | Subagent |
|
||||
|------|----------|
|
||||
| UI design planen + Mockups | **ui_design_specialist** |
|
||||
| Deployment planen | **deploy_agent** |
|
||||
| Backend implementieren | implementation_engineer |
|
||||
| Frontend implementieren | implementation_engineer |
|
||||
|
||||
@@ -18,6 +18,7 @@
|
||||
"progress": {
|
||||
"requirements_done": false,
|
||||
"design_done": false,
|
||||
"ui_design_done": false,
|
||||
"tasks_done": false,
|
||||
"implementation_started": false,
|
||||
"tests_run": false,
|
||||
|
||||
@@ -17,5 +17,6 @@ Start software intake.
|
||||
|
||||
## Do Not Do
|
||||
- Skip planning
|
||||
- Skip UI design (for UI projects)
|
||||
- Code before approval
|
||||
- Deploy before runtime verification
|
||||
|
||||
@@ -3,6 +3,7 @@
|
||||
## Open
|
||||
- [ ] Complete software intake (requirements)
|
||||
- [ ] Create architecture and design
|
||||
- [ ] UI design planning and mockup approval (for UI projects)
|
||||
- [ ] Break down into tasks
|
||||
- [ ] Get plan approval
|
||||
- [ ] Implement features
|
||||
|
||||
@@ -0,0 +1,234 @@
|
||||
# UI Design Document
|
||||
|
||||
## Project Overview
|
||||
- **Project Name:** {{project_name}}
|
||||
- **UI Technology Stack:** {{ui_technology}}
|
||||
- **Design Date:** {{date}}
|
||||
- **Status:** {{status}}
|
||||
|
||||
## Sitemap / User Flow
|
||||
|
||||
{{sitemap}}
|
||||
|
||||
<!-- Example:
|
||||
Dashboard
|
||||
├── Detail View (click on table row)
|
||||
│ └── Edit Form (click edit button)
|
||||
├── Settings
|
||||
│ ├── Profile Settings
|
||||
│ └── Notification Settings
|
||||
└── Help / About
|
||||
-->
|
||||
|
||||
## Wireframes (For Complex UIs >5 Views)
|
||||
|
||||
{{wireframes}}
|
||||
|
||||
<!-- Document wireframe approval status and any structural decisions -->
|
||||
|
||||
## Mockup URLs
|
||||
|
||||
<!-- All approved mockup URLs with cache-buster parameters -->
|
||||
|
||||
| View | URL | Version | Status |
|
||||
|---|---|---|---|
|
||||
| {{view_name}} | {{mockup_url}} | v{{n}} | Approved |
|
||||
|
||||
### Index Page
|
||||
- **URL:** {{index_url}}
|
||||
|
||||
## Design System
|
||||
|
||||
### Design Tokens (CSS Custom Properties)
|
||||
|
||||
```css
|
||||
:root {
|
||||
--color-primary: #2563eb;
|
||||
--color-secondary: #64748b;
|
||||
--color-background: #f8fafc;
|
||||
--color-surface: #ffffff;
|
||||
--color-error: #dc2626;
|
||||
--color-success: #16a34a;
|
||||
--color-warning: #f59e0b;
|
||||
--color-text: #1e293b;
|
||||
--color-text-muted: #64748b;
|
||||
--spacing-xs: 4px;
|
||||
--spacing-sm: 8px;
|
||||
--spacing-md: 16px;
|
||||
--spacing-lg: 24px;
|
||||
--spacing-xl: 32px;
|
||||
--radius-sm: 4px;
|
||||
--radius-md: 8px;
|
||||
--radius-lg: 16px;
|
||||
--shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
|
||||
--shadow-md: 0 4px 6px rgba(0,0,0,0.1);
|
||||
--font-body: 'Inter', sans-serif;
|
||||
--font-size-base: 14px;
|
||||
--font-size-sm: 12px;
|
||||
--font-size-lg: 20px;
|
||||
}
|
||||
```
|
||||
|
||||
### Dark Mode Tokens (Optional)
|
||||
|
||||
```css
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--color-background: #0f172a;
|
||||
--color-surface: #1e293b;
|
||||
--color-primary: #3b82f6;
|
||||
--color-text: #e2e8f0;
|
||||
--color-text-muted: #94a3b8;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Typography
|
||||
|
||||
| Element | Font | Size | Weight |
|
||||
|---|---|---|---|
|
||||
| Body | Inter | 14px | 400 |
|
||||
| Heading | Inter | 20px | 600 |
|
||||
| Caption | Inter | 12px | 400 |
|
||||
|
||||
### Spacing
|
||||
|
||||
| Name | Value | Usage |
|
||||
|---|---|---|
|
||||
| xs | 4px | Inline gaps |
|
||||
| sm | 8px | Component padding |
|
||||
| md | 16px | Section padding |
|
||||
| lg | 24px | Page padding |
|
||||
| xl | 32px | Major section separation |
|
||||
|
||||
### Border-Radius
|
||||
|
||||
| Name | Value |
|
||||
|---|---|
|
||||
| sm | 4px |
|
||||
| md | 8px |
|
||||
| lg | 16px |
|
||||
|
||||
### Shadows
|
||||
|
||||
| Name | Value |
|
||||
|---|---|
|
||||
| sm | 0 1px 2px rgba(0,0,0,0.05) |
|
||||
| md | 0 4px 6px rgba(0,0,0,0.1) |
|
||||
|
||||
### Animations & Transitions
|
||||
|
||||
| Element | Property | Duration | Easing |
|
||||
|---|---|---|---|
|
||||
| Button hover | background-color | 150ms | ease |
|
||||
| Modal open | opacity, transform | 200ms | ease-out |
|
||||
| Sidebar toggle | width | 250ms | ease-in-out |
|
||||
| Toast | transform, opacity | 300ms | ease-out |
|
||||
|
||||
### Icon System
|
||||
|
||||
- **Library:** Lucide Icons / Heroicons / Material Icons
|
||||
- **Size:** 16px (inline), 20px (buttons), 24px (navigation)
|
||||
- **Style:** Outline / Solid / Duotone
|
||||
- **Color:** Inherits from parent text color
|
||||
|
||||
## UX States Reference
|
||||
|
||||
| State | Visual Pattern | File Suffix |
|
||||
|---|---|---|
|
||||
| Happy Path | Full data, normal layout | <view>.html |
|
||||
| Loading | Skeleton/spinner | <view>-loading.html |
|
||||
| Empty | Illustration + CTA | <view>-empty.html |
|
||||
| Error | Error message + retry | <view>-error.html |
|
||||
| Partial | Few items + "Load more" | <view>-partial.html |
|
||||
|
||||
### State Details per View
|
||||
|
||||
{{ux_state_details}}
|
||||
|
||||
<!-- For each view, document:
|
||||
- Happy path: What data is shown, layout description
|
||||
- Loading: Skeleton pattern or spinner type
|
||||
- Empty: Illustration, CTA text, CTA action
|
||||
- Error: Error message text, retry button behavior
|
||||
- Partial: Threshold for partial display, "Load more" behavior
|
||||
-->
|
||||
|
||||
## Component States
|
||||
|
||||
For each interactive component, document ALL states:
|
||||
|
||||
| Component | Default | Hover | Focus | Active | Disabled | Loading | Error |
|
||||
|---|---|---|---|---|---|---|---|
|
||||
| {{component_name}} | {{description}} | {{css_hover}} | {{css_focus}} | {{css_active}} | {{css_disabled}} | {{loading_pattern}} | {{error_pattern}} |
|
||||
|
||||
## Form Validation UX
|
||||
|
||||
- **Inline validation:** On blur (not every keystroke)
|
||||
- **Error messages:** Below or beside the field (not in alert popup)
|
||||
- **Success state:** Green checkmark or border
|
||||
- **Required field indicators:** * or explicit label
|
||||
- **Submit button:** Disabled until form is valid
|
||||
- **Validation summary:** At top of form for long forms
|
||||
|
||||
## Accessibility Notes (WCAG 2.1 AA)
|
||||
|
||||
- **Contrast ratio:** ≥ 4.5:1 (text), ≥ 3:1 (large text)
|
||||
- **Semantic HTML:** nav, main, article, section, button, a, form, label
|
||||
- **ARIA labels:** For interactive elements without visible text (icon buttons, etc.)
|
||||
- **Keyboard navigation:** All interactive elements focusable, visible focus state (:focus-visible)
|
||||
- **Alt text:** For images, illustrations, and meaningful icons
|
||||
- **Form labels:** Every input has a <label> with for="inputId"
|
||||
- **Skip link:** "Skip to main content" link at top of page
|
||||
- **Heading hierarchy:** h1 → h2 → h3, no skipped levels
|
||||
|
||||
## Content Strategy
|
||||
|
||||
- Real content used in all mockups (no Lorem Ipsum)
|
||||
- Real product names, prices, user names
|
||||
- Real error messages and empty state texts
|
||||
- Realistic placeholder data when real data is not available
|
||||
|
||||
## Internationalization (Optional)
|
||||
|
||||
- **i18n needed:** Yes/No
|
||||
- **Primary language:** {{language}}
|
||||
- **Text expansion rules:** German ~30% longer than English
|
||||
|
||||
## Dark Mode (Optional)
|
||||
|
||||
- **Dark mode needed:** Yes/No
|
||||
- **Implementation:** CSS prefers-color-scheme or separate mockups
|
||||
- **Dark mode tokens:** Documented in Design System section above
|
||||
|
||||
## Design Decisions
|
||||
|
||||
{{design_decisions}}
|
||||
|
||||
<!-- Document each major design decision with rationale:
|
||||
- Decision: What was decided
|
||||
- Rationale: Why this choice
|
||||
- Alternatives considered: What else was evaluated
|
||||
- User feedback: Any user input that influenced this decision
|
||||
-->
|
||||
|
||||
## Technology Alignment
|
||||
|
||||
- **Backend:** {{backend_technology}}
|
||||
- **UI Framework:** {{ui_framework}}
|
||||
- **API Integration:** How UI components consume backend API endpoints
|
||||
- **Data Models:** How UI data maps to backend data models
|
||||
|
||||
## Open Design Questions
|
||||
|
||||
{{open_questions}}
|
||||
|
||||
## Ready for Implementation
|
||||
|
||||
- [ ] All mockups approved by user
|
||||
- [ ] Component inventory complete
|
||||
- [ ] Design system documented
|
||||
- [ ] UX states covered for all views
|
||||
- [ ] Accessibility documented
|
||||
- [ ] Technology aligned with architecture
|
||||
- [ ] No open blockers
|
||||
@@ -6,3 +6,5 @@
|
||||
|---|---|---|---|---|---|
|
||||
| - | init | 0 | a0_software_orchestrator | Project initialized | completed |
|
||||
|
||||
<!-- Valid phase values: init, intake, architecture, ui_design, implementation, test, runtime, deployment, release -->
|
||||
|
||||
|
||||
@@ -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 -->
|
||||
|
||||
Reference in New Issue
Block a user