mockup-extract

To extract UI components for design iteration, this Skill copies the target component and its dependencies into a dedicated sandbox, rewrites import paths, and stubs external dependencies to isolate the visual output on a canvas.

Yes, you can redesign an existing navbar safely by pulling the actual source code into an isolated mockup sandbox, ensuring modifications and variant creation do not impact the main application.

The best way to isolate a frontend component for visual reference is to extract the actual source code into a sandbox, which manages dependencies by copying or stubbing them and embeds the component as an iframe on a canvas.

mockup-extract prioritizes using actual source code from your codebase over manual approximations, copying components and managing their dependencies to ensure accurate visual fidelity during design iteration.

When extracting UI components to a sandbox, component dependencies are managed by copying them directly or stubbing external dependencies, and import paths are rewritten to maintain isolation within the sandbox environment.

When stubbing external dependencies in a mockup sandbox, complex interactions relying on those external services may not function fully, as the isolation process prioritizes visual fidelity and structural extraction over complete runtime behavior.