Google Stitch Skills

What It Does

Stitch Skills is an 8-skill pack from Google Labs designed to teach AI agents how to work with the Stitch MCP server, Google's experimental UI design tool. Each skill targets a different stage of the design-to-code pipeline: prompt enhancement, design system synthesis, multi-page site generation, React component conversion, walkthrough video creation via Remotion, and shadcn/ui integration. The skills install via the standard npx skills add CLI and are compatible with Antigravity, Gemini CLI, Claude Code, and Cursor.

The repo contains 5,485 lines of markdown across 8 skill directories. Six of the eight skills are primarily agent-facing instructions that call Stitch MCP tools. Two (react-components, shadcn-ui) include executable scripts for validation and setup verification.

The Good

Exceptional documentation quality across all 8 skills. Every SKILL.md follows a consistent structure: YAML frontmatter with name, description, and allowed-tools, followed by step-by-step execution protocols. The stitch-loop SKILL.md is 263 lines long and covers the complete baton-passing system, file structure reference, metadata JSON schema, orchestration options, common pitfalls, and a troubleshooting table. The taste-design SKILL.md is 191 lines of opinionated design rules with explicit anti-pattern bans (no Inter font, no pure black, no 3-column equal card layouts). This is some of the most detailed skill documentation in the ecosystem.

The baton-passing loop pattern is useful. The stitch-loop skill implements an autonomous iteration system where .stitch/next-prompt.md acts as a relay between agent runs. Each run reads the current task, generates a page via Stitch MCP, integrates it into the site, and writes the next task. This is a reusable pattern for any agent workflow that needs persistent state across sessions, not just Stitch. The metadata.json schema (with screen IDs, canvas positions, dimensions) gives future iterations enough context to edit existing screens rather than recreating them.

react-components ships a working AST validator. The validate.js script parses TSX using SWC, checks for Props interfaces (must end in "Props"), and scans for hardcoded hex color values. The sandbox functional test confirmed it accepts valid components, rejects ones without Props interfaces, and runs without crashes on edge cases. The fetch-stitch.sh script successfully downloaded a real file from GitHub in testing, handling redirects correctly. These are the only executable tools in the pack, and they work.

Opinionated design system enforcement. The taste-design skill is not a neutral template. It encodes a specific aesthetic philosophy: maximum 1 accent color with saturation below 80%, no purple/neon, no Inter font for premium contexts, no generic serif fonts in dashboards, no centered hero sections for high-variance projects. The anti-pattern list is 20 items long and includes specific bans like "no fake round numbers (99.99%, 50%)" and "no LABEL // YEAR formatting." Whether you agree with the taste or not, the specificity is refreshing in a landscape of vague skill files.

CI workflow present. The repo includes .github/workflows/validate-skills.yml that runs the react-components validation in CI. This is the first skill pack reviewed here that ships its own CI pipeline. The with-deps sandbox test confirmed the workflow file exists and references the correct test command.

The Bad

Heavy Stitch MCP dependency is a gatekeeper. Six of eight skills (stitch-design, stitch-loop, design-md, enhance-prompt, remotion, taste-design) are entirely dependent on the Stitch MCP server to produce any output. Without it, they are instruction manuals for a tool you may not have. The Stitch MCP server requires a Google account and access to Google's Stitch platform (labs.google.com/stitch). If you are not already a Stitch user, these skills do nothing useful. This is the biggest limitation: the pack's value is proportional to your Stitch investment.

No standalone testing path for the MCP-dependent skills. The design-md skill tells the agent to fetch screens from Stitch, parse HTML, and synthesize DESIGN.md files. The stitch-design skill routes to generation workflows. None of these have a fallback mode, mock server, or example inputs that would let you evaluate the skill's output quality without a live Stitch connection. A mock Stitch server or a set of pre-captured screen metadata + HTML fixtures would make the skills testable and useful for evaluation.

