mockup-extract

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

Updated Mar 19, 2026

Search Tags:#design #ui #dependencies #component #sandbox #extract #mockup

Ready to run

npx skills add https://github.com/mecolejr/EVL-mOC5 --skill mockup-extract-mecolejr

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Pulls an existing component from the main app into the mockup sandbox so it can be previewed on the canvas and used as a starting point for design iteration, ensuring fidelity and speeding up iteration over hand-coded approximations.

Core Features & Use Cases

Extract existing components from the main codebase into the mockup sandbox for isolated design previews.
Rewrite imports, stub external dependencies, and embed the result for accurate visual reference.
Create variants and compare against the original component without reconstructing UI by hand.

Quick Start

Identify the target component in the app and trigger extraction to the mockup sandbox for an isolated live preview.

Frequently Asked Questions about mockup-extract

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

FAQPage Schema

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

To extract a UI component into a sandbox, the Skill copies the real source from your main app, stubs external dependencies, and rewrites import paths to render an accurate isolated iframe preview. This ensures visual fidelity without manual reconstruction.

What is the best way to preview an existing component without hand-coding a mockup?▼

The best way to preview an existing component is to pull the real source into a mockup sandbox. This approach stubs dependencies and copies assets to render an accurate iframe preview, speeding up iteration over hand-coded approximations.

How does dependency stubbing work when isolating a component for a sandbox preview?▼

Dependency stubbing works by replacing external dependencies with simulated versions during the extraction process. The Skill rewrites import paths and stubs these dependencies to ensure the extracted component renders accurately in the isolated mockup sandbox preview.

Do I need a specific sandbox setup to extract and preview UI components?▼

You need a mockup sandbox with a dedicated /preview/ URL, an SKILL.md frontmatter, and proper asset copying capabilities. This environment is required to rewrite import paths and render the extracted UI component accurately in an iframe preview.

Can I create UI variants and compare them against the original component in a sandbox?▼

You can create variants and compare them against the original component by extracting the real source into an isolated mockup sandbox. This allows you to iterate on design variants and evaluate them side-by-side without reconstructing the UI by hand.