// Orchestrator for WebView UI mockup workflow - delegates design iteration to ui-design-agent and implementation scaffolding to ui-finalization-agent. Use when user mentions UI design, mockup, WebView interface, or requests 'design UI for [plugin]'.
| name | ui-mockup |
| description | Orchestrator for WebView UI mockup workflow - delegates design iteration to ui-design-agent and implementation scaffolding to ui-finalization-agent. Use when user mentions UI design, mockup, WebView interface, or requests 'design UI for [plugin]'. |
| allowed-tools | ["Read","Task","AskUserQuestion"] |
| preconditions | ["None (can work standalone or with creative brief)"] |
<quick_start>
<context_detection> <standalone_mode>
.continue-here.md file present<workflow_mode>
plugins/[PluginName]/.continue-here.md exists with current_stage fieldCheck for .continue-here.md existence to determine mode. If present, update state files. If absent, skip state updates.
</context_detection>
How would you like to start the UI design?
Choose (1-3): _
- Option 1: Display aesthetics from manifest with metadata (name, vibe, colors, source). Invoke ui-template-library skill with "apply" operation. Skip to Phase 4 with generated mockup. - Option 2: Continue to Phase 1 (load context). - Option 3: Invoke ui-template-library skill with "list" operation, show previews, return to menu. - No aesthetics: Skip directly to Phase 1.See references/aesthetic-integration.md for complete integration details.
Include in invocation prompt:
See references/phase-details.md for invocation summary.
See references/delegation-protocols.md for complete protocol.
Files generated:
What would you like to do?
Choose (1-4): _
- Option 1 (Iterate): Collect refinement feedback, return to Phase 2 with new version (v2, v3, etc.), invoke NEW ui-design-agent instance (fresh context). - Option 2 (Finalize): Proceed to Phase 5.6 (automatic brief update), mockup is source of truth for UI sections, no user interaction needed, continue to Phase 6-10 after brief sync. - Option 3 (Save as template): Invoke ui-template-library skill with "save" operation, after saving return to Phase 5.5 menu. - Option 4 (Other): Handle custom request (test in browser, validate constraints, etc.).<iteration_guidance> When collecting feedback for Option 1 (Iterate):
If user provides specific changes ("make it vertical", "add a meter", "change colors to blue"):
If user provides vague improvement requests ("make it better", "improve it", "polish it"):
See references/decision-menus.md#phase-5-5-design-decision-menu for detailed routing.
See references/phase-b-enforcement.md for guard implementation.
<orchestration_protocol> <delegation_rules> This skill NEVER generates mockup files directly. ALL file generation delegated to subagents.
1. Orchestrator: Gather requirements (Phases 0-3.5) 2. Orchestrator: Invoke ui-design-agent via Task tool 3. ui-design-agent: Generate YAML + test HTML, commit, return JSON 4. Orchestrator: Parse JSON, present Phase 5.5 menu 5. If iterate: Orchestrator invokes NEW ui-design-agent 6. If finalize: Orchestrator updates brief (Phase 5.6) 7. Orchestrator: Invoke ui-finalization-agent via Task tool 8. ui-finalization-agent: Generate 5 files, commit, return JSON 9. Orchestrator: Parse JSON, present completion menuSee references/delegation-protocols.md for enforcement details.
</delegation_rules>
<state_management>
Subagents update .continue-here.md with their phase results. Orchestrator verifies stateUpdated flag in JSON report.
After subagent returns stateUpdated: true, verify actual state contents match expected values (not just boolean flag).
Read .continue-here.md, parse YAML, check specific fields match JSON report values. If mismatch, present state recovery menu.
See references/state-tracking.md for complete state schema and verification protocol.
</state_management>
<iteration_protocol> Each iteration runs in fresh agent context. User chooses "Iterate" then orchestrator collects feedback and invokes NEW ui-design-agent with incremented version. Fresh context prevents context window bloat during iterative design. </iteration_protocol>
<error_handling>
validationPassed: false - present error menu.stateUpdated: false - present state recovery menu (verify/manual update/continue anyway).
</error_handling>
</orchestration_protocol><versioning_strategy> Pattern: v1, v2, v3... Each version saved separately.
Purpose: Explore layouts without losing work, A/B test designs, keep history for rollback.
File naming: All 7 files prefixed with version (e.g., v2-ui.html, v2-PluginEditor.h).
Implementation: Latest version used for Stage 3 (GUI) unless user specifies different version.
See references/versioning.md for file management details.
</versioning_strategy>
<success_criteria> <design_phase>
.continue-here.md updated with version (if workflow mode)<implementation_phase>
.ideas/mockups/.continue-here.md updated with finalization status (if workflow mode)
</implementation_phase>
</success_criteria><integration_points> <invoked_by>
/dream command - After creative brief, before implementationplugin-workflow skill - During Stage 0 (UI design phase)plugin-improve skill - When redesigning existing plugin UI<always_invokes>
ui-design-agent subagent (Phase 4-5.45) - REQUIRED for design iterationui-finalization-agent subagent (Phase 6-10.5) - REQUIRED for implementation files
</always_invokes><also_invokes>
ui-template-library skill (if user saves aesthetic)
</also_invokes><reference_documentation> Progressive disclosure - load references when reaching specific phases:
references/aesthetic-integration.md - Aesthetic library integrationreferences/context-extraction.md - Creative brief extractionreferences/design-questions.md - Question templates and tieringreferences/layout-validation.md - Dimension calculation formulasreferences/delegation-protocols.md - Subagent invocationreferences/decision-menus.md - Menu format and routingreferences/state-tracking.md - Brief sync protocolreferences/phase-b-enforcement.md - Phase B guardreferences/common-pitfalls.md - What to avoidTechnical details:
references/html-generation.md - Production HTML rulesreferences/browser-testing.md - Browser test workflowreferences/cmake-configuration.md - WebView build settingsreferences/cpp-boilerplate-generation.md - C++ template generationreferences/ui-design-rules.md - Design constraints and patternsreferences/versioning.md - File management
</reference_documentation><template_assets>
assets/ui-yaml-template.yaml - YAML structureassets/webview-boilerplate.md - C++ integration templatesassets/integration-checklist-template.md - Integration guideassets/parameter-spec-template.md - Parameter specification format
</template_assets>Multi-agent parallel investigation for complex JUCE problems. Use when troubleshooting fails after Level 3, problems require novel research, or user requests /research command.
Orchestrates Stage 0 research and planning for JUCE plugins - creates architecture.md and plan.md contracts through subagent delegation. Use when creative brief exists and plugin needs DSP architecture specification, complexity assessment, or implementation planning. Invoke via /plan command, natural language (plan architecture, research DSP), or as first implementation step.
Fix bugs, add features to completed plugins. Includes versioning, backups, regression testing, changelog automation. Auto-detects deep-research handoffs to preserve investigation context. Trigger terms - improve, fix, add feature, modify plugin, version bump, rollback
Load plugin context from handoff files to resume work. Invoked by /continue command, 'resume [PluginName]', 'continue working on [PluginName]', 'pick up where I left off with [PluginName]', or 'show me where [PluginName] is at'. Locates handoff across 2 locations, parses state, presents summary, and routes to appropriate continuation skill.
Manage complete plugin lifecycle - install, uninstall, reset, destroy. Use when user runs /install-plugin, /uninstall, /reset-to-ideation, /destroy, /clean commands, or says 'install [Name]', 'remove [Name]', 'uninstall [Name]', 'delete [Name]'.
Validates audio plugins through automated tests, pluginval, or manual DAW testing. Use for MANUAL testing via /test command. Note - Automatic validation now built into workflow (validation-agent runs after each stage). This skill is for manual testing only, after bug fixes, or when user mentions test, validate, validation, pluginval, stability, automated tests, run tests, check plugin, or quality assurance.