skills.rest
ma-wais
ma-waisCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

mockup-extract

Extract existing UI components into a mockup sandbox as iframes.

Updated Mar 24, 2026
Search Tags:#ui#frontend#component#sandbox#extract#mockup#design-iteration
One-click install
npx skills add https://github.com/ma-wais/Quality-Management-System --skill mockup-extract-ma-wais
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mockup-extract
Source: https://github.com/ma-wais/Quality-Management-System/tree/main/.local/skills/mockup-extract
Command: npx skills add https://github.com/ma-wais/Quality-Management-System --skill mockup-extract-ma-wais

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill enables designers and engineers to pull an existing component from the main app into a dedicated mockup sandbox for isolated preview and design iteration, ensuring accurate visuals without hand-coded approximations.

Core Features & Use Cases

  • Pulls an existing component from the main app into the mockup sandbox for preview and iteration.
  • Automatically rewrites imports, stubs external dependencies, and embeds the result as an iframe on the canvas to preserve context and fidelity.
  • Activates implicitly when redesigning, improving, or creating variants of components that already exist in code, guaranteeing you start from the true source rather than a hand-rolled mock.

Quick Start

Use the mockup-extract skill to pull an existing component from the main app into the mockup sandbox and open the sandbox's '/preview' URL to begin iteration.

Frequently Asked Questions about mockup-extract

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

FAQPage Schema
How do I extract an existing UI component into an isolated sandbox for redesign?▼

To extract an existing UI component into an isolated sandbox, the skill pulls it from the main application, stubs external dependencies, and embeds the result as an iframe to preserve real dimensions and spacing for design iteration.

When do I need to isolate a component for design iteration instead of mocking it by hand?▼

You need to isolate a component for design iteration when redesigning or creating variants of existing UI elements, ensuring you start from the true source code with accurate visuals rather than hand-rolled approximations.

How do I preview an extracted component without breaking its original imports and styles?▼

To preview an extracted component without breaking styles, the process automatically rewrites imports and stubs external dependencies, embedding the true source into a mockup sandbox iframe that preserves original context and fidelity.

Can I compare current UI designs against alternatives using a mockup sandbox?▼

Yes, you can compare current UI designs against alternatives by pulling the existing component into the mockup sandbox's isolated preview environment, allowing you to iterate and evaluate variants side-by-side with the true source.

Do I need to manually configure dependencies to preview existing UI components in a sandbox?▼

No, you do not need to manually configure dependencies to preview existing UI components, because the extraction process automatically stubs external dependencies and rewrites imports to embed the isolated component directly.

Related Skills

Explore More Design & Creative Skills→
binan-makerbinan-maker

mockup-extract

Extract UI components into a mockup sandbox with dependency stubbing and import rewriting.

Community
Intermediate
shahmirerrorshahmirerror

mockup-extract

Extract UI components from the main app into a mockup sandbox for preview.

Community
Intermediate
lostitonce420-beeplostitonce420-beep

mockup-extract

Extract UI components into standalone mockup sandboxes with rewritten imports and stubbed calls.

Community
Intermediate
heyparth1heyparth1

extract

Extracts reusable UI components and design tokens from source code into a unified system.

Community
Advanced