skills.rest
shahmirerror
shahmirerrorCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

mockup-sandbox

Launch a Vite-based mockup sandbox to prototype UI components on a canvas.

Updated Mar 17, 2026
Search Tags:#ui#canvas#prototype#sandbox#design-exploration#iframe#mockup
One-click install
npx skills add https://github.com/shahmirerror/gsdcp-mobile --skill mockup-sandbox-shahmirerror
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mockup-sandbox
Source: https://github.com/shahmirerror/gsdcp-mobile/tree/main/.local/skills/mockup-sandbox
Command: npx skills add https://github.com/shahmirerror/gsdcp-mobile --skill mockup-sandbox-shahmirerror

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill provides an isolated, end-to-end frontend sandbox to rapidly prototype, preview, and iterate UI components on a canvas without affecting the main application. It enables live rendering via a Vite dev server, isolated routes for component previews, and a structured workflow that supports extraction, variant creation, and canvas embedding.

Core Features & Use Cases

  • Isolated sandbox located at artifacts/mockup-sandbox for rapid UI prototyping with live previews accessible via /__mockup/preview/{folder}/{ComponentName}.
  • Clear workflow: extract existing components with mockup-extract before redesigns; create variations and embed as iframes on the workspace; supports multi-viewport previews and state variants (loading, error, empty).
  • Full setup and resources: a dedicated Vite project with mockupPreviewPlugin, generated component registry, and shadcn/ui components; provides assets/scripts/references as needed.

Quick Start

Start the mockup sandbox workflow, create a mockup component under artifacts/mockup-sandbox/src/components/mockups, then embed it on the canvas using the iframe preview URL.

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 on a canvas without affecting my main application?▼

You can prototype UI components on a canvas by using an isolated mockup sandbox that runs a Vite dev server, keeping live previews separate from your main application.

What is the best way to preview web UI variants in different states like loading or error?▼

The best way to preview web UI variants is by using a mockup sandbox that supports multi-viewport previews and state variants like loading, error, and empty within isolated iframe routes.

How do I extract existing components before a UI redesign?▼

To extract existing components before a redesign, use the mockup-extract workflow provided by the sandbox to isolate and prepare components for modification.

Do I need a Vite environment to use a mockup sandbox for design exploration?▼

Yes, you need a dedicated Vite project environment configured with mockupPreviewPlugin to generate the component registry and render live iframe previews for mockup design exploration.

How do I embed a live mockup preview into my workspace canvas?▼

To embed a live mockup preview into your workspace canvas, create your component under the designated mockups folder and embed it using the iframe preview URL.

How do I graduate a finished UI mockup from the sandbox into my main codebase?▼

You graduate a finished UI mockup into your main codebase by utilizing the mockup-graduate workflow, which transitions the isolated prototype out of the sandbox environment.

Related Skills

Explore More Design & Creative Skills→
koya-altkoya-alt

mockup-sandbox

Render live web UI components in iframes via an isolated Vite dev server.

Community
Advanced
hajrasarwar11hajrasarwar11

mockup-graduate

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

Community
Advanced
ouzayrouzayr

mockup-sandbox

Create and preview web UI components on a canvas via Vite dev server.

Community
Advanced
DNYoussefDNYoussef
4

sandbox-configurator

Configure Claude Code sandbox isolation with JSON templates and Docker controls.

Community
Intermediate