mockup-extract

Name: mockup-extract
Availability: InStock
Author: augustemna

Extract a UI component into a mockup sandbox with iframe preview.

Updated Feb 10, 2026

Search Tags:#sandbox #extract #mockup #design-iteration #ui-component #import-rewrite #dependency-mocking

Ready to run

npx skills add https://github.com/AugustEmna/FlexMatch --skill mockup-extract-augustemna

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: mockup-extract
Source: https://github.com/AugustEmna/FlexMatch/tree/main/.local/skills/mockup-extract
Command: npx skills add https://github.com/AugustEmna/FlexMatch --skill mockup-extract-augustemna

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Pull an existing UI component from the main app into a mockup sandbox to provide an exact starting point for redesigns, variants, or visual comparisons.

Core Features & Use Cases

Extract and sandbox a targeted component into the mockup workspace.
Rewrite imports to point to the mockup sandbox and stub external dependencies.
Embed the resulting component as an iframe preview on the canvas for iteration and feedback.
Use case: compare navbar variants, test new UI flows, or reproduce a real component for design critique.

Quick Start

Trigger the mockup-extract skill to pull the desired component from the main app into the mockup sandbox and preview it on the canvas.

Frequently Asked Questions about mockup-extract

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

FAQPage Schema

How do I extract and sandbox a UI component for isolated design iteration?▼

To extract and sandbox a UI component for isolated design iteration, trigger the skill to pull the component from the main app, rewrite imports, stub dependencies, and embed it as an iframe preview on the canvas.

What is the best way to pull existing UI into a mockup for variants comparison?▼

The best way to pull existing UI into a mockup for variants comparison is to extract the exact component from the main app, stub external dependencies, and preview it as an iframe on a controlled mockup canvas.

How does dependency mocking work when isolating UI components?▼

Dependency mocking works by stubbing external dependencies and rewriting import paths to point to the mockup sandbox, ensuring the extracted UI component functions independently within the controlled iframe preview environment.

Do I need to manually rewrite imports to preview a component in a mockup sandbox?▼

No, you do not need to manually rewrite imports to preview a component in a mockup sandbox because the skill automatically performs import tracing, path rewriting, and dependency stubbing during the extraction process.

Can I reproduce a real navbar component for design critique without affecting the main app?▼

Yes, you can reproduce a real navbar component for design critique without affecting the main app by extracting it into a controlled mockup sandbox that stubs dependencies and embeds the isolated component as an iframe preview.

Why does my extracted UI component break when previewed on the mockup canvas?▼

An extracted UI component may break on the mockup canvas if external dependencies are not properly stubbed or if import tracing fails to rewrite paths to the mockup sandbox, disrupting the isolated iframe embedding.