What problem does it solve? Redesigning an existing UI component by hand-coding an approximation always gets dimensions, colors, fonts, and spacing wrong. This Skill copies the real component source code, along with its dependencies and global styles, into an isolated mockup sandbox so the canvas preview matches the production component exactly. ## Core Features & Use Cases - Dependency tracing and classification: Walks the full import chain and inlines, copies, or stubs each dependency (API calls, context providers, routing, global state). - Import rewriting and style scoping: Rewrites @/ paths to resolve inside the sandbox and captures global CSS variables and fonts in a group-level _group.css file. - Canvas embedding and variants: Type-checks the result, embeds it on the canvas via the sandbox /preview/ URL labeled "Current", and sets up variant files for design iteration. - Use Case: A user says "redesign my navbar" — the Skill extracts the real navbar component from the main app into artifacts/mockup-sandbox/, stubs its auth context and router, and displays it on the canvas as the baseline for new variants. ## Quick Start Extract my current pricing page component onto the canvas so I can create redesign variants of it.
