mockup-extract

Name: mockup-extract
Availability: InStock
Author: samibrahmi

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

Updated Apr 18, 2026

Search Tags:#prototype #ui-design #sandbox #iframe #mockup #design-workflow #component-extraction

Ready to run

npx skills add https://github.com/samibrahmi/instanotes-api --skill mockup-extract-samibrahmi

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: mockup-extract
Source: https://github.com/samibrahmi/instanotes-api/tree/main/newcontent/skills/mockup-extract
Command: npx skills add https://github.com/samibrahmi/instanotes-api --skill mockup-extract-samibrahmi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Pulls an existing component from the main app into an isolated mockup sandbox to preview, redesign, or create variants without touching the original codebase.

Core Features & Use Cases

Extracts an existing component into the mockup sandbox for visual iteration and comparison.
Rewrites imports and stubs external dependencies to run in isolation while preserving exact visuals and behavior.
Embeds the sandbox preview as an iframe on the design canvas for rapid iteration.

Quick Start

Ask to extract a UI component from the main app into the mockup sandbox and open the preview iframe to start iterating.

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 mockup sandbox?▼

To extract a UI component into a mockup sandbox, the tool pulls the component from the main app, rewrites imports to mockup paths, and stubs external dependencies to run it in isolation for visual iteration.

Can I preview a UI component on the design canvas without modifying the original source code?▼

Yes, you can preview a UI component without touching the original codebase by embedding the isolated mockup sandbox preview directly as an iframe on the design canvas.

How do I create design variants for an existing component while preserving its exact behavior?▼

You create design variants by extracting the real source code into a mockup sandbox, which preserves exact dimensions, colors, and behavior by stubbing external dependencies before you iterate.

Does extracting a component into a mockup sandbox break its external dependencies?▼

No, extracting a component into a mockup sandbox does not break external dependencies because the process automatically stubs them out, allowing the UI to run correctly in isolation.

What is the best way to isolate and redesign an existing UI component for visual comparison?▼

The best way to isolate and redesign an existing UI component is to extract it into a mockup sandbox using the real source code, then embed the preview as an iframe for rapid visual comparison.