Google Stitch — Skill Bundle

This folder contains 6 sub-skills for working with Google Stitch, a design-to-code platform with an MCP server. Each sub-skill has its own SKILL.md with full instructions.

Prerequisites

Most skills require the Stitch MCP Server to be connected. The shadcn-ui skill works independently with the shadcn MCP server or CLI.

🔀 Pipeline Orchestration Protocol (READ THIS FIRST)

YOU MUST follow this protocol. Do not just load one sub-skill and stop. The Stitch bundle is a pipeline — each skill feeds into the next. Your job is to guide the user through the full journey, suggesting the next step after each skill completes.

The Full Pipeline (Design → Code → Video)

┌─────────────┐     ┌─────────────────┐     ┌──────────────┐     ┌───────────────┐     ┌──────────┐
│  design-md  │ ──→ │ enhance-prompt  │ ──→ │ stitch-loop  │ ──→ │   react-      │ ──→ │ remotion │
│ STEP 1      │     │ STEP 2          │     │ STEP 3       │     │ components    │     │ STEP 5   │
│             │     │                 │     │              │     │ STEP 4        │     │          │
│ Extract the │     │ Polish prompts  │     │ Build pages  │     │ Convert HTML  │     │ Create a │
│ design      │     │ with design     │     │ iteratively  │     │ to production │     │ video    │
│ system      │     │ tokens from     │     │ using the    │     │ React/TS      │     │ showcase │
│ → DESIGN.md │     │ DESIGN.md       │     │ baton system │     │ components    │     │ of your  │
│             │     │ → next-prompt   │     │ → full site  │     │ → src/        │     │ screens  │
└─────────────┘     └─────────────────┘     └──────────────┘     └───────────────┘     └──────────┘
                                                                        │
                                                                  ┌─────┴──────┐
                                                                  ▼            │
                                                        ┌──────────────┐       │
                                                        │  shadcn-ui   │       │
                                                        │ COMPANION    │       │
                                                        │              │       │
                                                        │ Add polished │       │
                                                        │ UI component │       │
                                                        │ library      │       │
                                                        └──────────────┘       │

How to Orchestrate

After completing ANY sub-skill, you MUST:

Tell the user what was accomplished
Explain what the next logical step in the pipeline is
Ask if they want to continue to the next step
If yes, load that sub-skill's SKILL.md and proceed

Example flow:

✅ design-md complete → "Your DESIGN.md is ready. Next step: I can polish 
   your first page prompt using enhance-prompt so Stitch generates a 
   higher-quality result. Want to continue?"

✅ enhance-prompt complete → "Your prompt is optimized. Next step: I can 
   send this to Stitch and start building pages with stitch-loop. Ready?"

✅ stitch-loop complete → "Your site pages are built. Two options now:
   1. react-components — Convert these HTML pages into production React/TS
   2. remotion — Create a walkthrough video showcasing the screens
   Which would you like?"

✅ react-components complete → "Your React components are ready. You might 
   also want to:
   • Add shadcn/ui components for polished form inputs, buttons, dialogs
   • Create a remotion walkthrough video of the original designs
   Want either of those?"

Decision Tree: Where to Start

Not every user starts at Step 1. Use this decision tree:

User says...	Start at	Then suggest...
"Build me a site with Stitch"	`design-md` (Step 1)	Full pipeline
"I have a Stitch project, make it consistent"	`design-md` (Step 1)	`enhance-prompt` → `stitch-loop`
"Generate a page with Stitch"	`enhance-prompt` (Step 2)	`stitch-loop`
"I have Stitch HTML, make it React"	`react-components` (Step 4)	`shadcn-ui` for components
"Make a video of my Stitch screens"	`remotion` (Step 5)	Done (standalone)
"I need UI components for my React app"	`shadcn-ui` (Companion)	Done (standalone)
"Improve my Stitch prompt"	`enhance-prompt` (Step 2)	`stitch-loop`
"I already have DESIGN.md, build pages"	`stitch-loop` (Step 3)	`react-components`

When to Use Each Skill (Quick Reference)

Skill	Purpose	Input	Output	Requires
`design-md`	Extract design system from existing screens	Stitch project with screens	`DESIGN.md`	Stitch MCP
`enhance-prompt`	Polish vague prompts into Stitch-optimized ones	User idea + optional `DESIGN.md`	Enhanced prompt / `next-prompt.md`	None (Stitch MCP optional)
`stitch-loop`	Build multi-page sites iteratively	`DESIGN.md` + `next-prompt.md`	Full site in `site/public/`	Stitch MCP
`react-components`	Convert Stitch HTML → production React/TS	Stitch screen HTML	React components in `src/`	Stitch MCP
`remotion`	Create walkthrough videos from screenshots	Stitch project screenshots	Remotion project + `.mp4`	Stitch MCP + Remotion
`shadcn-ui`	Add polished UI component library	Any React/Next.js project	Components in `components/ui/`	shadcn CLI or MCP

Sub-Skill Directory

Read the linked SKILL.md for any sub-skill before using it.

1. `design-md` — Design System Extraction (STEP 1)

→ Read SKILL.md

What: Analyzes Stitch project screens and generates a semantic DESIGN.md file documenting the visual design system (colors, typography, depth, layout, component styles).

When to use:

Starting a new multi-page project and need a design system reference
Onboarding to an existing Stitch project
Need consistent design language across agent-generated screens

Outputs: DESIGN.md file

➡️ Next step: enhance-prompt — Use the DESIGN.md to craft polished prompts for page generation.