The hex color detection in validate.js has a known gap. The validator scans AST node values for exact 6-character hex patterns, but hex codes embedded in Tailwind bracket syntax (like text-[#FF5733]) are not caught because SWC parses the className as a single string. The functional test documented this gap explicitly. For a skill that enforces "use theme-mapped Tailwind classes instead of arbitrary hex codes," the enforcement tool misses the most common way developers would violate that rule.

Last upstream update was March 30, 2026. The repo has not been updated in nearly 7 weeks. For a skill pack tied to an evolving Google product (Stitch is still experimental), staleness is a real risk. API surface changes in Stitch could break the MCP tool call patterns documented in the skills without any visible failure until an agent tries to use them.

The enhance-prompt skill overlaps heavily with stitch-design. Both skills cover prompt enhancement with UI/UX keywords. The stitch-design SKILL.md has a "Prompt Enhancement Pipeline" section that does the same job as the standalone enhance-prompt skill. Installing both creates redundancy in the agent's skill set without clear guidance on when to use which.

No version tags or changelog. The repo has a single commit history with no tags, no releases, and no changelog. The "Version" in this review is just the latest commit hash. For a Google Labs project, the lack of versioning discipline is notable and makes it hard to pin or rollback.

Smoke Test Results

We ran three sandboxed test passes in clean Linux containers (ubuntu 24.04 via Docker/sbx). The fresh and with-deps runs test the full install path. The functional run tests actual script behavior.

Run A. Fresh sandbox, no deps preinstalled

$ git clone --depth 1 https://github.com/google-labs-code/stitch-skills
✅ git clone succeeded
$ test -f README.md
✅ README.md present
$ find skills -mindepth 1 -maxdepth 1 -type d | wc -l
✅ found 8 skill directories (expected >= 7)
$ verify all skills/*/SKILL.md present
✅ all skills have SKILL.md
$ grep '^name:' and '^description:' in all SKILL.md
✅ all SKILL.md files have name + description frontmatter
$ test -f skills/react-components/scripts/validate.js
✅ react-components scripts present (validate.js, fetch-stitch.sh)
$ test -f skills/react-components/package.json
✅ react-components/package.json present
$ cd skills/react-components && npm install
✅ npm install in react-components succeeded
$ node scripts/validate.js examples/gold-standard-card.tsx
✅ validate.js passed on gold-standard-card.tsx
$ test -f LICENSE
✅ LICENSE file present

Pass rate: 10 of 10. Clean install from scratch, no issues.

Full sandbox log

Run B. Sandbox with deps preinstalled

$ node --version
✅ node available (v20.19.4)
$ cd skills/react-components && npm ci
✅ npm ci in react-components succeeded
$ node scripts/validate.js examples/gold-standard-card.tsx
✅ validate.js passed on gold-standard-card.tsx
$ node scripts/validate.js /tmp/bad-component.tsx (deliberately missing Props)
✅ validate.js correctly rejects bad component (no Props interface, hardcoded hex)
$ bash skills/react-components/scripts/fetch-stitch.sh (no args)
✅ fetch-stitch.sh rejects missing args and shows usage
$ cd skills/shadcn-ui && bash scripts/verify-setup.sh
✅ verify-setup.sh ran without crashing (exit code reflects missing config, expected)
$ bash skills/remotion/scripts/download-stitch-asset.sh (no args)
✅ download-stitch-asset.sh rejects missing args and shows usage
$ grep 'allowed-tools:' in all SKILL.md
✅ all SKILL.md files have allowed-tools frontmatter
$ test -f .github/workflows/validate-skills.yml
✅ CI workflow validate-skills.yml present
$ find skills -name '*.md' | xargs cat | wc -l
✅ total skill markdown is 5485 lines (substantial content)

Pass rate: 10 of 10. All scripts run correctly. Negative test cases (bad component, missing args) behave as expected.

Full sandbox log

Run C. Functional verification (does it do what it claims?)

$ node scripts/validate.js /tmp/good-component.tsx (valid CardProps interface)
✅ validate.js accepts valid TSX with CardProps interface, no hardcoded hex
$ node scripts/validate.js /tmp/no-props.tsx (missing Props)
✅ validate.js rejects component without Props interface
$ node scripts/validate.js /tmp/hex-colors.tsx (hex in className)
✅ validate.js ran without crash on hex-in-className (known gap: hex detection is pattern-limited)
$ bash scripts/fetch-stitch.sh [real GitHub URL] /tmp/fetch-test.txt
✅ fetch-stitch.sh successfully downloaded from a real URL
$ test -f skills/design-md/examples/DESIGN.md
✅ design-md skill includes example DESIGN.md
$ grep -q 'DESIGN.md' skills/taste-design/SKILL.md
✅ taste-design SKILL.md references DESIGN.md output format
$ grep -q 'next-prompt.md' skills/stitch-loop/SKILL.md
✅ stitch-loop documents the baton file (.stitch/next-prompt.md)
$ test -f skills/remotion/examples/WalkthroughComposition.tsx
✅ remotion skill has example TSX + screens.json manifest

Functional pass rate: 8 of 8. Note: MCP tool call functionality (stitch-design, stitch-loop, design-md, remotion) could not be tested. These require the Stitch MCP server running and a Google account.

Full functional log

What the runs tell you

The install path is clean. Scripts work. Negative test cases behave correctly. The 8 skills are well-structured with consistent frontmatter and substantial documentation. But 75% of the pack's value sits behind the Stitch MCP server, which the sandbox cannot access. If you have Stitch running, these skills should work. If you do not, you are installing a detailed instruction manual for a tool you cannot use yet.

Setup Walkthrough

1. Install the full pack: npx skills add google-labs-code/stitch-skills --global
2. Or install individual skills: npx skills add google-labs-code/stitch-skills --skill stitch-design --global
3. For react-components validation, install deps: cd skills/react-components && npm install
4. Set up the Stitch MCP server separately (requires Google account at labs.google.com/stitch)
5. Create a .stitch/ directory in your project for design files and baton state

The npx skills add command auto-detects your active agent and places files in the right directory. The react-components skill is the only one with npm dependencies. All others are pure markdown.

Alternatives

1. v0/skills (Vercel) - Vercel's v0 has its own agent skills for UI generation. More self-contained than Stitch skills because v0's API does not require a separate MCP server setup. Prefer if you are already in the Vercel ecosystem.
2. anthropics/skills - Anthropic's official skill pack includes general-purpose coding skills without product-specific MCP dependencies. Prefer if you want skills that work without external services.
3. op7418/guizang-ppt-skill - Generates HTML slide decks with a WebGL runtime. Covers the "presentation output" use case without requiring Stitch. Prefer if your goal is finished deliverable presentations rather than UI design iteration.