coding-fe

Convert approved Stitch artifacts into Next.js route slices with mock data.

4|Updated Apr 8, 2026

Search Tags:#ui #frontend #next.js #design-to-code #stitch #route-slice

Ready to run

npx skills add https://github.com/thuandiep1707/stitch-skill-copilot --skill coding-fe-thuandiep1707

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: coding-fe
Source: https://github.com/thuandiep1707/stitch-skill-copilot/tree/main/skills/coding-fe
Command: npx skills add https://github.com/thuandiep1707/stitch-skill-copilot --skill coding-fe-thuandiep1707

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill eliminates the manual effort of turning approved Stitch design artifacts into production-ready Next.js UI code, enabling faster delivery of new route slices, pages, and components.

Core Features & Use Cases

Create-only design-to-code: converts approved Stitch outputs into thin route files, feature components, mock data, and interfaces when the target does not yet exist in src/.
Route slicing and page assembly: builds route-ready UI from .stitch/metadata.json using desktop/mobile artifact pairs.
Validation and parity: validates layout parity against Stitch HTML/PNG exports and adheres to project tokens and design system rules.

Quick Start

Provide the approved Stitch round and artifacts, then run the coding-fe skill to generate a new Next.js route slice.

Frequently Asked Questions about coding-fe

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

FAQPage Schema

How do I convert Stitch designs into Next.js UI code?▼

To convert Stitch designs into Next.js UI code, provide approved .stitch artifacts and run the conversion. It reads .stitch/metadata.json to generate production-ready route slices, feature components, and mock data for your project.

What is a route slice in Next.js generated from design artifacts?▼

A route slice in Next.js is a route-ready UI assembled from .stitch/metadata.json using desktop and mobile artifact pairs. It consists of thin layout files and feature components built when the target route does not yet exist in the src/ directory.

How do I validate design parity when converting Stitch HTML to Next.js?▼

To validate design parity when converting Stitch HTML to Next.js, the generated UI is checked against Stitch HTML and PNG exports. This ensures the output thin layout files and components match the approved design artifacts visually and structurally.

Do I need a design token file to generate Next.js components from Stitch?▼

Yes, you need a design token file to generate Next.js components from Stitch. The process enforces design tokens from .stitch/DESIGN.md and project standards to ensure the output route slices match the approved design system rules.

Can I use this to update existing Next.js pages if the target already exists in src?▼

No, you cannot use this to update existing Next.js pages if the target already exists in src. It is a create-only design-to-code process that builds route-ready UI exclusively when the target route slice does not yet exist in the source directory.