murillodutt/stitch/skills/stitch-loop

Stitch Build Loop

You are an autonomous frontend builder participating in an iterative site-building loop. Your goal is to generate a screen using Stitch, convert it to a Vue SFC, integrate it into the Nuxt 4 project, 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 .stitch/next-prompt.md
2. Runs SCE preflight via mcp__cellm-oracle__context_preflight
3. Generates a screen using Stitch MCP tools (with explicit user confirmation)
4. Converts the HTML output to a Vue SFC via the stitch:html-to-vue pipeline
5. Integrates via stitch:ingest (DSE sync) and stitch:to-nuxt (theme alignment)
6. Updates SITE.md, prepares the next baton, and certifies via mcp__cellm-oracle__context_certify

Prerequisites

Required:

• Access to the Stitch MCP Server
• A Stitch project (existing or will be created)
• .stitch/DESIGN.md — visual design system (generate with stitch:design-md if needed)
• .stitch/SITE.md — site vision, sitemap, roadmap

The Baton System

The .stitch/next-prompt.md file acts as a relay baton between iterations. See resources/baton-schema.md for the full schema.

Critical rules:

• The page field in YAML frontmatter determines the component name and route
• The prompt body must include the design system block from .stitch/DESIGN.md Section 6
• You MUST update this file before completing your work to keep the loop alive

Subcommands

| Subcommand | Behavior | |------------|----------| | start | Initialize the loop: create .stitch/SITE.md from resources/site-template.md, create .stitch/metadata.json, write the first baton for the index page | | continue | Execute one full iteration of the loop (default behavior when no argument given) | | status | Display current baton page, SITE.md sitemap completion, and pending roadmap items — no generation |

Execution Protocol

Step 1: Read the Baton

Parse .stitch/next-prompt.md to extract:

• Page name from the page frontmatter field
• Device type from the optional deviceType frontmatter field (default: DESKTOP)
• Prompt content from the markdown body

Step 2: Consult Context

Before generating, read these files and run preflight:

| Source | Purpose | |--------|---------| | .stitch/SITE.md | Site vision, Stitch Project ID, existing pages (sitemap), roadmap | | .stitch/DESIGN.md | Required visual style for Stitch prompts | | mcp__cellm-oracle__context_preflight | SCE governance check — must pass before any generation |

Important checks:

• Section 4 (Sitemap) — do NOT recreate pages already marked [x]
• Section 5 (Roadmap) — pick tasks from here if backlog exists
• Section 6 (Creative Freedom) — use for new page ideas if roadmap is empty

Step 3: Generate with Stitch

1. Get or create project:

   • If .stitch/metadata.json exists, use the projectId from it
   • Otherwise call mcp__stitch__list_projects to check for an existing project, or create one, then call mcp__stitch__get_project to retrieve full details and save to .stitch/metadata.json
   • After generating each screen, call mcp__stitch__get_project again and update the screens map in .stitch/metadata.json

2. Confirm with user: Before generating, call AskUserQuestion to confirm the page name and prompt. Do not auto-trigger generation.

3. Generate screen: Call mcp__stitch__generate_screen_from_text with:

   • projectId: the project ID from metadata
   • prompt: the full prompt from the baton (including design system block)
   • deviceType: value from baton frontmatter, defaults to DESKTOP

4. Retrieve assets: Before downloading, check if .stitch/designs/{page}.html and .stitch/designs/{page}.png already exist:

   • Files exist: Ask the user whether to refresh from Stitch or reuse local files. Only re-download on confirmation.
   • Files absent: Call mcp__stitch__get_screen to retrieve screen metadata, then download:
     • htmlCode.downloadUrl — save as .stitch/designs/{page}.html
     • screenshot.downloadUrl — append =w{width} (using width from screen metadata) before downloading, save as .stitch/designs/{page}.png

Step 4: Consume and Convert

1. Read .stitch/designs/{page}.html
2. Invoke stitch:html-to-vue pipeline to convert the HTML to a Vue SFC
3. Write the resulting component to app/components/Stitch{PagePascal}.vue
4. If the page represents a route, create or update app/pages/{page}.vue to import and render the component
5. Fix any asset paths to reference public/ or use Nuxt's useAssets pattern

Step 5: Integrate

1. Run stitch:ingest to sync design tokens to the DSE (design system engine) — ensures Tailwind semantic tokens stay aligned with the Stitch design theme
2. Run stitch:to-nuxt to apply any theme-level changes to app/assets/css/main.css
3. Update navigation: wire any placeholder links in existing pages to the new route; add the new page to the global nav if appropriate
4. Ensure shared layout components (app/layouts/default.vue, header, footer) remain consistent

Step 6: Prepare the Next Baton

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

1. Decide the next page:
   • Check .stitch/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 following the schema in resources/baton-schema.md
3. Update SITE.md:
   • Mark the completed page [x] in Section 4 (Sitemap)
   • Remove any consumed idea from Section 6
   • Update Section 5 if you completed a backlog item
4. Certify: Call mcp__cellm-oracle__context_certify to record the completed iteration
5. Record outcome: Call mcp__cellm-oracle__context_record_outcome with iteration summary

File Structure Reference

project/
├── .stitch/
│   ├── metadata.json        # Stitch project & screen IDs (persist this!)
│   ├── DESIGN.md            # Visual design system (from stitch:design-md)
│   ├── SITE.md              # Site vision, sitemap, roadmap
│   ├── next-prompt.md       # The baton — current task
│   └── designs/             # Staging area for raw Stitch output
│       ├── {page}.html
│       └── {page}.png
└── app/
    ├── components/
    │   └── Stitch{Page}.vue  # Converted Vue SFCs
    └── pages/
        └── {page}.vue        # Nuxt route pages (import Stitch components)

.stitch/metadata.json Schema

Persists all Stitch identifiers so future iterations can reference them for edits or variants. Populate by calling mcp__stitch__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": "DESKTOP",
  "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": 1440,
      "height": 1249
    }
  },
  "metadata": {
    "userRole": "OWNER"
  }
}

| Field | Description | |-------|-------------| | name | Full resource name (projects/{id}) | | projectId | Stitch project ID | | title | Human-readable project title | | designTheme | Design system tokens: color mode, font, roundness, custom color, saturation | | deviceType | Target device: DESKTOP, MOBILE, TABLET | | screens | Map of page name to 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) |

Design System Integration

This skill works best with the stitch:design-md skill:

1. First-time setup: Generate .stitch/DESIGN.md using stitch:design-md 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 screens will share the same visual language
4. DSE sync: After stitch:ingest, the design tokens from designTheme are reflected in app/assets/css/main.css via --ui-* variables

Troubleshooting

| Issue | Solution | |-------|----------| | Stitch generation fails | Verify the prompt includes the full design system block | | Inconsistent styles | Ensure .stitch/DESIGN.md is current and Section 6 was copied verbatim | | Loop stalls | Check that .stitch/next-prompt.md was updated with valid YAML frontmatter | | Theme drift after ingest | Re-run stitch:to-nuxt to re-align main.css with current design tokens | | Vue SFC has broken paths | Fix asset references to use public/ or Nuxt asset helpers |

NEVER

• Auto-trigger generation without explicit user confirmation via AskUserQuestion
• Skip mcp__cellm-oracle__context_preflight before generation
• Skip mcp__cellm-oracle__context_certify after integration
• Recreate pages already marked [x] in SITE.md Section 4
• Forget to update .stitch/next-prompt.md — this breaks the loop
• Output raw HTML to app/ — always convert to Vue SFC via stitch:html-to-vue
• Skip stitch:ingest after consuming new screens — DSE sync is mandatory