Stitch Agent Skills Installer & Setup Guide

What Are Stitch Agent Skills?

An Agent Skill is a workflow package centered on SKILL.md: a name, a description of when to use it and instructions the coding agent can load for a relevant task. The Stitch repository packages design and implementation workflows with supporting resources, examples and scripts. Preserve those files when installing a skill; the markdown alone may refer to missing tools or templates.

The agent discovers the skill and follows its procedure. Work that reads or changes Stitch projects also needs a connected Stitch MCP server. For Loop Engineering, treat each skill as a maintained procedure: inspect its permissions, define a stop rule and verify a small task before granting broader access. Agent Skills format reference.

Stitch Agent Skills vs Stitch MCP

Available Stitch Plugins

Three plugin families organize the current repository. The recommended setup in this tool selects all three; it is a complete starting point, with narrower choices available. The inspected source tree contains 16 skills, including site-md, which was not yet in the README’s summary table on the verification date.

Which Stitch Skill Should I Install?

Match the task to a source skill. Names below are the repository’s frontmatter names; OpenCode needs the naming adaptation described in its setup. A selective install may need supporting skills: code-to-design orchestrates extraction and upload workflows; generate-design has conditional design-system and image-upload branches; stitch-loop uses design/site context.

• stitch::generate-design

  Generate or edit screens and create variants.

  design
• stitch::code-to-design

  Move an existing frontend into a Stitch design.

  design
• stitch::manage-design-system

  Upload design specifications and apply themes.

  design
• stitch::extract-design-md

  Extract DESIGN.md from frontend source.

  design
• stitch::extract-static-html

  Capture a running app as self-contained HTML.

  design
• stitch::upload-to-stitch

  Upload local assets to a Stitch project.

  design
• stitch::react-components

  Create React components from Stitch screens.

  build
• stitch::react-native

  Adapt designs for React Native.

  build
• react-vite-dashboard

  Build React + Vite dashboards from screens.

  build
• remotion

  Create project walkthrough videos.

  build
• shadcn-ui

  Integrate shadcn/ui components.

  build
• design-md

  Derive DESIGN.md from a Stitch project.

  utilities
• enhance-prompt

  Make a UI request more precise.

  utilities
• stitch-loop

  Coordinate repeated page-building work.

  utilities
• taste-design

  Prepare design standards for visual consistency.

  utilities
• site-md

  Write SITE.md project context for a build loop.

  utilities

Install Stitch Skills for Codex

Registered marketplace; install and enable the chosen plugins in Codex.

codex plugin marketplace add google-labs-code/stitch-skills --ref main \
  --sparse .agents/plugins \
  --sparse plugins/stitch-design \
  --sparse plugins/stitch-build \
  --sparse plugins/stitch-utilities

1. After registration, install and enable stitch-design, stitch-build, stitch-utilities using the Codex plugin interface. The registration command alone installs no plugins.
2. UI alternative: Settings → Plugin Marketplaces → Add; source https://github.com/google-labs-code/stitch-skills, Git ref main, optional sparse paths matching the command.

Stitch MCP setup for Codex

• Follow Stitch’s remote MCP authentication guide.
• Add the authenticated remote server in your Codex MCP configuration. Use your client’s supported secret handling; marketplace registration does not prove MCP is connected.

Stitch MCP authentication guide · Codex skills documentation. Merge configuration into existing files; replace credential placeholders only on your machine.

Install Stitch Skills for Claude Code

Current project (--scope project). Run from the intended project root.

npx plugins add google-labs-code/stitch-skills --scope project --target claude-code

1. Run in the intended project/workspace and review the installer’s scope and selected plugins before confirming.

Stitch MCP setup for Claude Code

• Create a key in Stitch Settings and register the remote HTTP server using the provider’s example.
• The MCP example uses user scope (-s user); this is separate from the project-scoped skill installation. Keep credentials out of version control.

claude mcp add stitch --transport http https://stitch.googleapis.com/mcp --header "X-Goog-Api-Key: api-key" -s user

Stitch MCP authentication guide · Claude Code skills documentation. Merge configuration into existing files; replace credential placeholders only on your machine.

Install Stitch Skills for Cursor

Current workspace (--scope workspace). Open the intended workspace first.

npx plugins add google-labs-code/stitch-skills --scope workspace --target cursor

1. Run in the intended project/workspace and review the installer’s scope and selected plugins before confirming.

Stitch MCP setup for Cursor

• Configure the remote server in .cursor/mcp.json using Stitch’s official example.
• Replace the API-key placeholder only in your local configuration; verify the server connects.

{
  "mcpServers": {
    "stitch": {
      "url": "https://stitch.googleapis.com/mcp",
      "headers": {
        "X-Goog-Api-Key": "YOUR-API-KEY"
      }
    }
  }
}

Stitch MCP authentication guide · Cursor skills documentation. Merge configuration into existing files; replace credential placeholders only on your machine.

Install Stitch Skills for Gemini CLI

Compatible, but no dedicated one-command flow is documented here.

1. Download or clone the source repository from its link. Read the selected SKILL.md files and their bundled scripts before copying.
2. Copy each complete skill folder, including scripts/resources/examples, from the source paths below into the intended project’s .gemini/skills/ directory. Keep SKILL.md directly inside its own folder; do not overwrite an existing skill.
3. The destination is your working project, not the downloaded Stitch repository. Use the agent’s documented user directory only when you intentionally want global scope.
4. Configure Stitch MCP separately using the prerequisite checklist, then perform the agent-specific discovery checks below.

