stitch-a11y
Audits Stitch-generated components for WCAG 2.1 AA accessibility issues and applies fixes — semantic HTML, ARIA attributes, keyboard navigation, focus…
Retrieves metadata for a specific Stitch project — title, theme, create/update time. Use to inspect a project before generating new screens. Do NOT use this if you already have a screenId — use stitch-mcp-get-screen instead.
$ npx -y skills add gabelul/stitch-kit --skill stitch-mcp-get-project --agent claude-codeHow it fires
How this skill gets triggered: by you, by Claude, or both.
/stitch-mcp-get-projectContext preview
The summary Claude sees to decide when to auto-load this skill.
Retrieves metadata for a specific Stitch project — title, theme, create/update time. Use to inspect a project before generating new screens. Do NOT use this if you already have a screenId — use stitch-mcp-get-screen instead.
name: stitch-mcp-get-project description: Retrieves metadata for a specific Stitch project — title, theme, create/update time. Use to inspect a project before generating new screens. Do NOT use this if you already have a screenId — use stitch-mcp-get-screen instead. allowed-tools: - "stitch*:*"
Retrieves full metadata for a specific Stitch project. Useful for understanding an existing project's theme and screen list before generating additional screens.
**Only use this skill when the user explicitly mentions "Stitch".**
**Do NOT call this if you already have both `projectId` AND `screenId`.** In that case, call `stitch-mcp-get-screen` directly — it's more efficient.
The user may provide the project reference in several formats — always extract to the `projects/ID` format:
| Input format | → Argument for `get_project` | |---|---| | `3780309359108792857` (numeric) | `projects/3780309359108792857` | | `projects/3780309359108792857` | `projects/3780309359108792857` (use as-is) | | `https://stitch.withgoogle.com/projects/3780309359108792857` | Extract ID → `projects/3780309359108792857` |
{
"name": "get_project",
"arguments": {
"name": "projects/3780309359108792857"
}
}{
"name": "projects/3780309359108792857",
"title": "Analytics Dashboard",
"createTime": "2024-11-10T09:00:00Z",
"updateTime": "2024-11-15T10:30:00Z",
"deviceType": "DESKTOP",
"visibility": "PRIVATE",
"projectType": "TEXT_TO_UI",
"origin": "STITCH",
"metadata": {
"isRemixed": false,
"userRole": "OWNER"
},
"designTheme": {
"colorMode": "LIGHT",
"customColor": "#6366F1",
"colorVariant": "TONAL_SPOT",
"roundness": "ROUND_TWELVE",
"saturation": 3,
"spacingScale": 1,
"headlineFont": "INTER",
"bodyFont": "INTER",
"labelFont": "INTER",
"font": "INTER",
"headlineFontFamily": "Inter",
"bodyFontFamily": "Inter",
"labelFontFamily": "Inter",
"namedColors": {
"primary": "#5B5FC7",
"on_primary": "#FFFFFF",
"primary_container": "#E1DFFF",
"on_primary_container": "#414594",
"secondary": "#5C5D72",
"on_secondary": "#FFFFFF",
"tertiary": "#785572",
"on_tertiary": "#FFFFFF",
"surface": "#FBF8FF",
"on_surface": "#1B1B21",
"surface_container": "#EFEDF5",
"surface_container_low": "#F5F2FA",
"surface_container_high": "#E9E7EF",
"outline": "#777680",
"error": "#BA1A1A",
"on_error": "#FFFFFF"
},
"overridePrimaryColor": "",
"overrideSecondaryColor": "",
"overrideTertiaryColor": "",
"overrideNeutralColor": "",
"backgroundLight": "#FBF8FF",
"backgroundDark": "#131316",
"description": "Modern indigo-toned interface with clean surfaces",
"designMd": "# Design System\n\n## Color Palette\n..."
},
"screenInstances": [
{
"name": "projects/3780309359108792857/screens/88805...",
"id": "88805...",
"sourceScreen": "screens/88805...",
"type": "SCREEN_INSTANCE",
"width": 412,
"height": 892,
"x": 0,
"y": 0,
"hidden": false
},
{
"name": "projects/3780309359108792857/screens/99901...",
"id": "99901...",
"sourceScreen": "screens/99901...",
"type": "DESIGN_SYSTEM_INSTANCE",
"width": 412,
"height": 892,
"x": 500,
"y": 0,
"hidden": false,
"sourceAsset": "assets/design-system-123"
}
]
}> `designMd` is truncated above — in practice it's a full auto-generated design system doc (often 500+ lines). `namedColors` typically contains 40+ semantic tokens; only the most common are shown here.
| Field | Type | Values / Notes | |-------|------|----------------| | `colorMode` | enum | `LIGHT`, `DARK` | | `customColor` | string | Hex seed color (e.g. `#6366F1`). This is the color seed — NOT called `primaryColor` | | `colorVariant` | enum | `MONOCHROME`, `NEUTRAL`, `TONAL_SPOT`, `VIBRANT`, `EXPRESSIVE`, `FIDELITY`, `CONTENT`, `RAINBOW`, `FRUIT_SALAD` | | `roundness` | enum | `ROUND_FOUR`, `ROUND_EIGHT`, `ROUND_TWELVE`, `ROUND_FULL` | | `spacingScale` | number | `0`–`3` (density multiplier) | | `headlineFont` | enum | 68-font set: `INTER`, `GEIST`, `DM_SANS`, `MANROPE`, `PLUS_JAKARTA_SANS`, `WORK_SANS`, `SPACE_GROTESK`, `SORA`, `OUTFIT`, `RALEWAY`, `QUICKSAND`, `MONTSERRAT`, `OSWALD`, `PLAYFAIR_DISPLAY`, `MERRIWEATHER`, `NOTO_SERIF`, `EB_GARAMOND`, `LITERATA`, `SOURCE_SERIF_4`, `SOURCE_SANS_3`, `NUNITO_SANS`, `JETBRAINS_MONO`, `BEBAS_NEUE`, `ANTON`, `ARCHIVO_NARROW` — see `stitch-ued-guide` for the full 68-value list | | `bodyFont` | enum | Same 68-font set | | `labelFont` | enum | Same 68-font set | | `font` | enum | **Deprecated** — legacy single-font field, same enum | | `namedColors` | object | 40+ semantic color tokens (`primary`, `on_primary`, `surface`, `surface_container`, `outline`, `error`, etc.) | | `overridePrimaryColor` | string | Hex override, empty string if unused | | `overrideSecondaryColor` | string | Hex override, empty string if unused | | `overrideTertiaryColor` | string | Hex override, empty string if unused | | `overrideNeutralColor` | string | Hex override, empty string if unused | | `backgroundLight` | string | Hex background for light mode | | `backgroundDark` | string | Hex background for dark mode | | `description` | string | Brief aesthetic description of the theme | | `designMd` | string | Auto-generated design system markdown — the full token spec. Can be very long | | `spacing` | object | Optional. Map of spacing token name → CSS value (e.g. `{"sm": "8px"}`) | | `typography
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…