skills.rest
ItsJupiter000
ItsJupiter000COMMUNITY
Explore all skills by this author →
WebsiteGitHub

mockup-extract

Extract a UI component into a mockup sandbox with import rewrites and dependency stubbing.

Updated Mar 20, 2026
Search Tags:#sandbox#ui-components#iframe#mockup#design-iteration#component-extraction#dependency-stubbing
One-click install
npx skills add https://github.com/ItsJupiter000/hot-outreach --skill mockup-extract-itsjupiter000
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mockup-extract
Source: https://github.com/ItsJupiter000/hot-outreach/tree/main/.local/skills/mockup-extract
Command: npx skills add https://github.com/ItsJupiter000/hot-outreach --skill mockup-extract-itsjupiter000

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Pulls 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

  • Extracts the component from the main app into the mockup sandbox for isolated preview and iteration.
  • Rewrites imports and stubs external dependencies to make it sandbox-compatible and portable.
  • Embeds the result as an iframe on the canvas to enable visual comparison and variant creation.
  • Activates implicitly when the user asks to redesign, improve, or create variants of any component that already exists in code in the main app.

Quick Start

Ask which component to extract and start the mockup extraction workflow for that component.

Frequently Asked Questions about mockup-extract

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

FAQPage Schema
How do I extract a UI component into a mockup sandbox for isolated preview?▼

The mockup extraction workflow rewrites import paths and stubs external dependencies, making the extracted component sandbox-compatible and portable. This ensures the component renders correctly inside the isolated iframe environment without requiring the full application context.

Can I create design variants for a code-backed component without affecting the main app?▼

Use mockup extraction when you need to redesign, improve, or create variants of any component that already exists in code. It pulls the component into an isolated sandbox to serve as a starting point for visual comparison and design exploration.

What's the best way to preview an extracted UI component on a canvas?▼

No additional dependencies are required to run the mockup extraction workflow. It handles import path rewrites and dependency stubbing internally, ensuring the component renders inside an iframe on the canvas without external setup.

Why do extracted components need dependency stubbing in a sandbox?▼

Extracted components need dependency stubbing because they rely on the main app's external dependencies. Stubbing replaces these dependencies to make the component sandbox-compatible and portable, ensuring it renders correctly inside the isolated iframe environment.

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
marcusgollmarcusgoll
91

mockup-extraction

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

Community
Advanced
tamnguyentommy-rgbtamnguyentommy-rgb
2

mockup-extract

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

Community
Intermediate
AugustEmnaAugustEmna

mockup-extract

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

Community
Intermediate