skills.rest
KhaledMKhaled
KhaledMKhaledCOMMUNITY
Explore all skills by this author →
GitHub

mockup-graduate

Graduate approved mockups into production app code with routing and verification.

Updated Dec 10, 2025
Search Tags:#app architecture#component migration#production hardening#dependency installation#mockup graduation#ui transformation#routing integration
One-click install
npx skills add https://github.com/KhaledMKhaled/FodaStore --skill mockup-graduate-khaledmkhaled
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mockup-graduate
Source: https://github.com/KhaledMKhaled/FodaStore/tree/main/.local/skills/mockup-graduate
Command: npx skills add https://github.com/KhaledMKhaled/FodaStore --skill mockup-graduate-khaledmkhaled

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill removes the gap between an approved UI mockup and working, production-ready app code by transforming the design into components that match the app’s architecture, dependencies, and conventions.

Core Features & Use Cases

  • Integrate approved mockups into the main app by reading the selected mockup variant from the sandbox and graduating it into the app’s component structure.
  • Preserve visual fidelity while adapting implementation details so design intent remains intact while data sources, navigation, state, auth, loading/error states, and accessibility are made production-safe.
  • Verify integration end-to-end by ensuring dependencies and imports align with the app, updating routing when needed, and confirming the component renders correctly.

Quick Start

Ask the AI to integrate the approved mockup by saying: "Use this one and put this design in my app."

Frequently Asked Questions about mockup-graduate

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

FAQPage Schema
How do I turn an approved UI mockup into production app code?▼

Graduating an approved mockup into production code requires reading the selected mockup variant from the sandbox, analyzing main-app conventions, transforming UI primitives to match app patterns, and updating routing plus running verification checks.

What does UI transformation involve when integrating a mockup into a main application?▼

UI transformation preserves visual fidelity while adapting implementation details so data sources, navigation, state, auth, loading, and error states are made production-safe within the main application architecture.

How do I install dependencies and update routing for a migrated component?▼

Dependency installation and routing integration happen by analyzing main-app conventions, ensuring imports align with the app, updating routing configurations, and confirming the component renders correctly end-to-end.

Can I use this skill to migrate a mockup component without matching app architecture conventions?▼

No, this skill requires analyzing main-app conventions to transform mockup data and UI primitives to match app patterns, ensuring the migrated component aligns with the existing app architecture before routing integration and verification.

What are the limitations when hardening a mockup for production?▼

Production hardening of a mockup requires an approved mockup variant in the sandbox to graduate it into app code; without an approved mockup, it cannot transform UI primitives or update routing for the main application.

Related Skills

Explore More Software Engineering Skills→
gopforevergopforever

mockup-extract

Extract UI components into a mockup sandbox with rewritten imports and stubbed dependencies.

Community
Advanced
lucidlabs-hqlucidlabs-hq
2

pre-production

Automate pre-production security and quality checks for software deployments.

Official
Advanced
lostitonce420-beeplostitonce420-beep

mockup-graduate

Graduate an approved mockup into production-ready app code.

Community
Advanced
hajrasarwar11hajrasarwar11

mockup-graduate

Graduate approved mockups into the main application with routing and state wiring.

Community
Advanced