Stitch Loop

1---
2name: stitch-loop
3description: Teaches agents to iteratively build websites using Stitch with an autonomous baton-passing loop pattern
4allowed-tools:
5  - "stitch*:*"
6  - "chrome*:*"
7  - "Read"
8  - "Write"
9  - "Bash"
10---
11 
12# Stitch Build Loop
13 
14You are an **autonomous frontend builder** participating in an iterative site-building loop. Your goal is to generate a page using Stitch, integrate it into the site, and prepare instructions for the next iteration.
15 
16## Overview
17 
18The Build Loop pattern enables continuous, autonomous website development through a "baton" system. Each iteration:
191. Reads the current task from a baton file (`next-prompt.md`)
202. Generates a page using Stitch MCP tools
213. Integrates the page into the site structure
224. Writes the next task to the baton file for the next iteration
23 
24## Prerequisites
25 
26**Required:**
27- Access to the Stitch MCP Server
28- A Stitch project (existing or will be created)
29- A `DESIGN.md` file (generate one using the `design-md` skill if needed)
30- A `SITE.md` file documenting the site vision and roadmap
31 
32**Optional:**
33- Chrome DevTools MCP Server — enables visual verification of generated pages
34 
35## The Baton System
36 
37The `next-prompt.md` file acts as a relay baton between iterations:
38 
39```markdown
40---
41page: about
42---
43A page describing how jules.top tracking works.
44 
45**DESIGN SYSTEM (REQUIRED):**
46[Copy from DESIGN.md Section 6]
47 
48**Page Structure:**
491. Header with navigation
502. Explanation of tracking methodology
513. Footer with links
52```
53 
54**Critical rules:**
55- The `page` field in YAML frontmatter determines the output filename
56- The prompt content must include the design system block from `DESIGN.md`
57- You MUST update this file before completing your work to continue the loop
58 
59## Execution Protocol
60 
61### Step 1: Read the Baton
62 
63Parse `next-prompt.md` to extract:
64- **Page name** from the `page` frontmatter field
65- **Prompt content** from the markdown body
66 
67### Step 2: Consult Context Files
68 
69Before generating, read these files:
70 
71| File | Purpose |
72|------|---------|
73| `SITE.md` | Site vision, **Stitch Project ID**, existing pages (sitemap), roadmap |
74| `DESIGN.md` | Required visual style for Stitch prompts |
75 
76**Important checks:**
77- Section 4 (Sitemap) — Do NOT recreate pages that already exist
78- Section 5 (Roadmap) — Pick tasks from here if backlog exists
79- Section 6 (Creative Freedom) — Ideas for new pages if roadmap is empty
80 
81### Step 3: Generate with Stitch
82 
83Use the Stitch MCP tools to generate the page:
84 
851. **Discover namespace**: Run `list_tools` to find the Stitch MCP prefix
862. **Get or create project**: 
87   - If `stitch.json` exists, use the `projectId` from it
88   - Otherwise, call `[prefix]:create_project` and save the ID to `stitch.json`
893. **Generate screen**: Call `[prefix]:generate_screen_from_text` with:
90   - `projectId`: The project ID
91   - `prompt`: The full prompt from the baton (including design system block)
92   - `deviceType`: `DESKTOP` (or as specified)
934. **Retrieve assets**: Call `[prefix]:get_screen` to get:
94   - `htmlCode.downloadUrl` — Download and save as `queue/{page}.html`
95   - `screenshot.downloadUrl` — Download and save as `queue/{page}.png`
96 
97### Step 4: Integrate into Site
98 
991. Move generated HTML from `queue/{page}.html` to `site/public/{page}.html`
1002. Fix any asset paths to be relative to the public folder
1013. Update navigation:
102   - Find existing placeholder links (e.g., `href="#"`) and wire them to the new page
103   - Add the new page to the global navigation if appropriate
1044. Ensure consistent headers/footers across all pages
105 
106### Step 4.5: Visual Verification (Optional)
107 
108If the **Chrome DevTools MCP Server** is available, verify the generated page:
109 
1101. **Check availability**: Run `list_tools` to see if `chrome*` tools are present
1112. **Start dev server**: Use Bash to start a local server (e.g., `npx serve site/public`)
1123. **Navigate to page**: Call `[chrome_prefix]:navigate` to open `http://localhost:3000/{page}.html`
1134. **Capture screenshot**: Call `[chrome_prefix]:screenshot` to capture the rendered page
1145. **Visual comparison**: Compare against the Stitch screenshot (`queue/{page}.png`) for fidelity
1156. **Stop server**: Terminate the dev server process
116 
117> **Note:** This step is optional. If Chrome DevTools MCP is not installed, skip to Step 5.
118 
119### Step 5: Update Site Documentation
120 
121Modify `SITE.md`:
122- Add the new page to Section 4 (Sitemap) with `[x]`
123- Remove any idea you consumed from Section 6 (Creative Freedom)
124- Update Section 5 (Roadmap) if you completed a backlog item
125 
126### Step 6: Prepare the Next Baton (Critical)
127 
128**You MUST update `next-prompt.md` before completing.** This keeps the loop alive.
129 
1301. **Decide the next page**: 
131   - Check `SITE.md` Section 5 (Roadmap) for pending items
132   - If empty, pick from Section 6 (Creative Freedom)
133   - Or invent something new that fits the site vision
1342. **Write the baton** with proper YAML frontmatter:
135 
136```markdown
137---
138page: achievements
139---
140A competitive achievements page showing developer badges and milestones.
141 
142**DESIGN SYSTEM (REQUIRED):**
143[Copy the entire design system block from DESIGN.md]
144 
145**Page Structure:**
1461. Header with title and navigation
1472. Badge grid showing unlocked/locked states
1483. Progress bars for milestone tracking
149```
150 
151## File Structure Reference
152 
153```
154project/
155├── next-prompt.md      # The baton — current task
156├── stitch.json         # Stitch project ID (persist this!)
157├── DESIGN.md           # Visual design system (from design-md skill)
158├── SITE.md             # Site vision, sitemap, roadmap
159├── queue/              # Staging area for Stitch output
160│   ├── {page}.html
161│   └── {page}.png
162└── site/public/        # Production pages
163    ├── index.html
164    └── {page}.html
165```
166 
167## Orchestration Options
168 
169The loop can be driven by different orchestration layers:
170 
171| Method | How it works |
172|--------|--------------|
173| **CI/CD** | GitHub Actions triggers on `next-prompt.md` changes |
174| **Human-in-loop** | Developer reviews each iteration before continuing |
175| **Agent chains** | One agent dispatches to another (e.g., Jules API) |
176| **Manual** | Developer runs the agent repeatedly with the same repo |
177 
178The skill is orchestration-agnostic — focus on the pattern, not the trigger mechanism.
179 
180## Design System Integration
181 
182This skill works best with the `design-md` skill:
183 
1841. **First time setup**: Generate `DESIGN.md` using the `design-md` skill from an existing Stitch screen
1852. **Every iteration**: Copy Section 6 ("Design System Notes for Stitch Generation") into your baton prompt
1863. **Consistency**: All generated pages will share the same visual language
187 
188## Common Pitfalls
189 
190- ❌ Forgetting to update `next-prompt.md` (breaks the loop)
191- ❌ Recreating a page that already exists in the sitemap
192- ❌ Not including the design system block in the prompt
193- ❌ Leaving placeholder links (`href="#"`) instead of wiring real navigation
194- ❌ Forgetting to persist `stitch.json` after creating a new project
195 
196## Troubleshooting
197 
198| Issue | Solution |
199|-------|----------|
200| Stitch generation fails | Check that the prompt includes the design system block |
201| Inconsistent styles | Ensure DESIGN.md is up-to-date and copied correctly |
202| Loop stalls | Verify `next-prompt.md` was updated with valid frontmatter |
203| Navigation broken | Check all internal links use correct relative paths |
204