skills.rest
YSheldon
YSheldonCOMMUNITY
Explore all skills by this author →
GitHub

mockup-extract

Copy a UI component into a mockup sandbox and embed it as an iframe.

Updated Apr 12, 2026
Search Tags:#sandbox#mockup#design-iteration#component-extraction#dependency-stubbing#iframe-preview
One-click install
npx skills add https://github.com/YSheldon/Prompt-Log --skill mockup-extract-ysheldon
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mockup-extract
Source: https://github.com/YSheldon/Prompt-Log/tree/main/.local/skills/mockup-extract
Command: npx skills add https://github.com/YSheldon/Prompt-Log --skill mockup-extract-ysheldon

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Pulls an existing component from the main app into a dedicated mockup sandbox so it can be previewed, iterated, or showcased as a reference without hand-coding from scratch.

Core Features & Use Cases

  • Source-of-truth extraction: Locate the real component code in the main app and copy it into the mockup sandbox for faithful visual fidelity.
  • Variant-driven iteration: Create multiple design variants from the extracted component to compare layouts, typography, and spacing.
  • Isolated preview via iframe: Serve the extracted component inside an iframe within the canvas for safe, repeatable previews.

Quick Start

Use this skill to pull the selected UI component into artifacts/mockup-sandbox/ and render it on the canvas for 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 preview an existing UI component on the canvas for design iteration?▼

To preview an existing UI component, you can extract the source code into a mockup sandbox, rewrite imports, and render it as an isolated iframe on the canvas for faithful visual iteration.

Can I create design variants from a component already implemented in my codebase?▼

Yes, you can copy real component code and its dependencies into a mockup sandbox to create and compare multiple design variants, testing layouts and spacing without hand-coding from scratch.

How does dependency stubbing work when extracting UI components into a sandbox?▼

Dependency stubbing isolates extracted UI components by rewriting imports and replacing external dependencies with stubs, ensuring the component renders safely within an iframe preview without breaking the main app.

What is the best way to isolate and showcase a real component without affecting the main app?▼

The best way to isolate a real component is to copy it into a dedicated mockup sandbox, stub external dependencies, and embed the result as an iframe on the canvas for safe, repeatable previews.

Does extracting a component into a mockup sandbox require hand-coding the UI?▼

No, component extraction pulls the source-of-truth code directly from the main app into the sandbox, enabling faithful previews and redesigns without hand-coding the UI from scratch.

Why should I use an iframe to preview extracted UI components on the canvas?▼

Using an iframe to preview extracted UI components provides a safe, isolated environment that prevents styling and dependency conflicts, ensuring repeatable visual fidelity during design iteration.

Related Skills

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

mockup-extract

Extract UI components into a mockup sandbox and rewrite imports.

Community
Intermediate
akhilksap2026akhilksap2026

mockup-sandbox

Provision UI components on a canvas with live iframe previews.

Community
Advanced
marcusgollmarcusgoll
91

mockup-extraction

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

Community
Advanced
aryankumarraiaryankumarrai

mockup-extract

Extract UI components and dependencies into a mockup sandbox.

Community
Advanced