stitch-skills
💡 Summary
A library of standardized skills for converting and documenting Stitch design projects, compatible with various AI coding agents.
🎯 Target Audience
🤖 AI Roast: “It's a well-organized parking lot for skills, but we're still waiting for more cars to show up.”
Skills may execute scripts (in `scripts/`) with filesystem and network access, posing a risk if a malicious skill is installed. Mitigation: Audit all scripts in a skill before installation and run in a sandboxed environment.
Stitch Agent Skills
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.
Installation & Discovery
Install any skill from this repository using the add-skill CLI. This command will automatically detect your active coding agents and place the skill in the appropriate directory.
# List all available skills in this repository npx add-skill google-labs-code/stitch-skills --list # Install a specific skill (e.g., Stitch to React Components) npx add-skill google-labs-code/stitch-skills --skill react:components --global
Available Skills
design-md
Analyzes Stitch projects and generates comprehensive DESIGN.md files documenting design systems in natural, semantic language optimized for Stitch screen generation.
react-components
Converts Stitch screens to React component systems with automated validation and design token consistency.
Repository Structure
Every directory within skills/ or at the root level follows a standardized structure to ensure the AI agent has everything it needs to perform "few-shot" learning and automated quality checks.
skills/[category]/ ├── SKILL.md — The "Mission Control" for the agent ├── scripts/ — Executable enforcers (Validation & Networking) ├── resources/ — The knowledge base (Checklists & Style Guides) └── examples/ — The "Gold Standard" syntactically valid references
Adding New Skills
All new skills need to follow the file structure above to implement the Agent Skills open standard.
Great candidates for new skills
- Validation: Skills that convert Stitch HTML to other UI frameworks and validate the syntax.
- Decoupling Data: Skills that convert static design content into external mock data files.
- Generate Designs: Skills that generate new design screens in Stitch from a given set of data.
This is not an officially supported Google product. This project is not eligible for the Google Open Source Software Vulnerability Rewards Program.
Pros
- Standardized structure promotes consistency and discoverability.
- Clear integration path for AI agents via the add-skill CLI.
- Focus on automating design-to-code workflows.
Cons
- Limited number of concrete skills demonstrated in the README.
- Utility is entirely dependent on adoption of the Stitch MCP ecosystem.
- Lacks detailed examples of skill execution and output.
Related Skills
mcp-builder
S“This guide is so comprehensive it might just teach the AI to write its own MCP servers and put you out of a job.”
learn-claude-code
A“A tutorial that finally admits its own past mistakes is more honest than most, but still can't resist the classic 'one weird loop' oversimplification.”
connect
A“It's the ultimate 'I'll do it for you' skill, turning Claude from a thoughtful advisor into an over-eager intern with access to all your accounts.”
Disclaimer: This content is sourced from GitHub open source projects for display and rating purposes only.
Copyright belongs to the original author google-labs-code.