skills.rest
not-subhu
not-subhuCOMMUNITY
Explore all skills by this author →
GitHub

mockup-extract

Extract UI components from an application codebase and stub dependencies for mockups.

Updated Jun 30, 2026
Search Tags:#dependency management#ui component#code extraction#mockup#iframe embedding
One-click install
npx skills add https://github.com/not-subhu/screech --skill mockup-extract-not-subhu
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mockup-extract
Source: https://github.com/not-subhu/screech/tree/main/.local/skills/mockup-extract
Command: npx skills add https://github.com/not-subhu/screech --skill mockup-extract-not-subhu

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

The Skill solves the challenge of efficiently extracting existing UI components from the main application to be used in mockups, enabling redesign, improvement, or creation of variants without needing to manually recreate these components from scratch.

Core Features & Use Cases

  • Component Extraction: Copies existing UI components and their dependencies into a mockup sandbox.
  • Dependency Stubbing: Rewrites imports and stubs external dependencies to keep mockups isolated from the main app.
  • Embedding in Canvas: Embeds the component in an iframe on the canvas for direct interaction.
  • Use Case: For example, a UI designer could extract a navigation bar from the main application and immediately view and edit it in the mockup environment for redesigning.

Quick Start

Extract the navbar component from the main app into the mockup for redesign using the mockup-extract skill.

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 application for mockup redesign?▼

Extracting UI components for mockup redesign involves copying the target component from your codebase, stubbing external dependencies, and rewriting imports to isolate it in a sandbox without modifying the original source code.

What is the best way to isolate a UI component without affecting the main codebase?▼

The best way to isolate a UI component without affecting the main codebase is to copy it into a mockup sandbox, stub its external dependencies, and rewrite imports to ensure it functions independently of the source.

Can I embed extracted UI components into an iframe for direct interaction?▼

Yes, you can embed extracted UI components into an iframe. The Skill rewrites imports and stubs dependencies to render the component directly on a canvas for immediate interaction and redesign.

How do I handle dependency management when extracting components for a mockup?▼

When extracting components for a mockup, dependency management is handled by stubbing external dependencies and rewriting imports, ensuring the extracted UI component remains fully isolated and functional within the mockup sandbox.

Does extracting a component for a mockup modify my original source code?▼

No, extracting a component for a mockup does not modify your original source code. The Skill copies the existing UI component and its dependencies into a separate mockup sandbox to preserve the primary application codebase.

Related Skills

Explore More Software Engineering Skills→
ilandahanilandahan
9

atomic-design

Extract Figma design tokens and scaffold atomic UI components.

Community
Advanced
marcusgollmarcusgoll
91

mockup-extraction

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

Community
Advanced
ouzayrouzayr

design

Generate React-Vite frontends and delegate design refinements to a subagent.

Community
Advanced
PixoraftPixoraft

mockup-extract

Extract UI components into a mockup sandbox with rewritten import paths.

Community
Advanced