2. `enhance-prompt` — Prompt Enhancement (STEP 2)

→ Read SKILL.md

What: Transforms vague UI ideas into polished, structured prompts optimized for Stitch generation. Adds UI/UX keywords, design system context, and page structure.

When to use:

User gives a vague prompt like "make me a login page"
Previous Stitch generation produced poor results
Need to inject DESIGN.md tokens into a prompt

Outputs: Enhanced prompt text or next-prompt.md file

➡️ Next step: stitch-loop — Feed the enhanced prompt into the iterative build loop to generate the actual page.

3. `stitch-loop` — Iterative Build Loop (STEP 3)

→ Read SKILL.md

What: Autonomous baton-passing loop for building multi-page websites. Each iteration reads a task (next-prompt.md), generates a page, integrates it, updates docs, and writes the next task.

When to use:

Building a complete multi-page site from scratch
Need autonomous, continuous page generation
Want a structured sitemap-driven build process

Depends on: design-md (for DESIGN.md), enhance-prompt (for baton prompts) Outputs: Full site in site/public/, updated SITE.md

➡️ Next step: Choose one or both:

react-components — Convert the generated HTML pages into production-ready React/TypeScript components.
remotion — Create a walkthrough video showcasing the finished screens.

4. `react-components` — Design to React (STEP 4)

→ Read SKILL.md

What: Converts Stitch-generated HTML into modular React/TypeScript components with proper props interfaces, mock data layers, and AST-based validation.

When to use:

Converting a Stitch screen into production React code
Need type-safe, modular component extraction from HTML
Want automated validation of component architecture

Outputs: React components in src/, mock data in src/data/mockData.ts

➡️ Next step: Consider:

shadcn-ui — Replace custom UI primitives (buttons, inputs, dialogs) with shadcn/ui components for a polished, accessible component library.
remotion — Create a walkthrough video if you haven't already.

5. `remotion` — Walkthrough Videos (STEP 5)

→ Read SKILL.md

What: Generates walkthrough videos from Stitch project screenshots using Remotion, with smooth transitions, zoom effects, and text overlays.

When to use:

Need a video showcase of designed screens
Want to create a professional app walkthrough
Building a demo reel from Stitch designs

Note: For general Remotion work (not Stitch-specific), use the main remotion skill instead — it has 25+ rule files from Remotion's official repo.

Outputs: Remotion project + rendered .mp4

➡️ This is typically the final step in the pipeline. No automatic next step, but you can suggest sharing/publishing the video.

6. `shadcn-ui` — Component Library (COMPANION)

→ Read SKILL.md

What: Expert guidance for integrating shadcn/ui components — discovery, installation, customization, variants, blocks, and accessibility. Works with the shadcn MCP server or CLI.

When to use:

Setting up shadcn/ui in a new project
Installing or customizing shadcn components
Building forms, data tables, auth layouts, or dashboards
Need component variant patterns with cva
After react-components — replace custom primitives with shadcn/ui

Note: This skill works independently of Stitch. It's useful for any React/Next.js project. Think of it as a companion skill that plugs in alongside the main pipeline, especially after react-components.

Outputs: Installed components in components/ui/, configured components.json

Typical Workflows

Full Pipeline (New Project)

1. design-md      → Analyze an existing screen → get DESIGN.md
2. enhance-prompt → Write a prompt for the next page → inject design tokens
3. stitch-loop    → Generate page → integrate → write next baton → repeat
4. react-components → Convert final HTML pages to production React
5. remotion       → Create a walkthrough video of the finished product

Quick Build (One Page)

1. enhance-prompt → Polish the user's idea into a great prompt
2. Generate directly with Stitch MCP → get HTML
3. react-components → Convert to React (optional)

Design System Only

1. design-md → Document an existing project's visual language

Video Only

1. remotion → Create a walkthrough video from existing Stitch screenshots

Component Library Only

1. shadcn-ui → Set up and customize shadcn/ui components

Standalone Usage

shadcn-ui — Use anytime for React/Next.js UI component work (no Stitch needed)
design-md — Use standalone to document any project's design system
enhance-prompt — Use standalone to improve any UI generation prompt

Acknowledgements

Based on stitch-skills
This is not an officially supported Google product. This project is not eligible for the Google Open Source Software Vulnerability Rewards Program.

stitch

Google Stitch — Skill Bundle

Prerequisites

🔀 Pipeline Orchestration Protocol (READ THIS FIRST)

The Full Pipeline (Design → Code → Video)

How to Orchestrate

Decision Tree: Where to Start

When to Use Each Skill (Quick Reference)

Sub-Skill Directory

1. design-md — Design System Extraction (STEP 1)

2. enhance-prompt — Prompt Enhancement (STEP 2)

3. stitch-loop — Iterative Build Loop (STEP 3)

4. react-components — Design to React (STEP 4)

5. remotion — Walkthrough Videos (STEP 5)

6. shadcn-ui — Component Library (COMPANION)

Typical Workflows

Full Pipeline (New Project)

Quick Build (One Page)

Design System Only

Video Only

Component Library Only

Standalone Usage

Acknowledgements

1. `design-md` — Design System Extraction (STEP 1)

2. `enhance-prompt` — Prompt Enhancement (STEP 2)

3. `stitch-loop` — Iterative Build Loop (STEP 3)

4. `react-components` — Design to React (STEP 4)

5. `remotion` — Walkthrough Videos (STEP 5)

6. `shadcn-ui` — Component Library (COMPANION)