skills.rest
KartikSharma4448
KartikSharma4448COMMUNITY
Explore all skills by this author →
WebsiteGitHub

mockup-extract

Extract a component from the main app into a sandboxed mockup with dependency stubbing and iframe preview.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Pull an existing component from the main app into the mockup sandbox so it can be previewed on the canvas and used as a starting point for design iteration.

Core Features & Use Cases

  • Visualize a real component inside a dedicated mockup sandbox for iteration and exploration.
  • Trigger redesigns, variants, or comparisons starting from the live code to ensure fidelity.
  • Automatically prepare the component with path rewrites and dependency stubs for isolated preview.

Quick Start

Load the existing component you want to iterate on into the mockup sandbox and open the preview to begin design exploration.

Frequently Asked Questions about mockup-extract

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

FAQPage Schema
How do I isolate an existing UI component for visual preview and redesign?▼

To isolate an existing UI component for visual preview, you extract it from the main app into a mockup sandbox. The system automatically prepares the component using import rewriting and dependency stubbing for isolated iteration.

What is dependency stubbing when extracting a component into a sandbox?▼

Dependency stubbing is the process of replacing external module dependencies with lightweight placeholders during component extraction. This allows the isolated UI component to render correctly inside the mockup sandbox without requiring the full application environment.

How do I start a design iteration from live source code?▼

You start a design iteration from live source code by loading the existing code-backed component into the mockup sandbox. Opening the iframe-embedded preview allows you to visualize the real component and begin exploring visual variants.

Can I create design variants using an iframe-embedded sandbox?▼

Yes, you can create design variants using an iframe-embedded sandbox. By pulling the live component into the isolated mockup environment, you can safely apply visual changes and compare new designs against the real source code.

Does component extraction work without manual path rewrites?▼

Yes, component extraction works automatically without manual path rewrites. The extraction process implicitly rewrites import paths and stubs dependencies when a user requests visual changes to code-backed components.

Related Skills

Explore More Design & Creative Skills→
TheOrcDevTheOrcDev
2.0k

shadcn-ui-conventions

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

Community
Intermediate
Mo7amed-MahmoudMo7amed-Mahmoud

mockup-extract

Extract UI components into an isolated mockup sandbox with iframe embedding.

Community
Intermediate
DNYoussefDNYoussef
4

sandbox-configurator

Configure Claude Code sandbox isolation with JSON templates and Docker controls.

Community
Intermediate
LuisSambranoLuisSambrano
7

ui-prototype

Generate visual mockups and wireframes from textual descriptions.

Community
Basic