skills.rest
AugustEmna
AugustEmnaCOMMUNITY
Explore all skills by this author →
GitHub

mockup-sandbox

Render UI component previews in an isolated Vite dev server sandbox.

Updated Feb 10, 2026
Search Tags:#canvas#iframe#mockup#component-preview#ui-prototyping#design-variants#frontend-sandbox
One-click install
npx skills add https://github.com/AugustEmna/FlexMatch --skill mockup-sandbox-augustemna
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mockup-sandbox
Source: https://github.com/AugustEmna/FlexMatch/tree/main/.local/skills/mockup-sandbox
Command: npx skills add https://github.com/AugustEmna/FlexMatch --skill mockup-sandbox-augustemna

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill provides an isolated frontend sandbox for rapid UI prototyping directly on the workspace canvas. It enables teams to render live components inside iframes, iterate design variants, and preview responsive states without modifying the main application.

Core Features & Use Cases

  • Isolated Vite dev server with component previews accessible via iframe routes
  • Variant exploration with DESIGN subagents for multiple design hypotheses
  • Companion workflows for extracting existing components (mockup-extract) and graduating mocks into the app (mockup-graduate)
  • Live, embeddable previews that support mobile/tablet/desktop layouts and component states (loading, success, empty)

Quick Start

Create and start the mockup sandbox workspace, then add your mockup 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 preview UI components on a canvas without modifying my main application?▼

UI component canvas previews are facilitated by an isolated Vite dev server that renders live components inside iframes. This sandbox provides a dedicated frontend prototyping environment, ensuring your main application remains completely unmodified.

What is the best way to explore multiple design variants for a single component?▼

Exploring design variants is best achieved by using DESIGN subagents within an isolated frontend sandbox. This allows you to iterate multiple design hypotheses and preview responsive states like loading, success, and empty directly on the workspace canvas.

How do I set up a frontend sandbox for rapid UI prototyping?▼

Setting up a frontend sandbox for UI prototyping requires creating the mockup sandbox workspace and adding mockup components under the artifacts/mockup-sandbox/src/components/mockups/ directory. The sandbox uses a Vite dev server to serve the iframe previews.

Can I preview different responsive layouts for my UI components?▼

Yes, you can preview different responsive layouts for UI components. The live, embeddable iframe previews support mobile, tablet, and desktop layouts, allowing you to test various component states across different screen sizes.

How do I extract existing components into a UI prototyping sandbox?▼

Extracting existing components into the UI prototyping sandbox is done using the companion workflow mockup-extract. This allows you to pull existing UI elements into the isolated Vite dev server environment for further iteration.

How do I integrate mockups back into my main application after prototyping?▼

Integrating mockups back into your main application after prototyping is done using the mockup-graduate companion workflow. This process graduates the iterated UI components from the isolated frontend sandbox directly into your production codebase.

Related Skills

Explore More Design & Creative Skills→
Exocore-OrganizationExocore-Organization
5

mockup-sandbox

Run a Vite dev server to preview UI components in isolated iframes.

Official
Advanced
marcusgollmarcusgoll
91

mockup-extraction

Extract reusable UI components from approved HTML mockups and map CSS to Tailwind utilities.

Community
Advanced
hajrasarwar11hajrasarwar11

mockup-sandbox

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

Community
Advanced
offers-pngoffers-png

mockup-sandbox

Render live UI components in an isolated Vite-based frontend sandbox.

Community
Advanced