Leopoldadmin/a0_software_orchestrator
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

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

Browse Source 
- 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
Download Patch File Download Diff File Expand all files Collapse all files
prompts/agent.system.tool.quality_gate.md
+1
View File
@@ -9,3 +9,4 @@ Use this exact Agent Zero tool-call shape:
Rules:
- Do not use this tool to discover, read, infer, validate, or print credential values.
- If the tool is not found, stop and report a runtime tool-registration failure. Do not switch to WebUI login, CSRF, HTTP cache-refresh, shell credential scans, or `.env`/config/log searches.
- Note: UI Design phase (Phase 3) quality review is handled by `quality_reviewer` subagent, not the `quality_gate` tool. The quality_gate tool covers implementation, runtime, deployment, and release gates. For UI Design gate checks (mockup URLs, UX states, accessibility, design tokens), delegate to `quality_reviewer`.
prompts/project_templates/core/AGENTS.md
+12
View File
@@ -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
prompts/project_templates/core/architecture.md
+3
View File
@@ -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.
prompts/project_templates/core/component_inventory.md
+73
View File
@@ -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
prompts/project_templates/core/current_status.md
+2
View File
@@ -1,5 +1,7 @@
# Current Status
<!-- Valid phase values: init, intake, architecture, ui_design, implementation, test, runtime, deployment, release -->
## Phase: init
## Last Completed
prompts/project_templates/core/design.md
+3
View File
@@ -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.
prompts/project_templates/core/phase_gates.md
+25 -1
View File
@@ -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 |
prompts/project_templates/core/project_state.json
+1
View File
@@ -18,6 +18,7 @@
"progress": {
"requirements_done": false,
"design_done": false,
"ui_design_done": false,
"tasks_done": false,
"implementation_started": false,
"tests_run": false,
prompts/project_templates/core/resume.md
+1
View File
@@ -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
prompts/project_templates/core/todo.md
+1
View File
@@ -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
prompts/project_templates/core/ui_design.md
+234
View File
@@ -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
prompts/project_templates/core/worklog.md
+2
View File
@@ -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 -->
prompts/project_templates/optional/definition_of_done.md
+9
View File
@@ -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)
prompts/project_templates/optional/handoff.md
+7
View File
@@ -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
prompts/project_templates/optional/project_scorecard.md
+1
View File
@@ -4,6 +4,7 @@
|---|---|---|
| Requirements | 0 | 100 |
| Architecture | 0 | 100 |
| UI Design | 0 | 100 |
| Implementation | 0 | 100 |
| Testing | 0 | 100 |
| Runtime | 0 | 100 |
prompts/project_templates/optional/quality_gates.md
+17 -4
View File
@@ -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
prompts/project_templates/optional/release_notes.md
+7
View File
@@ -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
prompts/project_templates/optional/subagent_policy.yaml
+3
View File
@@ -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
prompts/project_templates/optional/traceability_matrix.md
+4 -2
View File
@@ -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 -->