skilld
All skills
google-labs-code avatar

/stitch-loop

@d891a26 official
by Google Labs Codegoogle-labs-code/stitch-skills8.4k stars
1,105

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

Ask your Agent

Use this Skill: https://skilld.dev/gh/google-labs-code/stitch-skills/stitch-loop

This session only. Nothing lands on disk.

resourcesbaton-schema.md

≈416 tokens on demand. Your agent reads this file only when SKILL.md points to it.

Baton File Schema

The baton file (next-prompt.md) is the communication mechanism between loop iterations. It tells the next agent what to build.

Format

---
page: <filename-without-extension>
---
<prompt-content>

Fields

Frontmatter (YAML)

Field Type Required Description
page string Yes Output filename (without .html extension)

Body (Markdown)

The body contains the full Stitch prompt, which must include:

  1. One-line description with vibe/atmosphere keywords
  2. Design System block (required) — copied from DESIGN.md Section 6
  3. Page Structure — numbered list of sections/components

Example

---
page: achievements
---
A competitive, gamified achievements page with terminal aesthetics.

**DESIGN SYSTEM (REQUIRED):**
- Platform: Web, Desktop-first
- Theme: Dark, minimal, data-focused
- Background: Deep charcoal/near-black (#0f1419)
- Primary Accent: Teal/Cyan (#2dd4bf)
- Text Primary: White (#ffffff)
- Font: Clean sans-serif (Inter, SF Pro, or system default)
- Layout: Centered content, max-width container

**Page Structure:**
1. Header with title "Achievements" and navigation
2. Badge grid showing locked/unlocked states with icons
3. Progress section with milestone bars
4. Footer with links to other pages

Validation Rules

Before completing an iteration, validate your baton:

  • page frontmatter field exists and is a valid filename
  • Prompt includes the design system block
  • Prompt describes a page NOT already in SITE.md sitemap
  • Prompt includes specific page structure details

Source: SKILL.md on GitHub

Third-party checks

No alerts16d5 checks · Risk SAFE
  • Gen Agent Trust Hub16d

    The skill facilitates an autonomous, iterative website-building process using the Stitch design tool. It manages project context via local markdown files and uses a task-passing system to maintain a development loop, with optional visual verification using a local server.

  • Socket16d

    No alerts

  • Snyk16d

    Risk: LOW · No issues

  • Runlayer6mo

    6 files scanned · No issues

  • ZeroLeaks5mo

    Score: 93/100 · 2 sections analyzed

Provenance

Signed by skilld at d891a26. This ties the file your Agent reads to that commit on GitHub. It does not review the instructions.

Last checked against GitHub 2 days ago.

Steadyupdated 7 months ago

Capability

What it can do
Reads files Edits files Runs commands
All 5 allowed tools
stitch*:*chrome*:*ReadWriteBash

Topics

  • Frontend
  • MCP
  • stitch
  • website-builder
  • automation
  • design-system
  • iterative-development
  • html

README badge

README badge for google-labs-code/stitch-skills/stitch-loop

What it does

Teaches agents to autonomously build websites using the Stitch design tool through an iterative loop that reads tasks from a baton file, generates pages, integrates them into the site structure, and writes the next task back. Targets the Stitch MCP server workflow and requires a .stitch/DESIGN.md file for visual consistency across iterations.

Generated from the current SKILL.md.

Frequently asked

What is the baton system and why is it critical?
The baton is a `.stitch/next-prompt.md` file that relays tasks between iterations. Each agent reads the current task, generates a page, and writes the next task to the file. Failing to update it breaks the loop.
Do I need Chrome DevTools MCP Server installed?
No, it's optional. Chrome tools enable visual verification of generated pages against Stitch screenshots, but the skill works without them.
What files must exist before I start?
A `.stitch/DESIGN.md` file (describing the visual design system) and a `.stitch/SITE.md` file (documenting site vision, sitemap, and roadmap). Generate DESIGN.md using the design-md skill if needed.
What happens if a page already exists in the sitemap?
Do not recreate it. Check Section 4 of `.stitch/SITE.md` before generating to avoid overwriting existing pages.
Must the design system block be included in every prompt?
Yes. Section 6 of `.stitch/DESIGN.md` must be copied into the baton prompt every iteration to ensure visual consistency across all generated pages.

Generated from the current SKILL.md. These answers refresh after source changes.