skills.rest
ma-wais
ma-waisCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

mockup-sandbox

Provision an isolated Vite dev server sandbox for iframe-embedded UI component previews.

Updated Mar 24, 2026
Search Tags:#ui#canvas#vite#prototype#sandbox#iframe#mockup
One-click install
npx skills add https://github.com/ma-wais/Quality-Management-System --skill mockup-sandbox-ma-wais
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mockup-sandbox
Source: https://github.com/ma-wais/Quality-Management-System/tree/main/.local/skills/mockup-sandbox
Command: npx skills add https://github.com/ma-wais/Quality-Management-System --skill mockup-sandbox-ma-wais

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Isolated frontend prototyping environments are often intrusive and risky to the main app. This Skill provides a dedicated mockup sandbox to render UI components on the canvas via a Vite dev server with iframe-embeddable routes, enabling live previews without affecting the main application. It also documents conventions for subagent workflows, companion skills, and safe embedding to prevent silent failures when skipped.

Core Features & Use Cases

  • Isolated sandbox located at artifacts/mockup-sandbox that runs a Vite dev server and exposes preview URLs for each component.
  • Each component is served at /__mockup/preview/{folder}/{ComponentName} and can be embedded as an iframe on the workspace canvas.
  • Supports variant exploration and subagent orchestration patterns for parallel design work, including companion skills mockup-extract and mockup-graduate.

Quick Start

Start the mockup sandbox by launching its preview server and begin adding components under artifacts/mockup-sandbox/src/components/mockups/.

Frequently Asked Questions about mockup-sandbox

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

FAQPage Schema
How do I prototype UI components in isolation without affecting my main application?▼

A mockup sandbox provides an isolated Vite dev server environment to render UI components via iframe-embeddable routes, ensuring safe prototyping without affecting your main application. It uses frontmatter-driven entry points to maintain predictable previews.

How do I set up a live preview environment for canvas prototyping using Vite?▼

Start the Vite dev server in the mockup sandbox located at artifacts/mockup-sandbox, then add components under src/components/mockups/. Each component is served at /__mockup/preview/ and can be embedded as an iframe on the canvas.

Can I preview UI components across different breakpoints on the canvas?▼

Yes, the mockup sandbox supports live previews across multiple breakpoints by embedding component preview URLs as iframes on the canvas. This allows you to test responsive UI variants directly during the prototyping phase.

Why do iframe embeds fail silently when previewing UI components in a sandbox?▼

Iframe embeds fail silently when frontmatter-driven entry points are missing or safe embedding practices are skipped. The sandbox enforces these conventions to ensure predictable previews and prevent silent propagation failures during component rendering.

What is the best way to sync prototyped UI components back into a main app?▼

Use companion workflows like mockup-graduate to sync prototyped UI components from the isolated Vite sandbox back into the main app. This ensures safe extraction and integration of the design variants explored during the sandbox phase.

Does the mockup sandbox support subagent orchestration for parallel design work?▼

Yes, the mockup sandbox supports subagent orchestration patterns for parallel design work. It integrates with companion skills like mockup-extract and mockup-graduate to manage design-agent delegation and variant exploration effectively.

Related Skills

Explore More Design & Creative Skills→
yoyooyoooyoyooyooo
4

frontend-project-init

Generate a runnable Vite frontend project from a Logix Sandbox template.

Community
Intermediate
samibrahmisamibrahmi

mockup-graduate

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

Community
Advanced
peterWang123589peterWang123589

vite

Configure Vite for dev servers, production builds, and HMR workflows.

Community
Advanced
naopensedoit2-designnaopensedoit2-design

mockup-sandbox

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

Community
Advanced