skills.rest
Ayoub-ouederni
Ayoub-ouederniCOMMUNITY
Explore all skills by this author →
GitHub

stitch-loop

Generates website pages iteratively using Stitch MCP tools through a baton-passing loop pattern.

Updated Apr 3, 2026
Search Tags:#html#frontend#design system#mcp#stitch#website generation#autonomous loop
One-click install
npx skills add https://github.com/Ayoub-ouederni/SENTINEL --skill stitch-loop-ayoub-ouederni
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: stitch-loop
Source: https://github.com/Ayoub-ouederni/SENTINEL/tree/main/.claude/skills/stitch-loop
Command: npx skills add https://github.com/Ayoub-ouederni/SENTINEL --skill stitch-loop-ayoub-ouederni

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building a multi-page website with AI-generated designs requires repetitive manual prompting, inconsistent styling across pages, and constant re-explaining of project context. This Skill automates the iteration cycle so each agent run reads the current task, generates a page with Stitch, integrates it into the site, and hands off the next task. ## Core Features & Use Cases - Baton-Passing Loop: Reads the current task from .stitch/next-prompt.md, generates the page, then writes the next task to keep the loop alive across iterations. - Persistent Project Context: Maintains .stitch/SITE.md (vision, sitemap, roadmap), .stitch/DESIGN.md (design system), and .stitch/metadata.json (Stitch project and screen IDs) so every page stays consistent. - Site Integration: Moves generated HTML into site/public/, fixes asset paths, wires navigation links, and optionally verifies pages visually with Chrome DevTools MCP. - Use Case: A developer bootstraps a marketing site, defines the design system once, then lets CI/CD or repeated agent runs build out the contact, about, and product pages one iteration at a time. ## Quick Start Read my .stitch/next-prompt.md file, generate the page using Stitch, integrate it into the site, and prepare the next iteration.

Frequently Asked Questions about stitch-loop

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a website iteratively with Stitch and an AI agent?▼

Set up a .stitch directory with DESIGN.md, SITE.md, and next-prompt.md files, then run the agent repeatedly. Each iteration reads the baton file, generates one page via Stitch MCP tools, integrates it into site/public/, and writes the next task to continue the loop.

What is the next-prompt.md baton file in the Stitch build loop?▼

The baton file is a Markdown file with YAML frontmatter containing a page field, plus a body with the full Stitch prompt including the design system block. It passes the current build task between iterations and must be updated before each run completes.

Does the Stitch build loop require the design-md skill?▼

The design-md skill is recommended but not strictly required. It generates the DESIGN.md file from an existing Stitch screen, which provides the design system block that every baton prompt must include for visual consistency.

Can I use Chrome DevTools MCP to verify Stitch-generated pages?▼

Yes, visual verification is an optional step. If Chrome DevTools MCP tools are available, the agent starts a local server, navigates to the generated page, captures a screenshot, and compares it against the Stitch design screenshot.

Why does the Stitch build loop stall between iterations?▼

The loop stalls when next-prompt.md is not updated before the iteration completes or contains invalid frontmatter. Verify the baton file has a valid page field and includes the design system block copied from DESIGN.md.

Related Skills

Explore More Design & Creative Skills→
PriyanshuSingh06PriyanshuSingh06

design-md

Analyze Stitch projects and generate a semantic DESIGN.md design system document.

Community
Advanced
eliuhadseliuhads
2

stitch-loop

Coordinate Stitch MCP tooling to generate and integrate pages from baton prompts.

Community
Advanced
langgeniuslanggenius

audit-and-fix

Audits accessibility violations, applies source code fixes, and re-audits to verify.

Official
Advanced
haotoolhaotool
2

ui-ux-pro-max

Generate design systems with colors, typography, and accessibility guidelines for web and mobile stacks.

Official
Advanced