ui-mockup

The ui-mockup skill serves as the primary orchestrator for the Plugin Freedom System's visual interface layer. It streamlines the transition from creative concepts to functional WebView interfaces for VST3 and AU audio plugins. Designed for both sound designers and developers, this agent facilitates a structured, iterative workflow that replaces traditional, high-friction GUI frameworks with modern web technologies like HTML, CSS, and JavaScript. By delegating complex UI tasks to specialized subagents, it ensures that generated mockups meet high-end commercial aesthetic standards while maintaining technical compatibility with the JUCE framework.

• Iterative Design Workflow: Supports rapid creation of visual mockups through tiered requirement gathering and automated refinement cycles.

• Automated Scaffolding: Generates production-ready files, including UI HTML, C++ header and source boilerplates for PluginEditor, and CMake build configurations.

• Aesthetic Integration: Leverages an integrated library of visual systems (colors, spacing, and styling) to ensure consistent design language across multiple plugin projects.

• Context-Aware Operation: Detects current project state, allowing for seamless integration into existing development workflows through .continue-here.md tracking.

• Decision Gating: Implements strict control checkpoints where users can approve designs, request iterations, or finalize implementations, ensuring total project oversight.

• Use this tool whenever a user requests a new interface, UI design, or modifications to an existing WebView mockup.

• Inputs include creative briefs, specific control requirements, layout preferences, and aesthetic constraints.

• Outputs consist of machine-readable YAML design specifications, testable HTML prototypes, and full C++ implementation scaffolding.

• Adheres to standard UI/UX patterns for audio plugins, focusing on parameter mapping, responsiveness, and professional visual quality.

• Before initializing, verify the presence of an aesthetic library to streamline the design process and maintain visual consistency across the plugin suite.