skills.rest
koya-alt
koya-altCOMMUNITY
Explore all skills by this author →
GitHub

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

Related Skills

Explore More Design & Creative Skills→
ckrono-progckrono-prog

mockup-extract

Extract UI components into a mockup sandbox and rewrite imports.

Community
Intermediate
Mo7amed-MahmoudMo7amed-Mahmoud

mockup-extract

Extract UI components into an isolated mockup sandbox with iframe embedding.

Community
Intermediate
DevHive1DevHive1
18

mockup-sandbox

Create and preview React/Tailwind UI components in a Vite sandbox.

Community
Advanced
marcusgollmarcusgoll
91

mockup-extraction

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

Community
Advanced