What problem does it solve? Approved design mockups live in an isolated sandbox with hardcoded data and stubbed behavior, and manually porting them into the main app risks losing visual fidelity or breaking existing functionality. This Skill automates the graduation process so the approved design ships exactly as reviewed. ## Core Features & Use Cases - Pattern Analysis and Transformation: Reads the approved mockup component, analyzes the main app's routing, state management, styling, and component conventions, then maps mock data to real API calls and sandbox UI imports to the app's component library. - Dependency and Asset Migration: Compares mockup imports against the target package's package.json, installs missing dependencies into the correct workspace package, and copies assets from the sandbox to the app's asset directory. - Verification and Cleanup: Adds routes, runs the linter, restarts the workflow, and optionally removes the graduated mockup from the sandbox after user confirmation. - Use Case: A user approves variant B of a dashboard mockup on the canvas and says "put this in my app" — the Skill graduates it into the main app with real data fetching, loading states, and routing wired up. ## Quick Start Tell the assistant to graduate the approved mockup variant into your main app and wire it up with real data and routing.
