skills.rest
binan-maker
binan-makerCOMMUNITY
Explore all skills by this author →
GitHub

mockup-extract

Extract UI components into a mockup sandbox with dependency stubbing and import rewriting.

Updated Feb 24, 2026
Search Tags:#component#sandbox#extract#mockup#design-iteration#import-rewrite#dependencies-stubbing
One-click install
npx skills add https://github.com/binan-maker/QRS --skill mockup-extract-binan-maker
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mockup-extract
Source: https://github.com/binan-maker/QRS/tree/main/.local/skills/mockup-extract
Command: npx skills add https://github.com/binan-maker/QRS --skill mockup-extract-binan-maker

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Pulling existing components from the main app into a dedicated mockup sandbox enables design teams to iterate, redesign, and compare UI without affecting live code.

Core Features & Use Cases

  • Component isolation for design iteration.
  • Dependency stubbing and import path rewriting to preserve fidelity.
  • Live previews in the mockup sandbox to quickly generate variants.

Quick Start

Run the mockup-extract workflow to pull the target component into the mockup sandbox and render its current state for immediate 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 into a mockup sandbox for design iteration?▼

Mockup extraction pulls existing UI components from the main application into a sandboxed mockup using dependency stubbing and import rewriting. This preserves visual fidelity while allowing rapid design iteration and variant creation in an isolated environment.

What is component isolation and how does it help with redesigning existing UI?▼

Component isolation pulls existing UI components from the main application into a dedicated mockup sandbox. It enables design teams to iterate, redesign, and compare visual variants rapidly without affecting live code or the original source.

How do I rewrite import paths and stub dependencies when mocking up UI components?▼

To rewrite import paths and stub dependencies when mocking up UI components, run the extraction workflow to automatically remap import paths and generate stubs. This ensures faithful rendering of the target component within the mockup sandbox.

Can I create and compare multiple visual variants of a component without modifying the original source?▼

Yes, you can create and compare multiple visual variants without modifying the original source. The mockup sandbox preserves the original application code while providing generated variant scaffolds for immediate live previews and visual comparison.

Does mockup extraction work with complex component dependencies in the main application?▼

Yes, mockup extraction works with complex component dependencies by stubbing them out during the extraction process. Import-path remapping ensures that the extracted component renders faithfully in the mockup sandbox despite its original application dependencies.

Related Skills

Explore More Design & Creative Skills→
AugustEmnaAugustEmna

mockup-sandbox

Render UI component previews in an isolated Vite dev server sandbox.

Community
Advanced
shahmirerrorshahmirerror

mockup-extract

Extract UI components from the main app into a mockup sandbox for preview.

Community
Intermediate
tamnguyentommy-rgbtamnguyentommy-rgb
2

mockup-extract

Extract UI components into a mockup sandbox with a /preview route.

Community
Intermediate
alyamenfactoryalyamenfactory

mockup-extract

Extract UI components into a mockup sandbox and rewrite imports.

Community
Advanced