skills.rest
naopensedoit2-design
naopensedoit2-designCOMMUNITY
Explore all skills by this author →
GitHub

mockup-extract

Extract UI components into a mockup sandbox with dependency tracing and iframe preview.

Updated Apr 25, 2026
Search Tags:#dependency tracing#ui extraction#react component#mockup sandbox#design variants#iframe preview#css token scoping
One-click install
npx skills add https://github.com/naopensedoit2-design/Claramente-nao-sou-um-Escritor --skill mockup-extract-naopensedoit2-design
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mockup-extract
Source: https://github.com/naopensedoit2-design/Claramente-nao-sou-um-Escritor/tree/main/.local/skills/mockup-extract
Command: npx skills add https://github.com/naopensedoit2-design/Claramente-nao-sou-um-Escritor --skill mockup-extract-naopensedoit2-design

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill solves the problem of redesigning or iterating on an existing UI by giving you an exact, code-derived copy in a mockup sandbox instead of a hand-crafted approximation.

Core Features & Use Cases

  • Exact component extraction: Pulls the real component implementation and its required dependencies into the mockup/ sandbox for faithful visual output.
  • Dependency-aware rewriting: Traces the import graph, copies inline/copy dependencies, and stubs context, API calls, and routing so the component runs safely in isolation.
  • Canvas preview with variants: Embeds the extracted result as an iframe and supports creating “Current” and variant files to compare designs.

Quick Start

Ask: “Put my existing navbar component onto the canvas and create a redesigned variant starting from the current code.”

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 React component for UI redesign?▼

Extract a React component for UI redesign by pulling the real source code and its dependency graph into a mockup sandbox for visual iteration. It traces imports, stubs contexts and side effects, and scopes CSS tokens for accurate rendering.

What is dependency tracing for UI component extraction?▼

Dependency tracing for UI component extraction is the process of mapping an import graph to copy inline dependencies and safely stub contexts or API calls. This ensures the extracted component runs faithfully in an isolated mockup sandbox.

Can I create design variants from my current source code in a mockup sandbox?▼

Yes, you can create design variants from current source code by copying the extracted component into variant files within the mockup sandbox. This allows you to compare the current UI against redesigned versions using the exact original implementation.

How do I safely isolate React components with complex contexts for visual iteration?▼

Safely isolate React components with complex contexts by stubbing API calls, routing, and side effects during the extraction process. Import paths are rewritten under mockup/src and scoped group CSS applies accurate tokens and fonts for faithful visual output.

Does extracting UI components into a sandbox preserve my original CSS tokens and fonts?▼

Yes, extracting UI components into a sandbox preserves your original CSS tokens and fonts through scoped group CSS. The extraction process ensures accurate visual output by applying the correct design tokens within the iframe preview of the mockup.

Related Skills

Explore More Design & Creative Skills→
Kirankumar2604Kirankumar2604

mockup-extract

Extract UI components with dependency trees into an isolated sandbox environment.

Community
Advanced
KartikSharma4448KartikSharma4448

mockup-extract

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

Community
Intermediate
hajrasarwar11hajrasarwar11

mockup-extract

Pull existing components into a mockup sandbox for isolated preview.

Community
Intermediate
ouzayrouzayr

mockup-extract

Extract UI components into a sandbox and embed them as iframes.

Community
Advanced