mockup-extract

Extract live components into a mockup sandbox for rapid redesign and iteration.

Updated Jul 4, 2026

Search Tags:#component extraction #iframe embedding #UI iteration #mockup design #design sandbox

Ready to run

npx skills add https://github.com/Spectra29115/Project-ResumeParser --skill mockup-extract-spectra29115

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: mockup-extract
Source: https://github.com/Spectra29115/Project-ResumeParser/tree/main/.local/skills/mockup-extract
Command: npx skills add https://github.com/Spectra29115/Project-ResumeParser --skill mockup-extract-spectra29115

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This Skill enables users to extract components from their main app into a mockup environment for redesigning, creating variants, or displaying them as visual references, streamlining the design iteration process.

Core Features & Use Cases

Component Extraction: Copies components and their dependencies into the mockup sandbox.
Dependency Rewriting: Rewrites imports and stubs external dependencies for the sandbox environment.
Embedding Components: Embeds the extracted component as an iframe on the canvas for visualization.
Use Case: Ideal for users who need to redesign a component, create variants, or compare designs with existing UI elements.

Quick Start

Use the mockup-extract skill to extract the 'homepage' component from the main app into the mockup for redesign.

Frequently Asked Questions about mockup-extract

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

FAQPage Schema

How do I extract UI components from my main app for design iteration?▼

To extract UI components for design iteration, you can pull the target component and its dependencies into a mockup environment. This process rewrites import paths and stubs external dependencies to isolate the component for redesign and visual reference.

What does dependency stubbing do when embedding components into a design sandbox?▼

Dependency stubbing in a design sandbox replaces external app dependencies with isolated mock implementations. This allows the extracted component to render and function within the mockup environment without requiring the full main application architecture.

Can I use iframe embedding to visualize extracted components on a canvas?▼

Yes, iframe embedding is used to visualize extracted components directly on the canvas. This method isolates the sandboxed component's styles and scripts, allowing you to safely modify and view the UI iteration without impacting the main app.

How do I rewrite import paths when copying components into a mockup environment?▼

Rewriting import paths involves redirecting component dependencies to their sandbox equivalents during extraction. This ensures the copied component resolves its required modules within the mockup environment instead of referencing the original main app architecture.

What is the best way to create UI variants from existing app components?▼

The best way to create UI variants from existing app components is to extract them into a mockup sandbox. This isolates the component for modification, allowing you to safely redesign, iterate, and compare new visual variants against the original UI elements.

Why are my extracted components not rendering correctly in the design sandbox?▼

Extracted components may not render correctly in the design sandbox if import paths are not properly rewritten or if external dependencies are incompletely stubbed. The extraction process requires fully resolving these dependencies to ensure the isolated component visualizes without errors.