skills.rest
samibrahmi
samibrahmiCOMMUNITY
Explore all skills by this author →
GitHub

mockup-extract

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

Updated Apr 18, 2026
Search Tags:#prototype#ui-design#sandbox#iframe#mockup#design-workflow#component-extraction
One-click install
npx skills add https://github.com/samibrahmi/instanotes-api --skill mockup-extract-samibrahmi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mockup-extract
Source: https://github.com/samibrahmi/instanotes-api/tree/main/newcontent/skills/mockup-extract
Command: npx skills add https://github.com/samibrahmi/instanotes-api --skill mockup-extract-samibrahmi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Pulls an existing component from the main app into an isolated mockup sandbox to preview, redesign, or create variants without touching the original codebase.

Core Features & Use Cases

  • Extracts an existing component into the mockup sandbox for visual iteration and comparison.
  • Rewrites imports and stubs external dependencies to run in isolation while preserving exact visuals and behavior.
  • Embeds the sandbox preview as an iframe on the design canvas for rapid iteration.

Quick Start

Ask to extract a UI component from the main app into the mockup sandbox and open the preview iframe to start iterating.

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 an isolated mockup sandbox?▼

To extract a UI component into a mockup sandbox, the tool pulls the component from the main app, rewrites imports to mockup paths, and stubs external dependencies to run it in isolation for visual iteration.

Can I preview a UI component on the design canvas without modifying the original source code?▼

Yes, you can preview a UI component without touching the original codebase by embedding the isolated mockup sandbox preview directly as an iframe on the design canvas.

How do I create design variants for an existing component while preserving its exact behavior?▼

You create design variants by extracting the real source code into a mockup sandbox, which preserves exact dimensions, colors, and behavior by stubbing external dependencies before you iterate.

Does extracting a component into a mockup sandbox break its external dependencies?▼

No, extracting a component into a mockup sandbox does not break external dependencies because the process automatically stubs them out, allowing the UI to run correctly in isolation.

What is the best way to isolate and redesign an existing UI component for visual comparison?▼

The best way to isolate and redesign an existing UI component is to extract it into a mockup sandbox using the real source code, then embed the preview as an iframe for rapid visual comparison.

Related Skills

Explore More Design & Creative Skills→
akhilksap2026akhilksap2026

mockup-extract

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

Community
Advanced
AugustEmnaAugustEmna

mockup-extract

Extract a UI component into a mockup sandbox with iframe preview.

Community
Intermediate
omerakbenomerakben
1

canvas-component

Compose Canvas UI components with an embedded Monaco editor and split-view layout.

Community
Intermediate
TheOrcDevTheOrcDev
2.0k

shadcn-ui-conventions

Enforce shadcn/ui conventions for React components with defined imports, types, refs, and lint exclusions.

Community
Intermediate