skills.rest
AmirEmad11
AmirEmad11COMMUNITY
Explore all skills by this author →
GitHub

mockup-sandbox

Renders isolated React components in a Vite dev server for live canvas iframe previews.

Updated Apr 20, 2026
Search Tags:#react#vite#shadcn#iframe#design variants#ui prototyping#canvas preview
One-click install
npx skills add https://github.com/AmirEmad11/instabot --skill mockup-sandbox-amiremad11
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mockup-sandbox
Source: https://github.com/AmirEmad11/instabot/tree/main/.local/skills/mockup-sandbox
Command: npx skills add https://github.com/AmirEmad11/instabot --skill mockup-sandbox-amiremad11

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Static canvas shapes cannot show live rendered web UI, making it impossible to prototype, preview, or compare real HTML/CSS/React components on the board. This Skill runs an isolated Vite dev server that serves each component at its own preview URL for iframe embedding. ## Core Features & Use Cases - Live Component Previews: Each component in the mockups folder gets a /preview/{folder}/{ComponentName} route rendered by a Vite dev server with hot reload, Tailwind, and 50+ pre-installed shadcn/ui components. - Design Variant Comparison: Fan out DESIGN subagents to build multiple design hypotheses in parallel and place them side-by-side on the canvas with building/live iframe states. - Responsive and State Previews: Show the same component at mobile, tablet, and desktop viewport sizes, or in loading, error, and empty states. - Use Case: A user asks for three pricing card options. The skill starts the preview server, places three building-state iframes on the canvas, delegates each variant to a DESIGN subagent, then marks each iframe live and presents the shapes. ## Quick Start Ask the agent to create a pricing card mockup and show it on the canvas as a live preview.

Frequently Asked Questions about mockup-sandbox

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

FAQPage Schema
How do I show a live React component on the canvas?▼

Start the mockup-sandbox dev server workflow, create the component under artifacts/mockup-sandbox/src/components/mockups/, then create an iframe shape pointing at the /__mockup/preview/{folder}/{ComponentName} URL. Finish by calling presentArtifact with the shape IDs.

How do I compare multiple design variants side by side?▼

Place one building-state iframe per variant in a horizontal row, then fan out DESIGN subagents with a design brief and a distinct hypothesis per variant. Each subagent builds its own component file and marks its iframe live when done.

Why does my mockup iframe show a 404 or error overlay?▼

A 404 usually means the dev server has not picked up the new component file yet; the Vite plugin rescans automatically and the iframe retry recovers. Check system logs, verify the file path and exported function name match, and restart the workflow if errors persist.

Should I use public folder images or imported assets in mockups?▼

Prefer the public folder: place images in artifacts/mockup-sandbox/public/images/ and reference them as /__mockup/images/name.png. Files in src/assets/ must be imported via the @ alias and will 404 if referenced by URL path.

When should I not use the mockup sandbox?▼

Do not use it for static shapes, text, or diagrams, which the canvas handles directly, and never deploy or share its dev URLs since it is a local prototyping tool. To ship a mockup, graduate it into the main app first.

Related Skills

Explore More Design & Creative Skills→
ma-waisma-wais

mockup-extract

Extract existing UI components into a mockup sandbox as iframes.

Community
Advanced
AugustEmnaAugustEmna

mockup-graduate

Graduate approved mockups into production code with routing and dependencies.

Community
Advanced
ChegginCheggin
1

asset-generation

Generate hero images and illustrations for SaaS marketing pages with Fal.ai Flux 2 Pro.

Community
Intermediate
GainInsightDevGainInsightDev

af-present-canvas

Presents visual content on the Agentview canvas via markdown, diagrams, and HTML.

Official
Intermediate