mockup-graduate

Migrate an approved mockup from sandbox into the main application.

Updated Apr 1, 2026

Search Tags:#production #integration #routing #component #mockup #ui-library #graduate

Ready to run

npx skills add https://github.com/koya-alt/Catalyst --skill mockup-graduate-koya-alt

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: mockup-graduate
Source: https://github.com/koya-alt/Catalyst/tree/main/local/skills/mockup-graduate
Command: npx skills add https://github.com/koya-alt/Catalyst --skill mockup-graduate-koya-alt

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Move an approved mockup from the mockup sandbox into the main app and transform it into production-ready code that aligns with the project conventions.

Core Features & Use Cases

Identify the approved mockup variant to graduate from the sandbox.
Analyze the main application's routing, data flow, and UI component library to map mockup elements to production patterns.
Transform the mockup prototype into production components, wiring routes and state as needed, and integrate assets.
Install any missing dependencies, update assets, and validate the integration with linting and basic rendering checks.

Quick Start

Confirm which mockup variant to graduate and initiate the graduation workflow to produce a production-ready component in the main app.

Frequently Asked Questions about mockup-graduate

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I convert a mockup into production-ready components?▼

To convert a mockup into production-ready components, the Skill analyzes your main app's routing and UI library to map mockup elements to production patterns. It then installs missing dependencies, places the component, and verifies routing and linting.

What is the best way to migrate a prototype into a main application?▼

Migrating a prototype into a main application requires analyzing the app's conventions and mapping prototype parts to production equivalents. The workflow transforms the mockup, wires routes and state, integrates assets, and validates the final integration.

How do I map UI mockup parts to an existing component library?▼

Mapping UI mockup parts to an existing component library involves analyzing the main application's UI patterns and matching mockup elements to production equivalents. The process adapts the prototype to the app's conventions and wires the necessary state and routing.

Can I install missing dependencies when integrating a mockup?▼

Yes, you can install missing dependencies when integrating a mockup. The graduation workflow identifies required packages during the mapping process, installs them, updates assets, and validates the integration to ensure the component renders correctly.

Does graduating a mockup verify routing and linting automatically?▼

Graduating a mockup verifies routing and linting automatically as part of the final validation phase. After placing the component and wiring routes, the workflow runs linting and basic rendering checks to confirm the production integration is stable.