skills.rest
mecolejr
mecolejrCOMMUNITY
Explore all skills by this author →
GitHub

mockup-sandbox

Render live UI components in an isolated Vite-based sandbox on a shared board.

Updated Mar 19, 2026
Search Tags:#frontend#prototyping#vite#sandbox#iframe#mockup#design-iteration
One-click install
npx skills add https://github.com/mecolejr/EVL-mOC5 --skill mockup-sandbox-mecolejr
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mockup-sandbox
Source: https://github.com/mecolejr/EVL-mOC5/tree/main/.local/skills/mockup-sandbox
Command: npx skills add https://github.com/mecolejr/EVL-mOC5 --skill mockup-sandbox-mecolejr

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill provides a self-contained frontend sandbox to rapidly prototype and render live UI components on a shared board, enabling designers and developers to experiment with layouts, interactions, and component states without touching the main app.

Core Features & Use Cases

  • Isolated Vite-based sandbox in artifacts/mockup-sandbox that serves live previews at /__mockup/preview/{folder}/{ComponentName} via iframe embedding.
  • Automatic discovery and hot-reload of mockup components, with a built-in preview server and tailwind/shadcn/ui integration for realistic visuals.
  • Supports multi-viewport and variant exploration workflows, component extraction and iteration, and organized asset/reference management for mockups.

Quick Start

Create the mockup sandbox entry using the artifact creation workflow, then start its preview server and begin adding mockups 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 live UI components without affecting my main application?▼

To prototype live UI components in isolation, you can use a Vite-based sandbox that renders previews via iframe embedding. This approach allows you to design and iterate on layouts and component states on a shared board without touching the main app.

How do I set up a Vite sandbox to preview mockup components?▼

You set up a mockup sandbox by creating an artifact entry for artifacts/mockup-sandbox, starting its preview server, and adding component files under src/components/mockups/. The server automatically discovers and hot-reloads these mockup components for live viewing.

Can I use tailwind and shadcn/ui for realistic visuals in a mockup sandbox?▼

Yes, the mockup sandbox includes built-in tailwind and shadcn/ui integration to ensure realistic visuals. This allows you to render live previews of dashboards and UI components with accurate styling directly on the canvas.

Does the sandbox support multi-viewport and variant exploration for UI mockups?▼

Yes, the sandbox supports multi-viewport and variant exploration workflows. You can preview responsiveness and compare different component variants directly on the shared board using the isolated preview server.

How are live component previews served and embedded on the board?▼

Live component previews are served at /__mockup/preview/{folder}/{ComponentName} and embedded onto the shared board using iframes. This isolates the rendering while allowing rapid design iteration directly on the canvas.

Related Skills

Explore More Design & Creative Skills→
justinlevinedotmejustinlevinedotme
7

vite-shadcn-tailwind4

Initialize shadcn/ui with Tailwind v4 in Vite projects.

Community
Advanced
BasitShafiqBasitShafiq

mockup-graduate

Transform approved mockup components into production code and verify integration.

Community
Advanced
tenequmtenequm
32

styling-with-tailwind

Apply Tailwind CSS utility classes and shadcn/ui patterns to style React interfaces.

Community
Intermediate
leessjuleessju

sp-visual-brainstorm

Render live HTML mockups in a browser for visual UI layout brainstorming.

Community
Intermediate