stitch-a11y
Audits Stitch-generated components for WCAG 2.1 AA accessibility issues and applies fixes — semantic HTML, ARIA attributes,…
Lists all Stitch Design Systems, optionally filtered by project. Returns asset names needed for apply and update operations.
Claude Code
$ npx -y skills add gabelul/stitch-kit --skill stitch-mcp-list-design-systems --agent claude-code
Codex
$ npx skills add gabelul/stitch-kit --skill stitch-mcp-list-design-systems -a codex -y
Cursor
$ npx skills add gabelul/stitch-kit --skill stitch-mcp-list-design-systems -a cursor -y
Gemini CLI
$ npx skills add gabelul/stitch-kit --skill stitch-mcp-list-design-systems -a gemini-cli -y
GitHub Copilot
$ npx skills add gabelul/stitch-kit --skill stitch-mcp-list-design-systems -a github-copilot -y
OpenCode
$ npx skills add gabelul/stitch-kit --skill stitch-mcp-list-design-systems -a opencode -y
Windsurf
$ npx skills add gabelul/stitch-kit --skill stitch-mcp-list-design-systems -a windsurf -y
name: stitch-mcp-list-design-systems description: Lists all Stitch Design Systems, optionally filtered by project. Returns asset names needed for apply and update operations. allowed-tools: - "stitch*:*"
Lists all available Stitch Design Systems. These are reusable theme configurations (colors, fonts, roundness) that can be applied to screens for visual consistency across a project.
**Only use this skill when the user explicitly mentions "Stitch".**
{
"name": "list_design_systems",
"arguments": {
"projectId": "3780309359108792857"
}
}✅ "3780309359108792857" ❌ "projects/3780309359108792857"
If omitted, returns all design systems across all projects.
Returns an array of Asset objects:
{
"assets": [
{
"name": "assets/15996705518239280238",
"displayName": "SaaS Dashboard Theme",
"designSystem": {
"theme": {
"colorMode": "LIGHT",
"font": "DM_SANS",
"roundness": "ROUND_EIGHT",
"customColor": "#6366F1",
"backgroundLight": "#FFFFFF",
"backgroundDark": "#18181B"
}
}
}
]
}Present as a readable table:
| # | Name | Font | Color | Mode | Asset ID | |---|------|------|-------|------|----------| | 1 | SaaS Dashboard Theme | DM Sans | #6366F1 | Light | `15996705518239280238` |
Then offer:
Extract the `name` field from each asset (`assets/15996...`). It's used two different ways depending on the next call:
Your coding agent writes decent code and designs terrible UI. stitch-kit fixes the second half — it wires agents into Google Stitch (text prompts → genuinely beautiful screens) and teaches them to drive it properly.
Audits Stitch-generated components for WCAG 2.1 AA accessibility issues and applies fixes — semantic HTML, ARIA attributes,…
Adds a purposeful animation layer to Stitch-generated components — CSS transitions, Framer Motion (React/Next.js), or Svelte…
Analyzes a Stitch project's screens and synthesizes a natural-language DESIGN.md — visual atmosphere, color palette with hex…
Extracts a Stitch design and generates production code artifacts — CSS custom properties with dark mode tokens, a Tailwind v4…
Converts a Stitch screen, a local HTML file, or a URL into clean, platform-agnostic HTML5 + CSS — semantic markup, CSS custom…
Conversational design ideation agent that researches trends, explores visual directions, and refines ideas through adaptive…
You MUST use this before any creative work - creating features, building components, adding functionality, modifying behavior, or…
Ask which skill or flow fits your situation. A router over the skills in this repo.