Mockup Extract Skill

Pull an existing component from the main app into the artifacts/mockup-sandbox/ sandbox so it can be previewed on the canvas and used as a starting point for design iteration.

When to Use

Activate this skill when the user:

• Wants to see an existing component on the canvas as a visual reference ("show my homepage on the board", "put my current settings page on the canvas")
• Wants to redesign an existing component ("redesign my navbar", "redo my pricing page", "improve the onboarding flow")
• Wants to create variants starting from an existing component
• Needs to compare their current design against new alternatives

Important: This skill must also be activated implicitly when the user asks to redesign, improve, or create variants of something that already exists as code in the main app — even if they don't say "extract". If the component exists in the codebase, extract it first. Never rebuild an existing component from scratch by hand-coding approximations; you will get exact dimensions, colors, spacing, opacity values, and other details wrong. The real source code has the correct values.

Subagent Guidance

If you need to parallelize extraction (e.g., extract multiple components at once), use a GENERAL subagent — never a DESIGN subagent. Extraction is an engineering task (import graph tracing, dependency stubbing, path rewriting) that requires codebase navigation, not creative visual output.