skills.rest
kvm9-dev
kvm9-devCOMMUNITY
Explore all skills by this author →
GitHub

mockup-sandbox

Render web UI mockups live via Vite-powered iframe preview routes.

2|Updated Apr 11, 2026
Search Tags:#responsive design#react components#ui mockups#live preview#design variants#vite dev server#iframe rendering
One-click install
npx skills add https://github.com/kvm9-dev/susanoo --skill mockup-sandbox-kvm9-dev
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mockup-sandbox
Source: https://github.com/kvm9-dev/susanoo/tree/main/.local/skills/mockup-sandbox
Command: npx skills add https://github.com/kvm9-dev/susanoo --skill mockup-sandbox-kvm9-dev

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The mockup-sandbox Skill solves the problem of creating realistic, accurately styled UI previews by rendering web components live so they can be embedded on the workspace canvas.

Core Features & Use Cases

  • Live iframe-rendered components: Prototype UI elements as standalone preview routes so the canvas shows the actual rendered component instead of static shapes.
  • Rapid iteration for design variants: Compare multiple layout or styling hypotheses side-by-side, including responsive (mobile/tablet/desktop) and component states (loading/error/empty).
  • Isolated prototyping environment: Runs a Vite dev server in an isolated artifacts area with a generated component registry for consistent preview routing.
  • Extraction-first workflow support: For redesigns of existing app components, follow the extract-first pattern to avoid hand-coding incorrect dimensions and spacing.

Quick Start

Activate mockup-sandbox to prototype a component by creating one or more preview components and embedding their iframe previews on the canvas using the generated /preview routes.

Frequently Asked Questions about mockup-sandbox

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I render live React components on a canvas instead of static shapes?▼

Live React components render on the canvas through an isolated Vite dev server that generates iframe-embeddable preview routes, replacing static shapes with fully styled UI mockups.

Can I compare multiple responsive design variants side-by-side?▼

Yes, responsive design variants for mobile, tablet, and desktop can be compared side-by-side by creating multiple component files and embedding their distinct iframe preview URLs on the canvas.

How do I preview React component states like loading, error, and empty?▼

Component states like loading, error, and empty are previewed by creating dedicated component files under the mockups directory and embedding their generated preview routes as iframe shapes on the canvas.

Do I need a Vite dev server to prototype UI mockups with an iframe?▼

Yes, an isolated Vite-powered sandbox dev server is required to generate the component registry and serve the iframe-embeddable preview routes for rendering UI mockups on the canvas.

What is the best way to redesign existing app components without hand-coding incorrect dimensions?▼

Use an extract-first workflow pattern to replicate existing app components accurately, avoiding hand-coding incorrect dimensions and spacing by prototyping them within the isolated Vite sandbox environment.

How does iframe rendering work for UI prototypes in a Vite dev server?▼

Iframe rendering works by serving standalone preview routes from a Vite dev server, generating a component registry that maps mockup files to URLs, and embedding those URLs as iframe shapes on the canvas.

Related Skills

Explore More Design & Creative Skills→
naopensedoit2-designnaopensedoit2-design

mockup-sandbox

Render live web UI component previews in canvas iframes via Vite.

Community
Advanced
maurodf0maurodf0

webf-quickstart

Set up and test WebF-based web apps with Vite and WebF Go.

Community
Intermediate
Kirankumar2604Kirankumar2604

mockup-sandbox

Render React components in an isolated Vite environment with hot-reloading.

Community
Advanced
mecolejrmecolejr

mockup-sandbox

Render live UI components in an isolated Vite-based sandbox on a shared board.

Community
Intermediate