stitch-a11y
Audits Stitch-generated components for WCAG 2.1 AA accessibility issues and applies fixes — semantic HTML, ARIA attributes, keyboard navigation, focus…
Lists all screens in a Stitch project. Use this after generate_screen_from_text to find the screenId of the newly generated screen, then call stitch-mcp-get-screen to retrieve it.
$ npx -y skills add gabelul/stitch-kit --skill stitch-mcp-list-screens --agent claude-codeHow it fires
How this skill gets triggered: by you, by Claude, or both.
/stitch-mcp-list-screensContext preview
The summary Claude sees to decide when to auto-load this skill.
Lists all screens in a Stitch project. Use this after generate_screen_from_text to find the screenId of the newly generated screen, then call stitch-mcp-get-screen to retrieve it.
name: stitch-mcp-list-screens description: Lists all screens in a Stitch project. Use this after generate_screen_from_text to find the screenId of the newly generated screen, then call stitch-mcp-get-screen to retrieve it. allowed-tools: - "stitch*:*"
Lists all screens contained within a specific Stitch project. You typically call this right after `generate_screen_from_text` to find the `screenId` of the screen that was just created.
**Only use this skill when the user explicitly mentions "Stitch".**
**Important: Use the `projects/ID` format — not the numeric ID alone.**
{
"name": "list_screens",
"arguments": {
"projectId": "projects/3780309359108792857"
}
}✅ "projects/3780309359108792857" ❌ "3780309359108792857"
{
"screens": [
{
"name": "projects/3780309359108792857/screens/88805abc123def456",
"title": "Login Screen",
"screenshot": {
"downloadUrl": "https://storage.googleapis.com/..."
},
"deviceType": "MOBILE"
}
]
}1. Identify the target screen (usually the most recently generated — last in the list) 2. Extract the numeric `screenId` from the `name` field:
3. Call `stitch-mcp-get-screen` with the numeric `projectId` and `screenId`
For the next call (`get_screen`), you need the **numeric IDs** for both project and 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…