stitch-a11y
Audits Stitch-generated components for WCAG 2.1 AA accessibility issues and applies fixes — semantic HTML, ARIA attributes, keyboard navigation, focus…
Creates a new Stitch project container (a design workspace). Call this when starting a new design session to get a projectId for screen generation.
$ npx -y skills add gabelul/stitch-kit --skill stitch-mcp-create-project --agent claude-codeHow it fires
How this skill gets triggered: by you, by Claude, or both.
/stitch-mcp-create-projectContext preview
The summary Claude sees to decide when to auto-load this skill.
Creates a new Stitch project container (a design workspace). Call this when starting a new design session to get a projectId for screen generation.
name: stitch-mcp-create-project description: Creates a new Stitch project container (a design workspace). Call this when starting a new design session to get a projectId for screen generation. allowed-tools: - "stitch*:*"
Creates a new Stitch project. A project is a container that holds one or more generated screens. You need a projectId before you can call `generate_screen_from_text`.
**Only use this skill when the user explicitly mentions "Stitch"** in their request. Never trigger Stitch operations silently during regular conversation.
Infer a descriptive project title from the user's request:
| User says | → title | |-----------|---------| | "Design a pet adoption app" | `"PawPals"` or `"Pet Adoption App"` | | "Make a login page" | `"Login Page"` | | "SaaS dashboard for analytics" | `"Analytics Dashboard"` | | "E-commerce product listing" | `"Product Listing"` |
If no clear name is evident, use a descriptive label: `"Design Project [date]"`.
{
"name": "create_project",
"arguments": {
"title": "[Descriptive project title]"
}
}The tool returns a `name` field in the format `projects/NUMERIC_ID`. You must extract the numeric portion:
**Tool response:**
{
"name": "projects/3780309359108792857",
"title": "Analytics Dashboard",
"createTime": "2026-03-24T14:30:00Z",
"visibility": "PRIVATE",
"deviceType": "DESKTOP",
"projectType": "TEXT_TO_UI",
"designTheme": {
"colorMode": "LIGHT",
"customColor": "",
"colorVariant": "TONAL_SPOT",
"roundness": "ROUND_TWELVE",
"spacingScale": 1,
"headlineFont": "INTER",
"bodyFont": "INTER",
"labelFont": "INTER",
"namedColors": {},
"designMd": ""
}
}> The `designTheme` populates with full values (including `designMd` and `namedColors`) after the first screen is generated. For a brand-new project, expect mostly empty/default theme values.
**Extract:**
Store both values. Announce to the user: > "Created project **'Analytics Dashboard'** (ID: `3780309359108792857`). Ready to generate screens."
| Tool | ID format required | |------|-------------------| | `generate_screen_from_text` | Numeric only: `3780309359108792857` | | `get_screen` | Numeric only: `3780309359108792857` | | `list_screens` | Full path: `projects/3780309359108792857` | | `get_project` | Full path: `projects/3780309359108792857` |
After creating a project, the next step is always `stitch-mcp-generate-screen-from-text` to generate the first screen.
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.
Repo: gabelul/stitch-kit
Audits Stitch-generated components for WCAG 2.1 AA accessibility issues and applies fixes — semantic HTML, ARIA attributes, keyboard navigation, focus…
Adds a purposeful animation layer to Stitch-generated components — CSS transitions, Framer Motion (React/Next.js), or Svelte transitions. Always respects…
Analyzes a Stitch project's screens and synthesizes a natural-language DESIGN.md — visual atmosphere, color palette with hex values, typography rules, and…
Extracts a Stitch design and generates production code artifacts — CSS custom properties with dark mode tokens, a Tailwind v4 @theme block, and a semantic…
Converts a Stitch screen, a local HTML file, or a URL into clean, platform-agnostic HTML5 + CSS — semantic markup, CSS custom properties for theming, dark mode…
Conversational design ideation agent that researches trends, explores visual directions, and refines ideas through adaptive questioning — then produces a rich…