mockup-sandbox

To prototype UI live on a canvas, this skill runs an isolated Vite dev server and renders component previews via iframe routes. It provides a secure frontend sandbox for rapid design iteration without wiring changes into the main application.

Yes, you can test responsive states and multi-page flows in the Vite sandbox. It supports iterating on UI variants, comparing component states, and prototyping multi-page flows when explicitly requested during your design exploration.

You can compare multiple UI variants by using subagent orchestration patterns for parallel design exploration. This allows you to generate and evaluate isolated component previews concurrently on the workspace canvas.

No, you do not need to wire mockups into the main app to test component states. The skill provides an isolated frontend sandbox that securely references internal previews, keeping prototyping separate from production code.

To extract existing components for UI prototyping, this skill supports companion skills like mockup-extract. This allows you to pull existing components into the isolated sandbox for rapid iteration and design exploration.

To graduate mockups into the main application, this skill supports the companion skill mockup-graduate. This downstream step transitions approved component prototypes from the isolated Vite sandbox into your production codebase.