mockup-extract

Extract a UI component into a mockup sandbox with import rewrites and dependency stubbing.

Updated Mar 20, 2026

Search Tags:#sandbox #ui-components #iframe #mockup #design-iteration #component-extraction #dependency-stubbing

Ready to run

npx skills add https://github.com/ItsJupiter000/hot-outreach --skill mockup-extract-itsjupiter000

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: mockup-extract
Source: https://github.com/ItsJupiter000/hot-outreach/tree/main/.local/skills/mockup-extract
Command: npx skills add https://github.com/ItsJupiter000/hot-outreach --skill mockup-extract-itsjupiter000

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.

Core Features & Use Cases

Extracts the component from the main app into the mockup sandbox for isolated preview and iteration.
Rewrites imports and stubs external dependencies to make it sandbox-compatible and portable.
Embeds the result as an iframe on the canvas to enable visual comparison and variant creation.
Activates implicitly when the user asks to redesign, improve, or create variants of any component that already exists in code in the main app.

Quick Start

Ask which component to extract and start the mockup extraction workflow for that component.

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 a mockup sandbox for isolated preview?▼

The mockup extraction workflow rewrites import paths and stubs external dependencies, making the extracted component sandbox-compatible and portable. This ensures the component renders correctly inside the isolated iframe environment without requiring the full application context.

Can I create design variants for a code-backed component without affecting the main app?▼

Use mockup extraction when you need to redesign, improve, or create variants of any component that already exists in code. It pulls the component into an isolated sandbox to serve as a starting point for visual comparison and design exploration.

What's the best way to preview an extracted UI component on a canvas?▼

No additional dependencies are required to run the mockup extraction workflow. It handles import path rewrites and dependency stubbing internally, ensuring the component renders inside an iframe on the canvas without external setup.

Why do extracted components need dependency stubbing in a sandbox?▼

Extracted components need dependency stubbing because they rely on the main app's external dependencies. Stubbing replaces these dependencies to make the component sandbox-compatible and portable, ensuring it renders correctly inside the isolated iframe environment.