skills.rest
KhaledMKhaled
KhaledMKhaledCOMMUNITY
Explore all skills by this author →
GitHub

mockup-extract

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

Updated Dec 10, 2025
Search Tags:#dependency tracing#react components#ui extraction#iframe embedding#sandbox preview#stubbing dependencies#style token scoping
One-click install
npx skills add https://github.com/KhaledMKhaled/FodaStore --skill mockup-extract-khaledmkhaled
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mockup-extract
Source: https://github.com/KhaledMKhaled/FodaStore/tree/main/.local/skills/mockup-extract
Command: npx skills add https://github.com/KhaledMKhaled/FodaStore --skill mockup-extract-khaledmkhaled

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It solves the problem of redesigning or iterating on an existing UI by ensuring the canvas uses the exact component implementation and styling from the main app, instead of an inaccurate hand-built approximation.

Core Features & Use Cases

  • Component extraction from app code: Pulls a target component and its import graph into the mockup/ sandbox while rewriting paths for the sandbox environment.
  • Dependency handling with fidelity: Copies inline and larger dependencies, and stubs external boundaries like APIs, routing, and global state so the component can run safely in isolation.
  • Canvas-ready preview embedding: Embeds the extracted result as an iframe using the sandbox /preview/ URL, keeping iterations independent from the main app.
  • Style and font scoping: Builds a group-scoped _group.css by collecting app global styles and font imports for visual parity without leaking tokens globally.

Quick Start

Ask the assistant to put your existing Settings page on the canvas for redesign, and it will extract the real code and dependencies into the mockup sandbox for an accurate preview iframe.

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 React component into an isolated sandbox for redesign?▼

Component extraction pulls the target UI and its dependency graph into a mockup sandbox, rewriting import paths and stubbing external boundaries like APIs and routing for safe design iteration. The original implementation remains the source of truth.

How does dependency stubbing work when extracting UI components?▼

Dependency stubbing works by replacing external boundaries like APIs, routing, and global state with deterministic stubs. This allows the extracted UI component to run safely in isolation within the mockup sandbox without requiring the main application.

Can I preview an extracted component using an iframe embedding URL?▼

Yes, you can preview an extracted component using iframe embedding via the sandbox /preview/ URL. This canvas-ready preview keeps your design iterations independent from the main app while displaying the actual component implementation.

What is the best way to preserve global styles when isolating UI code?▼

The best way to preserve global styles is style token scoping, which collects app global styles and font imports into a group-scoped _group.css file. This ensures visual parity without leaking style tokens globally into the mockup sandbox environment.

Does component extraction work for redesigning an existing page without breaking the main app?▼

Yes, component extraction works for redesigning existing pages without breaking the main app by tracing the dependency graph and rewriting import paths to the sandbox root. The original implementation stays untouched while you create visual variants in isolation.

Related Skills

Explore More Software Engineering Skills→
alyamenfactoryalyamenfactory

mockup-extract

Extract UI components into a mockup sandbox and rewrite imports.

Community
Advanced
Pranil9699Pranil9699

mockup-extract

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

Community
Intermediate
0xDarkMatter0xDarkMatter
29

tailwind-patterns

Generate Tailwind CSS v3+ utility patterns with responsive breakpoints and dark mode configuration.

Community
Basic
lostitonce420-beeplostitonce420-beep

mockup-extract

Extract UI components into standalone mockup sandboxes with rewritten imports and stubbed calls.

Community
Intermediate