{"id":43214406,"url":"https://github.com/google-labs-code/stitch-skills","last_synced_at":"2026-10-27T20:21:12.280Z","repository":{"id":334104995,"uuid":"1135847870","full_name":"google-labs-code/stitch-skills","owner":"google-labs-code","description":"A library of Agent Skills designed to work with the Stitch MCP server. Each skill follows the Agent Skills open standard, for compatibility with coding agents such as Antigravity, Gemini CLI, Claude Code, Cursor.","archived":false,"fork":false,"pushed_at":"2026-08-17T20:20:23.000Z","size":248,"stargazers_count":8540,"open_issues_count":17,"forks_count":1048,"subscribers_count":86,"default_branch":"main","last_synced_at":"2026-10-22T20:15:05.295Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://stitch.withgoogle.com/docs/mcp/setup","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/google-labs-code.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","accessibility":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"claude":null,"gemini":null,"cursor":null,"copilot":null,"dco":null,"cla":null,"disclosure":null}},"created_at":"2026-01-16T17:17:17.000Z","updated_at":"2026-10-22T16:58:11.000Z","dependencies_parsed_at":"2026-10-22T20:15:07.772Z","dependency_job_id":"e8763897-1cf0-4bba-a764-741f3a654afa","html_url":"https://github.com/google-labs-code/stitch-skills","commit_stats":null,"previous_names":["google-labs-code/stitch-skills"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/google-labs-code/stitch-skills","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/google-labs-code%2Fstitch-skills","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/google-labs-code%2Fstitch-skills/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/google-labs-code%2Fstitch-skills/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/google-labs-code%2Fstitch-skills/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/google-labs-code","download_url":"https://codeload.github.com/google-labs-code/stitch-skills/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/google-labs-code%2Fstitch-skills/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":345082042,"owners_count":38479573,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-10-03T21:59:58.778Z","status":"online","status_checked_at":"2026-10-23T02:00:05.958Z","response_time":105,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-02-01T08:00:30.280Z","updated_at":"2026-10-24T20:04:22.641Z","avatar_url":"https://github.com/google-labs-code.png","language":"TypeScript","funding_links":[],"categories":["Skills Catalog","TypeScript","精选技能","📋 Changelog","13. Developer Tools \u0026 Integrations","Machine Learning and AI","🧠 Agent Skills","影片製作 Video","Other","Repos","Uncategorized","Productivity Tools","fx skills","⭐ 精选第三方技能","Platform Skills","📦 开源 Skills 库 (Open Source Skills)"],"sub_categories":["Frontend (24)","官方项目","2026-07-12 — Weekly Update","LLM and Inference","Remix / React Router","Uncategorized","MCP Servers \u0026 Integrations","Design and build interfaces","💻 开发效率","架构演进：代码优先 (Code-First)"],"readme":"# Stitch Design Skills\n\nA collection of agent skills and plugins for [Google Stitch](https://stitch.withgoogle.com), following the [Agent Skills](https://agentskills.io) open standard. Compatible with coding agents such as Codex, Antigravity, Gemini CLI, Claude Code, Cursor, and OpenCode (manual install).\n\n## Quick Start\n\n### 1. Install Plugins (Recommended)\nThe fastest way to set up the full Stitch plugin suite globally.\n\n#### Codex\n\nAdd the Stitch Skills marketplace, then install the plugins you need.\n\n\u003cdetails open\u003e\n\u003csummary\u003e\u003cstrong\u003eVia CLI\u003c/strong\u003e (recommended)\u003c/summary\u003e\n\n```bash\ncodex plugin marketplace add google-labs-code/stitch-skills --ref main \\\n  --sparse .agents/plugins \\\n  --sparse plugins/stitch-design \\\n  --sparse plugins/stitch-build \\\n  --sparse plugins/stitch-utilities\n```\n\n\u003e [!TIP]\n\u003e The `--sparse` flags are optional — they limit the checkout to only the\n\u003e listed paths for a faster clone. Omit them to pull the entire repository.\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003eVia the Codex UI\u003c/strong\u003e\u003c/summary\u003e\n\nNavigate to **Settings → Plugin Marketplaces → Add** and fill in:\n\n| Field | Value |\n|---|---|\n| **Source** | `https://github.com/google-labs-code/stitch-skills` |\n| **Git ref** | `main` |\n| **Sparse paths** | *(optional)* `.agents/plugins`, `plugins/stitch-design`, `plugins/stitch-build`, `plugins/stitch-utilities` |\n\n\u003c/details\u003e\n\nOnce the marketplace is registered, install any combination of:\n\n- **`stitch-design`** — design-focused skills\n- **`stitch-build`** — build and component skills\n- **`stitch-utilities`** — utility and helper skills\n\n#### Claude Code \u0026 Cursor\n\n```bash\n# Claude Code — installs into the current project\nnpx plugins add google-labs-code/stitch-skills --scope project --target claude-code\n```\n\n```bash\n# Cursor — installs into the current workspace\nnpx plugins add google-labs-code/stitch-skills --scope workspace --target cursor\n```\n\n#### OpenCode\n\nOpenCode does **not** use `npx plugins` / `npx skills` or the Codex/Claude marketplace layout.\nInstall skills and the Stitch MCP server manually:\n\n**1. Skills** — copy the skill folders you need into a discoverable path:\n\n```bash\n# Project-local (recommended)\nmkdir -p .opencode/skills\ncp -R plugins/stitch-design/skills/generate-design .opencode/skills/generate-design\n# repeat for other skills under plugins/*/skills/\n```\n\nOpenCode also discovers `.claude/skills/` and `.agents/skills/` (see [OpenCode skills docs](https://opencode.ai/docs/skills/)).\n\n\u003e **Naming:** OpenCode requires skill `name` frontmatter to be lowercase kebab-case and match the directory name. Skills that use `stitch::…` names (or other non-kebab forms) need the `name` field and folder renamed before OpenCode will load them. Extra frontmatter such as `allowed-tools` is ignored.\n\n**2. Stitch MCP** — add a remote MCP entry in project `opencode.json` or `~/.config/opencode/opencode.json` after completing the [Stitch MCP setup](https://stitch.withgoogle.com/docs/mcp/setup/):\n\n```json\n{\n  \"$schema\": \"https://opencode.ai/config.json\",\n  \"mcp\": {\n    \"stitch\": {\n      \"type\": \"remote\",\n      \"url\": \"YOUR_STITCH_MCP_URL\",\n      \"enabled\": true\n    }\n  }\n}\n```\n\nReplace `YOUR_STITCH_MCP_URL` with the endpoint from the Stitch MCP setup flow (credentials/env vars from that guide still apply).\n\nTool names inside skill instructions may differ from OpenCode builtins (`webfetch` / `bash` instead of `web_fetch` / `run_command`). Prefer the OpenCode tool names when adapting a skill for OpenCode.\n\n### 2. Install Skills Selectively\nChoose only the specific skills you need.\n\n\u003e [!IMPORTANT]\n\u003e Stitch Design Skills often have inter-dependencies. If you choose to install skills selectively, ensure you include all required dependencies.\n\n```bash\nnpx skills add google-labs-code/stitch-skills\n```\n\nYou can run the following commands to see the help documentation for plugins and skills:\n\n```bash\nnpx plugins --help\n\nnpx skills --help\n```\n\n## Prerequisites\n\nThese skills require the **Stitch MCP** server to be configured and running in your agent's environment. Make sure you have followed the [Stitch MCP Setup Instructions](https://stitch.withgoogle.com/docs/mcp/setup/) to register the server and set up appropriate environment variables and credentials.\n\n\u003e **Docs navigation:** If a link on [stitch.withgoogle.com/docs](https://stitch.withgoogle.com/docs/) redirects incorrectly, open the target path under the same host (e.g. `https://stitch.withgoogle.com/docs/learn/device-types/`).\n\n## Available Plugins\n\n### Design (`stitch-design`)\n\nCore design workflows for creating, managing, and optimizing designs within Stitch.\n\n| Skill | Description | Prompt Example |\n|---|---|---|\n| [stitch::code-to-design](plugins/stitch-design/skills/code-to-design/) | Convert frontend code (React, Vue, etc.) to a Stitch Design via HTML extraction + design system + upload | *\"Upload the frontend code at `/path/to/dashboard` into a Stitch project named 'Dashboard-Migration-2026'.\"* |\n| [stitch::generate-design](plugins/stitch-design/skills/generate-design/) | Generate new screens from text or images, edit existing screens, and create design variants | · *\"Make a browse tab for a mobile app for romance and date night ideas.\"*\u003cbr\u003e· *\"Edit the login screen to add a 'Remember Me' checkbox and change the button color to blue.\"*\u003cbr\u003e· *\"Generate 3 design variants of the home screen with dark mode and high-density layouts.\"* |\n| [stitch::manage-design-system](plugins/stitch-design/skills/manage-design-system/) | Manage design systems in Stitch — upload DESIGN.md and apply themes to screens | *\"Upload our design system from `.stitch/DESIGN.md` and apply it to all screens.\"* |\n| [stitch::extract-design-md](plugins/stitch-design/skills/extract-design-md/) | Extract a comprehensive DESIGN.md directly from frontend source code | *\"Scan `/src` and extract the design system into `.stitch/DESIGN.md`.\"* |\n| [stitch::extract-static-html](plugins/stitch-design/skills/extract-static-html/) | Extract self-contained static HTML from running web apps, inlining CSS and images | *\"Extract a static HTML snapshot of `http://localhost:3000/profile`.\"* |\n| [stitch::upload-to-stitch](plugins/stitch-design/skills/upload-to-stitch/) | Upload local assets (images, mockups, HTML) to a Stitch project | *\"Upload `.stitch/landing_page.html` to Stitch project `projects/987654321`.\"* |\n\n---\n\n### Build (`stitch-build`)\n\nCode generation, framework integration, and asset compilation from Stitch designs.\n\n| Skill | Description | Prompt Example |\n|---|---|---|\n| [stitch::react-components](plugins/stitch-build/skills/react-components/) | Convert Stitch screens to React component systems with automated validation and design token consistency | · *\"Convert all screens in Stitch project `projects/123` to React components.\"*\u003cbr\u003e· *\"Sync the app to the last updates of the Stitch project `13039335308618232534`.\"* |\n| [stitch::react-native](plugins/stitch-build/skills/react-native/) | Convert Stitch HTML designs to production-ready React Native components with StyleSheet and platform-specific code | · *\"Convert the Stitch design to React Native components with proper theme and navigation.\"*\u003cbr\u003e· *\"Sync the app to the last updates of the Stitch project `13039335308618232534`.\"* |\n| [remotion](plugins/stitch-build/skills/remotion/) | Generate walkthrough videos from Stitch projects using Remotion with smooth transitions and zooming | *\"Generate a walkthrough video of the Stitch project `projects/456`.\"* |\n| [shadcn-ui](plugins/stitch-build/skills/shadcn-ui/) | Expert guidance for integrating and building applications with shadcn/ui components | *\"Set up shadcn/ui and build a data table with sorting and filtering.\"* |\n| [react-vite-dashboard](plugins/stitch-build/skills/react-vite-dashboard/) | Convert Stitch screens to React + Vite dashboards with TanStack Query, DESIGN.md tokens, and Web3 read patterns | *\"Build a DeFi portfolio dashboard from this Stitch screen using our DESIGN.md.\"* |\n\n---\n\n### Utilities (`stitch-utilities`)\n\nSupporting tools for enhancing prompts, generating design specs, and enforcing design standards.\n\n| Skill | Description | Prompt Example |\n|---|---|---|\n| [design-md](plugins/stitch-utilities/skills/design-md/) | Analyze Stitch projects and generate comprehensive DESIGN.md files in semantic language | *\"Analyze Stitch project `projects/123` and generate a DESIGN.md.\"* |\n| [enhance-prompt](plugins/stitch-utilities/skills/enhance-prompt/) | Transform vague UI ideas into polished, Stitch-optimized prompts with UI/UX keywords | *\"Enhance this prompt: 'make a settings page'.\"* |\n| [stitch-loop](plugins/stitch-utilities/skills/stitch-loop/) | Generate complete multi-page websites from a single prompt with automated validation | *\"Build a 5-page portfolio website with Stitch.\"* |\n| [taste-design](plugins/stitch-utilities/skills/taste-design/) | Generate DESIGN.md files enforcing premium, anti-generic UI standards | *\"Generate a premium DESIGN.md with strict typography and calibrated colors.\"* |\n\n## Repository Structure\n\n```text\nplugins/\n├── stitch-design/          — Core design workflow plugin\n│   ├── plugin.json\n│   └── skills/\n│       ├── code-to-design/\n│       ├── generate-design/\n│       ├── manage-design-system/\n│       ├── extract-design-md/\n│       ├── extract-static-html/\n│       └── upload-to-stitch/\n├── stitch-build/           — Code generation \u0026 build plugin\n│   ├── plugin.json\n│   └── skills/\n│       ├── react-components/    — stitch::react-components\n│       ├── react-native/\n│       ├── react-vite-dashboard/\n│       ├── remotion/\n│       └── shadcn-ui/\n└── stitch-utilities/       — Design utilities \u0026 assistants plugin\n    ├── plugin.json\n    └── skills/\n        ├── design-md/\n        ├── enhance-prompt/\n        ├── stitch-loop/\n        └── taste-design/\n```\n\nEach skill follows the Agent Skills standard:\n\n```text\nskills/\u003cskill-name\u003e/\n├── SKILL.md           — The \"Mission Control\" for the agent\n├── scripts/           — Executable enforcers (Validation \u0026 Networking)\n├── resources/         — The knowledge base (Checklists \u0026 Style Guides)\n└── examples/          — The \"Gold Standard\" syntactically valid references\n```\n\n## Adding New Skills\n\nAll new skills need to follow the file structure above to implement the Agent Skills open standard.\n\n### Great candidates for new skills\n* **Validation**: Skills that convert Stitch HTML to other UI frameworks and validate the syntax.\n* **Decoupling Data**: Skills that convert static design content into external mock data files.\n* **Generate Designs**: Skills that generate new design screens in Stitch from a given set of data.\n\nThis is not an officially supported Google product. This project is not eligible for the [Google Open Source Software Vulnerability Rewards Program](https://bughunters.google.com/open-source-security).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgoogle-labs-code%2Fstitch-skills","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgoogle-labs-code%2Fstitch-skills","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgoogle-labs-code%2Fstitch-skills/lists"}