mockup-extract

Extract UI components into a mockup sandbox with rewritten imports and iframe embedding.

Updated Apr 1, 2026

Search Tags:#design #component #sandbox #extract #iframe #mockup

Ready to run

npx skills add https://github.com/koya-alt/Catalyst --skill mockup-extract-koya-alt

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Pull an existing UI component from the main application into a dedicated mockup sandbox to enable isolated design iteration and rapid prototyping.

Core Features & Use Cases

Extracts an existing component from the main app into the mockup sandbox for visual reference.
Rewrites imports, stubs external dependencies, and embeds the result as an iframe on the canvas for side-by-side comparison.
Activates automatically when users want to redesign, create variants, or iterate on components already present in the codebase.

Quick Start

Extract a target component into the mockup sandbox to begin design iteration.

Frequently Asked Questions about mockup-extract

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

FAQPage Schema

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

To extract a UI component into a mockup sandbox, the tool pulls the target from the main application, rewrites imports, stubs external dependencies, and embeds the result as an iframe for isolated visualization and rapid design iteration.

What is a mockup sandbox and why do I need it for component design?▼

A mockup sandbox is an isolated environment that allows you to visualize and iterate on UI components extracted from your main application without affecting the production codebase, enabling rapid side-by-side comparison of design variants.

How do imports and dependencies work when extracting a component to an iframe?▼

During component extraction, the tool automatically rewrites internal imports and stubs external dependencies to ensure the isolated UI component renders correctly as an embedded iframe within the mockup sandbox.

Can I use this to create and compare multiple design variants of an existing component?▼

Yes, you can extract an existing component into the mockup sandbox to create and rapidly compare multiple design variants side-by-side on the canvas without altering your main application.

Do I need a properly configured sandbox environment before extracting UI components?▼

Yes, extracting UI components requires a properly configured mockup sandbox and deterministic extraction logic to produce a faithful, isolated preview of the component.