mockup-extract

Extract UI components into a sandbox by tracing dependencies and rewriting imports.

18|4|Updated Apr 3, 2026
One-click install
npx skills add https://github.com/DevHive1/DevHive-Cli --skill mockup-extract-devhive1
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: mockup-extract
Source: https://github.com/DevHive1/DevHive-Cli/tree/main/skills/mockup-extract
Command: npx skills add https://github.com/DevHive1/DevHive-Cli --skill mockup-extract-devhive1

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill solves the problem of visual drift and manual reconstruction by allowing you to pull existing code components directly into a sandbox environment for design iteration and prototyping.

Core Features & Use Cases

  • Component Extraction: Automatically traces dependencies, rewrites imports, and stubs external services to isolate UI components.
  • Design Iteration: Enables safe experimentation with variants, redesigns, and improvements without affecting the production codebase.
  • Use Case: When you need to redesign a complex dashboard component, use this skill to extract the current implementation into the mockup sandbox, allowing you to iterate on the UI while maintaining exact dimensions and styling.

Quick Start

Activate the mockup-extract skill to pull the current navigation bar component into the sandbox for redesign.

Frequently Asked Questions about mockup-extract

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

FAQPage Schema
How do I extract UI components from an existing codebase into a sandbox for design iteration?

You can extract UI components into an isolated sandbox by automatically tracing dependency trees, rewriting import paths, and stubbing external services to ensure functional rendering for visual prototyping. This preserves original styling and layout logic during design iteration.

Why does manual UI component reconstruction cause visual drift during prototyping?

Manual UI component reconstruction causes visual drift because reproducing complex layouts by hand often loses exact dimensions and styling. Automatically pulling existing code components directly into a mockup sandbox preserves original layout logic and prevents visual mismatch.

Can I redesign complex dashboard components without affecting the production codebase?

Yes, you can redesign complex dashboard components without affecting the production codebase by extracting the current implementation into an isolated mockup sandbox. This enables safe experimentation with design variants while maintaining exact dimensions and styling.

How do external services and dependencies work when isolating components for visual prototyping?

When isolating components for visual prototyping, external services are stubbed out and dependency trees are traced automatically. Import paths are rewritten to ensure the extracted UI components render functionally within the isolated sandbox environment.

What is the best way to create design variants from existing application components?

The best way to create design variants from existing application components is to extract them into an isolated sandbox environment. This approach traces dependencies, rewrites imports, and stubs external services, allowing safe experimentation with redesigns while preserving original styling.

Does extracting UI components for mockups preserve the original styling and layout logic?

Yes, extracting UI components for mockups preserves the original styling and layout logic. The extraction process traces dependency trees and rewrites import paths to ensure the components render functionally in the sandbox with their exact dimensions intact.