stitch

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:

1. Tell the user what was accomplished
2. Explain what the next logical step in the pipeline is
3. Ask if they want to continue to the next step
4. 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.