skills.rest
Amna-exe
Amna-exeCOMMUNITY
Explore all skills by this author →
GitHub

mockup-sandbox

Creates and previews React UI mockups on a canvas via an isolated Vite dev server.

Updated May 17, 2026
Search Tags:#react#prototyping#canvas#vite#ui mockup#design variants#iframe preview
One-click install
npx skills add https://github.com/Amna-exe/EventFlow_App --skill mockup-sandbox-amna-exe
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mockup-sandbox
Source: https://github.com/Amna-exe/EventFlow_App/tree/main/Final-MAD-project-main-4zipzipzipzipzip-1-ite1zipzip/.local/skills/mockup-sandbox
Command: npx skills add https://github.com/Amna-exe/EventFlow_App --skill mockup-sandbox-amna-exe

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Designing and iterating on web UI components requires a way to render live HTML/CSS/React on a canvas board, but static canvas shapes cannot show real rendered components. This Skill sets up an isolated Vite sandbox where each component gets a preview URL that can be embedded as a live iframe on the workspace canvas. ## Core Features & Use Cases - Isolated Component Previews: Runs a Vite dev server in artifacts/mockup-sandbox/ that auto-discovers components and serves each at a /preview/{folder}/{ComponentName} route for iframe embedding. - Design Variant Exploration: Orchestrates DESIGN subagents in parallel to build multiple design alternatives (e.g., minimal vs. bold pricing cards) and lays them out side-by-side on the canvas. - Responsive, State, and Theme Previews: Supports multi-viewport layouts (mobile/tablet/desktop), loading/error/empty states, and dark vs. light mode comparisons using Tailwind and pre-installed shadcn/ui components. - Use Case: A user asks to see three options for a hero section. The Skill places building-state iframes on the canvas, fans out DESIGN subagents to create each variant, then aligns the iframes and presents the result. ## Quick Start Ask the assistant to create a mockup of a pricing card with three design variants and show them side-by-side on the canvas.

Frequently Asked Questions about mockup-sandbox

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

FAQPage Schema
How do I preview a React component on a canvas board?▼

Create the component in artifacts/mockup-sandbox/src/components/mockups/, start the Vite dev server, and embed an iframe shape pointing to the /preview/{folder}/{ComponentName} URL. The component hot-reloads as you edit it.

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

Create one component file per variant in a shared folder, place one iframe per variant in a horizontal row, and use align plus distribute actions for clean layout. For two or more variants, DESIGN subagents can build them in parallel.

Can I use shadcn/ui and Tailwind in mockup components?▼

Yes, over 50 shadcn/ui components are pre-installed and Tailwind v4 is configured in the sandbox. Import components from @/components/ui/ and use Tailwind classes directly; lucide-react icons are also available.

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 retries. Check system logs for iframe errors and restart the preview workflow if problems persist.

How do I add images to a mockup component?▼

Place images in artifacts/mockup-sandbox/public/images/ and reference them by URL like /__mockup/images/hero.png, or import files from src/assets/ via the @ alias. Do not mix the two approaches for the same image, since src files are not served as static assets.

When should I not use the mockup sandbox?▼

Do not use it for static canvas content like shapes, text, or diagrams, which the canvas handles directly. It is also not meant for deployment; graduate approved mockups into the real app instead of deploying the sandbox.

Related Skills

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

mockup-extract

Extract existing UI components into a mockup sandbox as iframes.

Community
Advanced
samibrahmisamibrahmi

mockup-graduate

Convert approved mockups into production components with routing and dependency updates.

Community
Advanced
ChegginCheggin
1

asset-generation

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

Community
Intermediate
balintbrewsbalintbrews
14

canvas-component-utils

Render HTML content and images with React Canvas component utilities.

Community
Intermediate