skills.rest
Soufianouassif
SoufianouassifCOMMUNITY
Explore all skills by this author →
GitHub

mockup-sandbox

Render live UI components in an isolated Vite iframe sandbox.

Updated Apr 6, 2026
Search Tags:#canvas#vite#design-exploration#iframe#mockup#component-preview#ui prototyping
One-click install
npx skills add https://github.com/Soufianouassif/Web3-Presale-Platform --skill mockup-sandbox-soufianouassif
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mockup-sandbox
Source: https://github.com/Soufianouassif/Web3-Presale-Platform/tree/main/.local/skills/mockup-sandbox
Command: npx skills add https://github.com/Soufianouassif/Web3-Presale-Platform --skill mockup-sandbox-soufianouassif

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Isolated frontend sandbox for rapid UI prototyping, enabling designers and developers to render live components on a canvas for easy iteration, side-by-side variant comparison, and responsive previews without embedding the main app URL.

Core Features & Use Cases

  • Isolated Vite dev server with per-component preview URLs served via iframes (e.g., /__mockup/preview/{folder}/{ComponentName})
  • Support for design exploration, multiple design variants, and state previews (loading, empty, error) across different viewports (mobile/tablet/desktop)
  • Companion workflows to extract existing components from the main app (mockup-extract) and graduate mocks back into the app (mockup-graduate), plus optional resources in scripts/references/assets

Quick Start

Start the mockup sandbox server, then create a component under artifacts/mockup-sandbox/src/components/mockups/ and embed it on the canvas as an iframe preview.

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 in isolation without embedding the main app URL?▼

To preview UI components in isolation, you can use an isolated frontend sandbox that serves per-component preview URLs via iframes. This approach renders live components on a canvas, allowing rapid iteration without touching the main application.

How do I test component design variants across different viewports like mobile and desktop?▼

You can test component design variants across viewports by using a UI prototyping sandbox that supports multi-variant previews and responsive testing. It renders multiple states side-by-side across mobile, tablet, and desktop views.

Can I use a Vite dev server to render live component mockups on a canvas?▼

Yes, you can use a Vite dev server to render live component mockups on a canvas. The sandbox environment serves component previews via dedicated iframe routes, enabling fast hot-module-reloading during design exploration.

What is the best way to visualize different component states such as loading, empty, and error?▼

The best way to visualize different component states is using an isolated mockup sandbox that supports state previews. It allows you to render loading, empty, and error conditions side-by-side on a single canvas.

How do I graduate UI mockups from a sandbox back into my main application?▼

To graduate UI mockups back into your main application, you can use companion workflows designed to extract existing components and graduate mocks. This integration manages the transition from isolated preview to real app components.

Related Skills

Explore More Design & Creative Skills→
AugustEmnaAugustEmna

mockup-sandbox

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

Community
Advanced
gopforevergopforever

mockup-graduate

Graduate approved mockups into production components with routing and app state.

Community
Advanced
guanqun-yangguanqun-yang

Agent Skills & Context

Load and integrate SKILL.md-defined agent skills to enrich task context.

Community
Intermediate
koya-altkoya-alt

mockup-sandbox

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

Community
Advanced