site-md — Claude Code skill: what it does, how to install
Generates a .stitch/SITE.md constitution file from requirements or project briefs for the Stitch Build Loop.
npx skills add google-labs-code/stitch-skills --skill site-md -a claude-codeWhat site-md does
The skill acts as a product owner and architect. It reads your project description and creates a dedicated .stitch/SITE.md file at the repository root. This document serves as long-term memory for coding agents, keeping project scope and visual direction aligned across build runs.
The generated constitution establishes directory layout. By default, it maps assets to site/public/ while new output sits in queue/ pending review. It also builds an initial sitemap starting with index.html and organizes backlog items into priorities.
You need a written brief before running it. Without input requirements, the agent cannot extract architecture rules or user flows. If the .stitch/ directory is missing, the skill creates it automatically.
What it helps with
- synthesize a project constitution for the Stitch Build Loop
- map out directory layout and file asset flow between
queue/andsite/public/ - parse requirements into a prioritized development backlog
- establish core identity and visual direction inside
.stitch/SITE.md
Example prompts for the agent
- Read `requirements.md` and generate `.stitch/SITE.md`
- Analyze `brief.txt` and create the project constitution for Stitch
- Set up the `.stitch/SITE.md` architecture file from our project brief
How to install site-md
1Skills CLI (Vercel)
npx skills add google-labs-code/stitch-skills --skill site-md -a claude-code2Manually: put the files in place
~/.claude/skills/site-md/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/site-md/
1Skills CLI (Vercel)
npx skills add google-labs-code/stitch-skills --skill site-md -a codex2Manually: put the files in place
.agents/skills/site-md/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add google-labs-code/stitch-skills --skill site-md -a cursor2Manually: put the files in place
.cursor/skills/site-md/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install google-labs-code/stitch-skills site-md2Manually: put the files in place
.github/skills/site-md/SKILL.md1Skills CLI (Vercel)
npx skills add google-labs-code/stitch-skills --skill site-md -a gemini-cli2Platform CLI
gemini skills install https://github.com/google-labs-code/stitch-skills --path plugins/stitch-utilities/skills/site-mdManually: put the files in place
.devin/skills/site-md/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add google-labs-code/stitch-skills --skill site-md -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
From the same set15
The whole set →Similar
Questions about site-md
How do I install site-md in Claude Code?
Run npx skills add google-labs-code/stitch-skills --skill site-md -a claude-code.
What does the site-md skill do?
It reads project briefs and synthesizes a .stitch/SITE.md file to guide coding agents on scope, structure, and backlog tasks.
What prerequisites are required before using site-md?
You need access to a project description or brief document. If you already created a project in Google Stitch, you can also provide your Stitch Project ID.
Source text
SKILL.md · Apache-2.0
--- name: site-md description: Analyze a project description or site requirements and synthesize a project constitution into SITE.md for the Stitch Build Loop allowed-tools: - "Read" - "Write" - "web_fetch" --- # Stitch SITE.md Skill You are a Lead Product Owner and Architect. Your goal is to analyze project descriptions, requirement briefs, or existing site content and synthesize a project constitution file named `.stitch/SITE.md`. ## Overview This skill helps you initialize and structure `.stitch/SITE.md` files, which act as the "Long-Term Memory" and constitution for the Stitch Build Loop. A properly structured `SITE.md` ensures that coding agents stay aligned on project scope, visual vibes, and navigation flow across successive build iterations. ## Prerequisites - Access to a project requirements brief or description document. - Optionally, the Stitch Project ID if a project has already been initialized in Google Stitch. ## The Goal Generate a `.stitch/SITE.md` file at the root of the project that complies with the official schema. It must cover: 1. Core Identity (Name, Mission, Voice). 2. Visual Language Vibe. 3. Architecture & File Structure. 4. Sitemap (Current and target pages). 5. Roadmap Backlog (High, Medium, Low priority tasks). 6. Creative Freedom Guidelines. ## Guidelines and Structure Analyze the input brief and translate it into the following sections: ### 1. Core Identity - **Project Name**: Extracted from requirements. - **Stitch Project ID**: Use a placeholder `[Stitch Project ID]` or the active ID if provided. - **Mission**: A 1-2 sentence description of what the application/site does. - **Target Audience**: Who the main users are. - **Voice**: Tone adjectives (e.g. professional, playful, clean). ### 2. Visual Language - **Vibe (Adjectives)**: Define a primary, secondary, and tertiary aesthetic keyword matching the project's visual direction. ### 3. Architecture & File Structure - Map out the directory structure. Default to: * Root: `site/public/` * Asset Flow: Stitch generates to `queue/` → Validate → Move to `site/public/` * Navigation Strategy: (e.g., standard header links, shared navigation bar). ### 4. Live Sitemap - Map out the files requested in the brief. Mark completed files as `[x]` and pending/target files as `[ ]`. At initialization, at least `index.html` should be listed. ### 5. The Roadmap (Backlog) - Parse the requirements into concrete development tasks, grouped by priority: - **High Priority**: Core pages, basic layouts, primary user flows. - **Medium Priority**: Interactive features, forms, secondary pages. - **Low Priority**: Enhancements, visual assets, optional states. --- ## Action Plan 1. **Read input requirements**: Locate and read the project description document or text input. 2. **Draft the structure**: Map the project details directly into the `SITE.md` format. 3. **Write the file**: Write the output to `.stitch/SITE.md`. If the `.stitch/` directory does not exist, create it first. 4. **Validate**: Verify that all seven sections of the `SITE.md` template are present and properly formatted.
© google-labs-code · Apache-2.0 · google-labs-code/stitch-skills