mockup-extract

To extract a UI component for isolated design iteration, this Skill pulls the existing source from your main codebase into a mockup sandbox. It automatically rewrites imports, stubs external dependencies, and renders the result in an iframe for safe visual exploration.

Redesigning existing UI components in a sandbox prevents design drift by using the verified source code rather than hand-coded approximations. This ensures fidelity to the real application while you safely create variants or visual comparisons.

Yes, you can mockup source code components without manually rewriting imports. The extraction process automatically traces dependencies, rewrites import paths, and stubs external modules to ensure the component renders correctly in the isolated environment.

The best way to create UI component variants from an existing app is to extract the real source into a mockup sandbox. This approach provides a verified starting point, allowing you to safely modify and compare designs without affecting the main codebase.

Component extraction works with complex dependencies by automatically stubbing external modules and tracing dependency paths. This ensures the extracted UI component renders accurately in the iframe sandbox without breaking links to the main codebase.

You should avoid using a sandbox for UI component design iteration if your task requires live data integration or runtime side effects that cannot be safely stubbed. The sandbox is optimized for isolated visual exploration rather than full application testing.