mockup-graduate

To convert a mockup into production-ready code, this Skill analyzes your main app's architecture, maps mockup parts to production equivalents, wires routing and state, migrates assets, and verifies the build.

Mockup graduation handles routing and state integration by analyzing the main application's architecture and mapping the mockup's components to the existing production routing and state management conventions.

The best way to move an approved mockup into an existing application is to run a graduation workflow that transforms the prototype, installs missing dependencies, and conforms the code to project conventions.

Yes, the mockup graduation process automatically runs the linter and tests, and verifies the build to ensure the integrated production code meets the necessary quality and architecture standards.

You can integrate a design-system mockup without manual dependency installation because the graduation workflow identifies and installs all missing dependencies required for production integration.

Mockup to production migration may fail build verification if the mapped routing, state, or styling does not conform to the main app's architecture, or if required dependencies were not installed correctly.