Project skill path: .gemini/skills/<folder>/SKILL.md. The skill folders are under plugins/stitch-design/skills, plugins/stitch-build/skills and plugins/stitch-utilities/skills in the source repository. Copy complete folders, then check the scope: Workspace skills in .gemini/skills; user skills in ~/.gemini/skills.

Stitch MCP setup for Gemini CLI

• Stitch’s MCP guide documents the Gemini CLI Stitch extension. Install it separately from Agent Skills and complete authentication.
• Check the extension’s MCP connection before using a Stitch-dependent skill.

gemini extensions install https://github.com/gemini-cli-extensions/stitch

Stitch MCP authentication guide · Gemini CLI skills documentation. Merge configuration into existing files; replace credential placeholders only on your machine.

Install Stitch Skills for OpenCode

Manual setup required. The repository explicitly excludes npx plugins and npx skills for OpenCode.

1. Download or clone the source repository from its link. Read the selected SKILL.md files and their bundled scripts before copying.
2. Copy each complete skill folder, including scripts/resources/examples, from the source paths below into the intended project’s .opencode/skills/ directory. Keep SKILL.md directly inside its own folder; do not overwrite an existing skill.
3. The destination is your working project, not the downloaded Stitch repository. Use the agent’s documented user directory only when you intentionally want global scope.
4. Rename namespaced frontmatter such as stitch::generate-design to generate-design. The lowercase kebab-case name must match the folder; keep description. Unknown fields such as allowed-tools are ignored. Adapt web_fetch/run_command references to OpenCode’s webfetch/bash tools and review inter-skill references after renaming.
5. Configure Stitch MCP separately using the prerequisite checklist, then perform the agent-specific discovery checks below.

Project skill path: .opencode/skills/<folder>/SKILL.md. The skill folders are under plugins/stitch-design/skills, plugins/stitch-build/skills and plugins/stitch-utilities/skills in the source repository. Copy complete folders, then check the scope: Project-local .opencode/skills; optional user path ~/.config/opencode/skills.

Stitch MCP setup for OpenCode

• Merge a remote stitch entry into project opencode.json (or your user config) after authenticating with Stitch.
• Replace YOUR_STITCH_MCP_URL and add the authentication required by the official setup guide. A URL alone does not authenticate.

{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "stitch": {
      "type": "remote",
      "url": "YOUR_STITCH_MCP_URL",
      "enabled": true
    }
  }
}

Stitch MCP authentication guide · OpenCode skills documentation. Merge configuration into existing files; replace credential placeholders only on your machine.

Install Stitch Skills for Antigravity

Compatible, but no dedicated one-command flow is documented here.

1. Download or clone the source repository from its link. Read the selected SKILL.md files and their bundled scripts before copying.
2. Copy each complete skill folder, including scripts/resources/examples, from the source paths below into the intended project’s .agents/skills/ directory. Keep SKILL.md directly inside its own folder; do not overwrite an existing skill.
3. The destination is your working project, not the downloaded Stitch repository. Use the agent’s documented user directory only when you intentionally want global scope.
4. Configure Stitch MCP separately using the prerequisite checklist, then perform the agent-specific discovery checks below.

Project skill path: .agents/skills/<folder>/SKILL.md. The skill folders are under plugins/stitch-design/skills, plugins/stitch-build/skills and plugins/stitch-utilities/skills in the source repository. Copy complete folders, then check the scope: Workspace skills in .agents/skills. Global locations vary by Antigravity surface.

Stitch MCP setup for Antigravity

• In the Agent Panel, open MCP Servers → Manage MCP Servers → View raw config.
• Merge the provider’s serverUrl example and configure credentials locally.

{
  "mcpServers": {
    "stitch": {
      "serverUrl": "https://stitch.googleapis.com/mcp",
      "headers": {
        "X-Goog-Api-Key": "YOUR-API-KEY"
      }
    }
  }
}

Stitch MCP authentication guide · Antigravity skills documentation. Merge configuration into existing files; replace credential placeholders only on your machine.

Install One Stitch Skill Only

For Codex, Claude Code or Cursor, open the current README’s interactive skills installer below. Select a skill by its exact name, the target agent and the intended scope. This entry point does not automatically narrow the installation to the skill selected on this webpage. The README does not document noninteractive selection flags, so this tool does not generate them. Inspect referenced supporting skills before confirming; a single folder may not cover an orchestrated workflow.

npx skills add google-labs-code/stitch-skills

For example, choose enhance-prompt for prompt refinement, or stitch::react-components for React output. For OpenCode, use the complete-folder manual route and normalize the frontmatter name. Gemini CLI and Antigravity have manual paths in this guide because the repository lists compatibility without a dedicated plugin command. Interactive skills CLI reference.

How to Verify Installation

Check skill discovery first, then MCP connectivity. Finally try a small, relevant task in a disposable project with an explicit stop rule and human approval before any upload or design change. The connection check below only asks to list existing projects; it does not create or edit screens.

Common Errors

Build Your Own SKILL.md with Loop Engineering

Use Stitch skills for a specific design workflow. Use Loop Engineering to write the surrounding goal, verification steps, budget and approval gate. Keep the workflow small enough that a reviewer can tell whether it succeeded.

Stitch Agent Skills FAQ

Sources & Maintenance

Commands were checked against the README on 2026-10-05; skill names and folders were checked against the repository tree and individual SKILL.md files. These instructions are a dated snapshot. Recheck the upstream documentation before installing after a product update.

• Stitch Skills README
• Inspected repository snapshot
• Stitch MCP setup
• Agent Skills format