Verified:GitHub

mockup-sandbox

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

Updated Jun 19, 2018

Search Tags:#react #prototyping #vite #ui design #web components #live preview

One-click install

npx skills add https://github.com/ouzayr/Utilities --skill mockup-sandbox-ouzayr

Or copy as Structured Prompt for Agent▼

Please help me install this Agent Skill.
Skill: mockup-sandbox
Source: https://github.com/ouzayr/Utilities/tree/main/DailyPlanner/.local/skills/mockup-sandbox
Command: npx skills add https://github.com/ouzayr/Utilities --skill mockup-sandbox-ouzayr

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires react, react-dom, vite, tailwindcss, lucide-react, class-variance-authority, clsx, tailwind-merge, cmdk, date-fns, embla-carousel-react, framer-motion, input-otp, next-themes, react-day-picker, react-hook-form, react-resizable-panels, recharts, sonner, tailwindcss-animate, tw-animate-css, vaul, zod, @radix-ui/react-accordion, @radix-ui/react-alert-dialog, @radix-ui/react-aspect-ratio, @radix-ui/react-avatar, @radix-ui/react-checkbox, @radix-ui/react-collapsible, @radix-ui/react-context-menu, @radix-ui/react-dialog, @radix-ui/react-dropdown-menu, @radix-ui/react-hover-card, @radix-ui/react-label, @radix-ui/react-menubar, @radix-ui/react-navigation-menu, @radix-ui/react-popover, @radix-ui/react-progress, @radix-ui/react-radio-group, @radix-ui/react-scroll-area, @radix-ui/react-select, @radix-ui/react-separator, @radix-ui/react-slider, @radix-ui/react-slot, @radix-ui/react-switch, @radix-ui/react-tabs, @radix-ui/react-toast, @radix-ui/react-toggle, @radix-ui/react-toggle-group, @radix-ui/react-tooltip, @radix-ui/react-alert, @radix-ui/react-dialog, @radix-ui/react-dropdown-menu, @radix-ui/react-hover-card, @radix-ui/react-label, @radix-ui/react-menubar, @radix-ui/react-navigation-menu, @radix-ui/react-popover, @radix-ui/react-progress, @radix-ui/react-radio-group, @radix-ui/react-scroll-area, @radix-ui/react-select, @radix-ui/react-separator, @radix-ui/react-slider, @radix-ui/react-slot, @radix-ui/react-switch, @radix-ui/react-tabs, @radix-ui/react-toast, @radix-ui/react-toggle, @radix-ui/react-toggle-group, @radix-ui/react-tooltip, @radix-ui/react-alert, @radix-ui/react-dialog, @radix-ui/react-dropdown-menu, @radix-ui/react-hover-card, @radix-ui/react-label, @radix-ui/react-menubar, @radix-ui/react-navigation-menu, @radix-ui/react-popover, @radix-ui/react-progress, @radix-ui/react-radio-group, @radix-ui/react-scroll-area, @radix-ui/react-select, @radix-ui/react-separator, @radix-ui/react-slider, @radix-ui/react-slot, @radix-ui/react-switch, @radix-ui/react-tabs, @radix-ui/react-toast, @radix-ui/react-toggle, @radix-ui/react-toggle-group, @radix-ui/react-tooltip, @hookform/resolvers, @replit/vite-plugin-cartographer, @replit/vite-plugin-runtime-error-modal, @tailwindcss/vite, chokidar, fast-glob, input-otp, lucide-react, next-themes, react-day-picker, react-hook-form, react-resizable-panels, recharts, sonner, tailwind-merge, tailwindcss-animate, tw-animate-css, vaul, zod, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill allows you to create, preview, and iterate on any web UI content directly on the canvas, providing a live, interactive environment for your designs.

Core Features & Use Cases

Live UI Rendering: Display interactive web components on the canvas, unlike static shapes.
Prototyping & Iteration: Design, prototype, and compare multiple design variants side-by-side.
Responsive Previews: Check how components look on mobile, tablet, and desktop viewports.
Component States: Preview different states like loading, error, or empty.
Theme Comparison: Easily compare dark vs. light modes or different color schemes.
Use Case: You need to design a new pricing card component. Activate this skill, create a Minimal.tsx file in the mockup/src/components/mockups/pricing-cards/ directory, and then embed the preview on the canvas.

Quick Start

Run the setup script to prepare the sandbox environment.

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 while designing UI?▼

Component previews are embedded using iframes, isolating web components during rendering to prevent style or state interference while visualizing different design variants.

Can I check responsive design for mobile, tablet, and desktop viewports?▼

Yes, you can check responsive design across mobile, tablet, and desktop viewports by adjusting the iframe embedding dimensions on the canvas to visualize component layouts.

Does this sandbox support Tailwind CSS and shadcn/ui for web components?▼

This sandbox supports Tailwind CSS for styling and shadcn/ui for pre-built web components, enabling rapid development and consistent design systems within your React project.

How do I preview different component states like loading or error?▼

Yes, you can preview different component states like loading, error, or empty, and easily compare visual variants such as dark versus light modes side-by-side on the canvas.

How do I add a new pricing card component to the preview canvas?▼

Create a new `.tsx` file in the `mockup/src/components/mockups/` directory, then embed the preview on the canvas to display and interact with your web UI.

What is the difference between mockup-sandbox and standard design tools?▼

mockup-sandbox provides an interactive live preview environment for React UI, whereas standard design tools typically produce static shapes without functioning component logic.