Mockup Sandbox Skill

The artifacts/mockup-sandbox/ folder is an isolated frontend sandbox for rapid UI prototyping. Components are rendered in isolation via a vite dev server, and each component gets a /preview/ComponentName route that can be embedded as an iframe shape on the workspace canvas.

When to Use

Activate this skill when the user wants to:

• Show any web UI component on the canvas ("create a card on the canvas", "put a form on the board")
• Prototype or mockup a design ("design a landing page", "mockup a dashboard")
• Compare design variants side-by-side ("show me 3 options for the hero section")
• Preview responsive behavior ("how does this look on mobile?", "show me mobile and desktop")
• Preview component states ("show me loading, error, and empty states")
• Compare themes ("dark mode vs light mode", "what about a warmer color scheme?")
• Show a multi-page flow, only when the user explicitly requests multiple pages ("preview the signup flow: landing → signup → dashboard")
• Iterate on an existing component's design on the canvas (also activates mockup-extract)

Rule of thumb: if the result should be rendered HTML/CSS/React on the canvas, use this skill. If it's just shapes, text, or diagrams, the canvas skill handles it directly.

Extract First, Then Iterate