ui-mockup

WebView UI mockups are interactive visual prototypes for plugin interfaces. This Skill orchestrates the mockup workflow by delegating design iteration to a design agent, producing versioned YAML and HTML artifacts (v[N]-ui.yaml, v[N]-ui-test.html) that let you rapidly test layouts and refine aesthetics before committing to production code.

Start by describing your plugin UI requirements—e.g., "design a compressor with 6 controls." Phase A generates mockup artifacts for iteration and testing. Once approved, Phase B gates the transition to finalized production artifacts (v[N]-ui.html, v[N]-PluginEditor files, CMake snippets) via a decision checkpoint, eliminating manual coordination between design and implementation.

Yes. The Skill delegates design iteration to ui-design-agent and production scaffolding to ui-finalization-agent, integrating with downstream agents and state-tracking systems. It supports both workflow mode (via .continue-here.md state files) and standalone mode, fitting collaborative and independent design processes.

Phase A produces versioned design artifacts: v[N]-ui.yaml (structured design) and v[N]-ui-test.html (testable mockup). Phase B, after finalization approval, produces production artifacts: v[N]-ui.html, v[N]-PluginEditor.* files, and CMakeLists.txt snippets ready for plugin integration.

Yes. The Skill enforces Phase A for rapid iteration and refinement, then gates Phase B with a finalization decision checkpoint. This structure reduces back-and-forth by separating design exploration from production commitment, ensuring sign-off before generating integration code.

Yes. The Skill operates in standalone mode when no .continue-here.md state file exists, letting you generate one-off mockups without workflow integration. Workflow mode preserves design context across sessions for complex, multi-phase projects.