skills.rest
hajrasarwar11
hajrasarwar11COMMUNITY
Explore all skills by this author →
GitHub

mockup-sandbox

Render web UI components on a canvas via a Vite dev server.

Updated Mar 19, 2026
Search Tags:#vite#sandbox#design-exploration#iframe#mockup#component-preview#ui-prototyping
One-click install
npx skills add https://github.com/hajrasarwar11/DataBase-Engine-with-AI --skill mockup-sandbox-hajrasarwar11
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mockup-sandbox
Source: https://github.com/hajrasarwar11/DataBase-Engine-with-AI/tree/main/.local/skills/mockup-sandbox
Command: npx skills add https://github.com/hajrasarwar11/DataBase-Engine-with-AI --skill mockup-sandbox-hajrasarwar11

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Use when the user wants to create, preview, or iterate on any web UI content on the canvas. This is the only way to show live rendered components on the board — all other canvas shapes are static. Activate for: designing or prototyping components on the canvas, comparing design variants side-by-side, showing responsive previews (mobile/tablet/desktop), previewing component states (loading/error/empty), comparing dark vs light mode, or any request that involves putting rendered web content on the board. Sets up a vite dev server with isolated component preview URLs for iframe embedding. For variant exploration (2+ design alternatives), includes subagent orchestration patterns for parallelizing work with DESIGN subagents. Never embed the main app URL directly — always use this skill. Read the entire skill carefully — it contains critical path conventions, image handling rules, and subagent delegation patterns that cause silent failures when skipped. For two specific workflows, also activate the companion skill: use mockup-extract when the user wants to pull an existing component from the main app onto the canvas, and mockup-graduate when the user approves a mockup and wants it integrated into the main app.

Core Features & Use Cases

  • Isolated frontend sandbox for rapid UI prototyping
  • Live component previews via iframe embedding
  • Variant exploration with subagent orchestration patterns
  • Companion workflows: mockup-extract and mockup-graduate

Quick Start

Start the mockup sandbox and ensure the dev server is running, then create components under artifacts/mockup-sandbox/src/components/mockups/ and embed their previews on the canvas as iframes.

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 UI components on a design canvas for prototyping?▼

To render live UI components on a design canvas, you need a mockup sandbox that sets up a Vite dev server to provide isolated component preview URLs embedded as iframes. This allows you to dynamically display and iterate on web UI content directly on the board.

What is the best way to compare multiple UI design variants side-by-side?▼

Comparing UI design variants side-by-side is best handled by using parallel design exploration with subagent orchestration. This pattern allows multiple DESIGN subagents to generate and present alternative component previews simultaneously for immediate visual comparison.

Can I preview responsive component states for mobile and desktop using Vite?▼

Yes, you can preview responsive component states across mobile, tablet, and desktop using an isolated Vite development environment. It renders live iframe previews of your components, allowing you to evaluate different device sizes, loading states, and dark or light modes.

How do I integrate an approved UI mockup back into my main application?▼

To integrate an approved UI mockup into your main application, you use a companion workflow designed to graduate sandbox prototypes. This process transitions the isolated component preview from the mockup sandbox into your live app codebase for final integration.

Why do my static canvas shapes fail to show live rendered web content?▼

Static canvas shapes fail to show live rendered web content because standard board elements do not support dynamic execution. You must use a dedicated mockup sandbox with iframe embedding to display live, interactive UI components on the canvas.

Related Skills

Explore More Design & Creative Skills→
peterWang123589peterWang123589

vite

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

Community
Advanced
hajrasarwar11hajrasarwar11

mockup-graduate

Graduate approved mockups into the main application with routing and state wiring.

Community
Advanced
Pranil9699Pranil9699

mockup-sandbox

Automate UI mockup creation and live rendering on a Vite-based sandbox canvas.

Community
Intermediate
naopensedoit2-designnaopensedoit2-design

mockup-sandbox

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

Community
Advanced