skills.rest
AugustEmna
AugustEmnaCOMMUNITY
Explore all skills by this author →
GitHub

mockup-extract

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
One-click install
npx skills add https://github.com/AugustEmna/FlexMatch --skill mockup-extract-augustemna
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
ouzayrouzayr

mockup-extract

Extract UI components into a sandbox and embed them as iframes.

Community
Advanced
Pranil9699Pranil9699

mockup-extract

Extract UI components into an isolated preview iframe for design iteration.

Community
Intermediate
marcusgollmarcusgoll
91

mockup-extraction

Extract reusable UI components from approved HTML mockups and map CSS to Tailwind utilities.

Community
Advanced
dinoudondinoudon

component-library

Create reusable UI components with React and Storybook.

Community
Advanced