skills.rest
KhaledMKhaled
KhaledMKhaledCOMMUNITY
Explore all skills by this author →
GitHub

mockup-sandbox

Renders web UI mockup components live on canvas via isolated preview routes and iframes.

Updated Dec 10, 2025
Search Tags:#responsive design#vite#react components#design variants#ui preview#canvas prototyping#iframe embedding
One-click install
npx skills add https://github.com/KhaledMKhaled/FodaStore --skill mockup-sandbox-khaledmkhaled
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mockup-sandbox
Source: https://github.com/KhaledMKhaled/FodaStore/tree/main/.local/skills/mockup-sandbox
Command: npx skills add https://github.com/KhaledMKhaled/FodaStore --skill mockup-sandbox-khaledmkhaled

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It solves the problem of building and comparing real, live-rendered UI components on the workspace canvas without guessing styles, sizing, or responsive behavior.

Core Features & Use Cases

  • Live component previews via iframe routes: Renders mockup components in an isolated Vite sandbox and serves them at stable preview URLs for canvas embedding.
  • Responsive and state exploration: Supports previewing mobile/tablet/desktop layouts and component states like loading, error, and empty.
  • Variant generation with delegation patterns: Enables side-by-side design alternatives and coordinates subagent orchestration for parallel variant creation.
  • Extract-first workflow for existing components: Guides users to extract existing code before redesigning to preserve exact dimensions and visual tokens.

Quick Start

Start the mockup sandbox preview server, create your mockup component under artifacts/mockup-sandbox/src/components/mockups/, embed it as an iframe on the canvas using the /__mockup/preview route, and then present the artifact with the created iframe shape IDs.

Frequently Asked Questions about mockup-sandbox

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I preview React components live on a canvas for UI prototyping?▼

To preview React components live on a canvas, this Skill renders mockup components in an isolated Vite sandbox and serves them at stable preview URLs for iframe embedding. It leverages a root SKILL.md-defined preview server workflow to display rendered HTML and CSS directly on the board.

Can I compare multiple design variants side-by-side during canvas prototyping?▼

Yes, you can compare multiple design variants side-by-side during canvas prototyping. This Skill enables multi-variant exploration using delegation patterns for subagent orchestration, allowing you to generate and coordinate parallel component variants for direct visual comparison.

How does the extract-first workflow work for redesigning existing UI components?▼

The extract-first workflow for redesigning existing UI components guides you to extract existing code before making changes. This preserves exact dimensions and visual tokens, ensuring accurate state visualization and responsive previews before applying new modifications or theme comparisons.

Does this UI preview approach support responsive design and different component states?▼

Yes, this UI preview approach fully supports responsive design and different component states. You can preview mobile, tablet, and desktop layouts while visualizing specific states like loading, error, and empty within the isolated Vite sandbox before final iframe presentation.

What is the best way to embed live web mockups into a workspace board?▼

The best way to embed live web mockups into a workspace board is by using path-based preview URL routing. You create your mockup component, embed it as an iframe via the /__mockup/preview route, and then present the artifact using the created iframe shape IDs.

Related Skills

Explore More Design & Creative Skills→
mecolejrmecolejr

mockup-sandbox

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

Community
Intermediate
maurodf0maurodf0

webf-quickstart

Set up and test WebF-based web apps with Vite and WebF Go.

Community
Intermediate
samibrahmisamibrahmi

mockup-extract

Extract UI components into a mockup sandbox with rewritten imports and stubbed dependencies.

Community
Intermediate
omerakbenomerakben
1

react-email

Build and render cross-client HTML emails from React components.

Community
Intermediate