mockup-extract

To pull an existing UI component into a mockup sandbox, the skill extracts the target component from your main app, rewrites imports, and stubs external dependencies to create a self-contained mockup using authentic source material.

Yes, you can create visual variants of your current app components by copying the real source code into a mockup sandbox and embedding the result as an iframe on the canvas, ensuring accurate visual references without hand-coding.

When extracting UI components, the mockup sandbox rewrites imports and stubs external dependencies to keep the mockup self-contained, ensuring the isolated component renders correctly without requiring the entire main application context.

The best way to redesign existing components in your codebase is to extract the real source code into a dedicated mockup sandbox, allowing you to iterate on the authentic source material directly and embed the preview as an iframe on the canvas.

No, you do not need to manually copy dependent assets. When pulling a UI component onto the canvas, the process automatically copies dependent assets alongside rewriting imports to ensure the mockup renders accurately.

You should use a mockup sandbox to isolate design iterations from your main app, preventing unintended side effects. It stubs external dependencies and embeds the result as an iframe, enabling safe visual comparisons and rapid redesigns using authentic source material.