What problem does it solve? Approved design mockups live in an isolated sandbox with hardcoded data and stubbed interactions, 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 app state. - 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. - Routing and Verification: Adds routes for new pages, updates imports for replaced components, runs the linter, and restarts the workflow to confirm correct rendering. - Use Case: A user approves variant B of a dashboard mockup on the canvas and says "use this one" — the Skill graduates it into the main app with real data fetching, loading states, and error handling while preserving the exact visual design. ## Quick Start Tell the assistant to graduate the approved mockup from the sandbox into your main app, for example by saying "I like variant B, integrate it into my app".
