skills.rest
mecolejr
mecolejrCOMMUNITY
Explore all skills by this author →
GitHub

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

Related Skills

Explore More Design & Creative Skills→
AugustEmnaAugustEmna

mockup-sandbox

Render UI component previews in an isolated Vite dev server sandbox.

Community
Advanced
Pranil9699Pranil9699

mockup-extract

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

Community
Intermediate
tunneleventunneleven

c4flow:design

Generate design systems and UI mockups for specified features.

Community
Basic
ouzayrouzayr

mockup-extract

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

Community
Advanced