Implements autonomous iterative website building with Stitch MCP tools using baton-passing in .stitch/next-prompt.md for continuous page generation and integration.
From stitch-skillsnpx claudepluginhub ctr26/dotfiles --plugin stitch-skillsThis skill is limited to using the following tools:
README.mdexamples/SITE.mdexamples/next-prompt.mdresources/baton-schema.mdresources/site-template.mdGuides Next.js Cache Components and Partial Prerendering (PPR) with cacheComponents enabled. Implements 'use cache', cacheLife(), cacheTag(), revalidateTag(), static/dynamic optimization, and cache debugging.
Migrates code, prompts, and API calls from Claude Sonnet 4.0/4.5 or Opus 4.1 to Opus 4.5, updating model strings on Anthropic, AWS, GCP, Azure platforms.
Analyzes BMad project state from catalog CSV, configs, artifacts, and query to recommend next skills or answer questions. Useful for help requests, 'what next', or starting BMad.
You 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.
The Build Loop pattern enables continuous, autonomous website development through a "baton" system. Each iteration:
.stitch/next-prompt.md)Required:
.stitch/DESIGN.md file (generate one using the design-md skill if needed).stitch/SITE.md file documenting the site vision and roadmapOptional:
The .stitch/next-prompt.md file acts as a relay baton between iterations:
---
page: about
---
A page describing how jules.top tracking works.
**DESIGN SYSTEM (REQUIRED):**
[Copy from .stitch/DESIGN.md Section 6]
**Page Structure:**
1. Header with navigation
2. Explanation of tracking methodology
3. Footer with links
Critical rules:
page field in YAML frontmatter determines the output filename.stitch/DESIGN.mdParse .stitch/next-prompt.md to extract:
page frontmatter fieldBefore generating, read these files:
| File | Purpose |
|---|---|
.stitch/SITE.md | Site vision, Stitch Project ID, existing pages (sitemap), roadmap |
.stitch/DESIGN.md | Required visual style for Stitch prompts |
Important checks:
Use the Stitch MCP tools to generate the page:
list_tools to find the Stitch MCP prefix.stitch/metadata.json exists, use the projectId from it[prefix]:create_project, then call [prefix]:get_project to retrieve full project details, and save them to .stitch/metadata.json (see schema below)[prefix]:get_project again and update the screens map in .stitch/metadata.json with each screen's full metadata (id, sourceScreen, dimensions, canvas position)[prefix]:generate_screen_from_text with:
projectId: The project IDprompt: The full prompt from the baton (including design system block)deviceType: DESKTOP (or as specified).stitch/designs/{page}.html and .stitch/designs/{page}.png already exist:
htmlCode.downloadUrl — Download and save as .stitch/designs/{page}.htmlscreenshot.downloadUrl — Append =w{width} to the URL before downloading, where {width} is the width value from the screen metadata (Google CDN serves low-res thumbnails by default). Save as .stitch/designs/{page}.png.stitch/designs/{page}.html to site/public/{page}.htmlhref="#") and wire them to the new pageIf the Chrome DevTools MCP Server is available, verify the generated page:
list_tools to see if chrome* tools are presentnpx serve site/public)[chrome_prefix]:navigate to open http://localhost:3000/{page}.html[chrome_prefix]:screenshot to capture the rendered page.stitch/designs/{page}.png) for fidelityNote: This step is optional. If Chrome DevTools MCP is not installed, skip to Step 5.
Modify .stitch/SITE.md:
[x]You MUST update .stitch/next-prompt.md before completing. This keeps the loop alive.
.stitch/SITE.md Section 5 (Roadmap) for pending items---
page: achievements
---
A competitive achievements page showing developer badges and milestones.
**DESIGN SYSTEM (REQUIRED):**
[Copy the entire design system block from .stitch/DESIGN.md]
**Page Structure:**
1. Header with title and navigation
2. Badge grid showing unlocked/locked states
3. Progress bars for milestone tracking
project/
├── .stitch/
│ ├── metadata.json # Stitch project & screen IDs (persist this!)
│ ├── DESIGN.md # Visual design system (from design-md skill)
│ ├── SITE.md # Site vision, sitemap, roadmap
│ ├── next-prompt.md # The baton — current task
│ └── designs/ # Staging area for Stitch output
│ ├── {page}.html
│ └── {page}.png
└── site/public/ # Production pages
├── index.html
└── {page}.html
.stitch/metadata.json SchemaThis file persists all Stitch identifiers so future iterations can reference them for edits or variants. Populate it by calling [prefix]:get_project after creating a project or generating screens.
{
"name": "projects/6139132077804554844",
"projectId": "6139132077804554844",
"title": "My App",
"visibility": "PRIVATE",
"createTime": "2026-03-04T23:11:25.514932Z",
"updateTime": "2026-03-04T23:34:40.400007Z",
"projectType": "PROJECT_DESIGN",
"origin": "STITCH",
"deviceType": "MOBILE",
"designTheme": {
"colorMode": "DARK",
"font": "INTER",
"roundness": "ROUND_EIGHT",
"customColor": "#40baf7",
"saturation": 3
},
"screens": {
"index": {
"id": "d7237c7d78f44befa4f60afb17c818c1",
"sourceScreen": "projects/6139132077804554844/screens/d7237c7d78f44befa4f60afb17c818c1",
"x": 0,
"y": 0,
"width": 390,
"height": 1249
},
"about": {
"id": "bf6a3fe5c75348e58cf21fc7a9ddeafb",
"sourceScreen": "projects/6139132077804554844/screens/bf6a3fe5c75348e58cf21fc7a9ddeafb",
"x": 549,
"y": 0,
"width": 390,
"height": 1159
}
},
"metadata": {
"userRole": "OWNER"
}
}
| Field | Description |
|---|---|
name | Full resource name (projects/{id}) |
projectId | Stitch project ID (from create_project or get_project) |
title | Human-readable project title |
designTheme | Design system tokens: color mode, font, roundness, custom color, saturation |
deviceType | Target device: MOBILE, DESKTOP, TABLET |
screens | Map of page name → screen object. Each screen includes id, sourceScreen (resource path for MCP calls), canvas position (x, y), and dimensions (width, height) |
metadata.userRole | User's role on the project (OWNER, EDITOR, VIEWER) |
The loop can be driven by different orchestration layers:
| Method | How it works |
|---|---|
| CI/CD | GitHub Actions triggers on .stitch/next-prompt.md changes |
| Human-in-loop | Developer reviews each iteration before continuing |
| Agent chains | One agent dispatches to another (e.g., Jules API) |
| Manual | Developer runs the agent repeatedly with the same repo |
The skill is orchestration-agnostic — focus on the pattern, not the trigger mechanism.
This skill works best with the design-md skill:
.stitch/DESIGN.md using the design-md skill from an existing Stitch screen.stitch/next-prompt.md (breaks the loop).stitch/DESIGN.md in the prompthref="#") instead of wiring real navigation.stitch/metadata.json after creating a new project| Issue | Solution |
|---|---|
| Stitch generation fails | Check that the prompt includes the design system block |
| Inconsistent styles | Ensure .stitch/DESIGN.md is up-to-date and copied correctly |
| Loop stalls | Verify .stitch/next-prompt.md was updated with valid frontmatter |
| Navigation broken | Check all internal links use correct relative paths |