Agent-Skills.md

Agent Skills: Stitch Build Loop

Teaches agents to iteratively build websites using Stitch with an autonomous baton-passing loop pattern

UncategorizedID: stars-end/agent-skills/stitch-loop

Repository

stars-end/agent-skills
stars-end

Install this agent skill to your local

pnpm dlx add-skill https://github.com/stars-end/agent-skills/tree/HEAD/stitch-loop

Skill Files

Browse the full folder contents for stitch-loop.

Download Skill

Loading file tree…

stitch-loop/SKILL.md

Skill Metadata

Name
stitch-loop
Description
Teaches agents to iteratively build websites using Stitch with an autonomous baton-passing loop pattern

Stitch Build Loop

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.

Overview

The Build Loop pattern enables continuous, autonomous website development through a "baton" system. Each iteration:

  1. Reads the current task from a baton file (next-prompt.md)
  2. Generates a page using Stitch MCP tools
  3. Integrates the page into the site structure
  4. Writes the next task to the baton file for the next iteration

Prerequisites

Required:

  • Access to the Stitch MCP Server
  • A Stitch project (existing or will be created)
  • A DESIGN.md file (generate one using the design-md skill if needed)
  • A SITE.md file documenting the site vision and roadmap

Optional:

  • Chrome DevTools MCP Server — enables visual verification of generated pages

The Baton System

The 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 DESIGN.md Section 6]

**Page Structure:**
1. Header with navigation
2. Explanation of tracking methodology
3. Footer with links

Critical rules:

  • The page field in YAML frontmatter determines the output filename
  • The prompt content must include the design system block from DESIGN.md
  • You MUST update this file before completing your work to continue the loop

Execution Protocol

Step 1: Read the Baton

Parse next-prompt.md to extract:

  • Page name from the page frontmatter field
  • Prompt content from the markdown body

Step 2: Consult Context Files

Before generating, read these files:

| File | Purpose | |------|---------| | SITE.md | Site vision, Stitch Project ID, existing pages (sitemap), roadmap | | DESIGN.md | Required visual style for Stitch prompts |

Important checks:

  • Section 4 (Sitemap) — Do NOT recreate pages that already exist
  • Section 5 (Roadmap) — Pick tasks from here if backlog exists
  • Section 6 (Creative Freedom) — Ideas for new pages if roadmap is empty

Step 3: Generate with Stitch

Use the Stitch MCP tools to generate the page:

  1. Discover namespace: Run list_tools to find the Stitch MCP prefix
  2. Get or create project:
    • If stitch.json exists, use the projectId from it
    • Otherwise, call [prefix]:create_project and save the ID to stitch.json
  3. Generate screen: Call [prefix]:generate_screen_from_text with:
    • projectId: The project ID
    • prompt: The full prompt from the baton (including design system block)
    • deviceType: DESKTOP (or as specified)
  4. Retrieve assets: Call [prefix]:get_screen to get:
    • htmlCode.downloadUrl — Download and save as queue/{page}.html
    • screenshot.downloadUrl — Download and save as queue/{page}.png

Step 4: Integrate into Site

  1. Move generated HTML from queue/{page}.html to site/public/{page}.html
  2. Fix any asset paths to be relative to the public folder
  3. Update navigation:
    • Find existing placeholder links (e.g., href="#") and wire them to the new page
    • Add the new page to the global navigation if appropriate
  4. Ensure consistent headers/footers across all pages

Step 4.5: Visual Verification (Optional)

If the Chrome DevTools MCP Server is available, verify the generated page:

  1. Check availability: Run list_tools to see if chrome* tools are present
  2. Start dev server: Use Bash to start a local server (e.g., npx serve site/public)
  3. Navigate to page: Call [chrome_prefix]:navigate to open http://localhost:3000/{page}.html
  4. Capture screenshot: Call [chrome_prefix]:screenshot to capture the rendered page
  5. Visual comparison: Compare against the Stitch screenshot (queue/{page}.png) for fidelity
  6. Stop server: Terminate the dev server process

Note: This step is optional. If Chrome DevTools MCP is not installed, skip to Step 5.

Step 5: Update Site Documentation

Modify SITE.md:

  • Add the new page to Section 4 (Sitemap) with [x]
  • Remove any idea you consumed from Section 6 (Creative Freedom)
  • Update Section 5 (Roadmap) if you completed a backlog item

Step 6: Prepare the Next Baton (Critical)

You MUST update next-prompt.md before completing. This keeps the loop alive.

  1. Decide the next page:
    • Check SITE.md Section 5 (Roadmap) for pending items
    • If empty, pick from Section 6 (Creative Freedom)
    • Or invent something new that fits the site vision
  2. Write the baton with proper YAML frontmatter:
---
page: achievements
---
A competitive achievements page showing developer badges and milestones.

**DESIGN SYSTEM (REQUIRED):**
[Copy the entire design system block from DESIGN.md]

**Page Structure:**
1. Header with title and navigation
2. Badge grid showing unlocked/locked states
3. Progress bars for milestone tracking

File Structure Reference

project/
├── next-prompt.md      # The baton — current task
├── stitch.json         # Stitch project ID (persist this!)
├── DESIGN.md           # Visual design system (from design-md skill)
├── SITE.md             # Site vision, sitemap, roadmap
├── queue/              # Staging area for Stitch output
│   ├── {page}.html
│   └── {page}.png
└── site/public/        # Production pages
    ├── index.html
    └── {page}.html

Orchestration Options

The loop can be driven by different orchestration layers:

| Method | How it works | |--------|--------------| | CI/CD | GitHub Actions triggers on 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.

Design System Integration

This skill works best with the design-md skill:

  1. First time setup: Generate DESIGN.md using the design-md skill from an existing Stitch screen
  2. Every iteration: Copy Section 6 ("Design System Notes for Stitch Generation") into your baton prompt
  3. Consistency: All generated pages will share the same visual language

Common Pitfalls

  • ❌ Forgetting to update next-prompt.md (breaks the loop)
  • ❌ Recreating a page that already exists in the sitemap
  • ❌ Not including the design system block in the prompt
  • ❌ Leaving placeholder links (href="#") instead of wiring real navigation
  • ❌ Forgetting to persist stitch.json after creating a new project

Troubleshooting

| Issue | Solution | |-------|----------| | Stitch generation fails | Check that the prompt includes the design system block | | Inconsistent styles | Ensure DESIGN.md is up-to-date and copied correctly | | Loop stalls | Verify next-prompt.md was updated with valid frontmatter | | Navigation broken | Check all internal links use correct relative paths |