mockup-graduate

Migrate approved mockups from the sandbox into the main codebase.

Updated Mar 18, 2026
One-click install
npx skills add https://github.com/se1111th/VisionPort-Visual-Refresh_SRC --skill mockup-graduate-se1111th
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mockup-graduate
Source: https://github.com/se1111th/VisionPort-Visual-Refresh_SRC/tree/main/.local/skills/mockup-graduate
Command: npx skills add https://github.com/se1111th/VisionPort-Visual-Refresh_SRC --skill mockup-graduate-se1111th

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Move an approved mockup from the mockup sandbox into the main app. Transform the self-contained prototype into production code that matches the app's conventions.

Core Features & Use Cases

  • Analyze the approved mockup against the main app's patterns (routing, state management, styling) and plan the production transformation.
  • Transform the mockup into production-ready components, wire up navigation and state, and install any missing dependencies.
  • Verify integration with linting, tests, and quick validation to ensure end-to-end functionality in the main app.
  • Use cases include graduating a single mockup variant or multiple variants from the mockup sandbox into the main codebase.

Quick Start

Approve a mockup variant and say "graduate this mockup" to initiate production integration.

Frequently Asked Questions about mockup-graduate

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

FAQPage Schema
How do I migrate a frontend mockup into a production codebase?▼

To migrate a frontend mockup into a production codebase, you analyze the approved prototype against the main app's conventions, transform it into production-ready components, wire up navigation and state, and verify the integration through linting and runtime checks.

What does graduating a mockup into production code involve?▼

Graduating a mockup involves transforming a self-contained prototype into production code by pattern matching with the app's conventions, installing missing dependencies, wiring up routes and state, and validating the integrated component.

Can I graduate multiple mockup variants into the main application at once?▼

Yes, you can graduate multiple mockup variants from the mockup sandbox into the main codebase, analyzing design decisions and coordinating dependencies for each variant during the production integration process.

How do I wire up routing and state when moving a mockup to production?▼

Wiring up routing and state when moving a mockup to production requires pattern matching with the main app's existing conventions, installing any missing dependencies, and verifying the integration through linting and runtime checks.

How do I verify a component after integrating it from a mockup sandbox?▼

You verify an integrated component after graduating it from a mockup sandbox by running linting, tests, and quick validations to ensure end-to-end functionality and proper integration within the main application.