Skill
stitch-a11y
Audits Stitch-generated components for WCAG 2.1 AA accessibility issues and applies fixes — semantic HTML, ARIA attributes, keyboard navigation, focus…
@gabelulView SkillDevelopment
Skill
/stitch-react-components
Converts a Stitch screen, a local HTML file, or a URL into modular Vite + React components — TypeScript, theme-mapped Tailwind, dark mode via CSS variables, and clean component architecture. Use this for Vite/React apps without App Router. For Next.js 15 App Router, use
Install
$ npx -y skills add gabelul/stitch-kit --skill stitch-react-components --agent claude-codeHow it fires
How this skill gets triggered: by you, by Claude, or both.
- Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.Auto-invocation is when the right skill fires by itself at the right moment, driven by a FLOW.md router and a hook, instead of you invoking it by name. It is the difference between a skill being installed and a skill actually getting used.Read the full definition →
- You can call itInvoke it directly when you want it.
- Slash command
/stitch-react-components
Context preview
The summary Claude sees to decide when to auto-load this skill.
Converts a Stitch screen, a local HTML file, or a URL into modular Vite + React components — TypeScript, theme-mapped Tailwind, dark mode via CSS variables, and clean component architecture. Use this for Vite/React apps without App Router. For Next.js 15 App Router, use
SKILL.md
stitch-react-components.SKILL.mdname: stitch-react-components
description: Converts a Stitch screen, a local HTML file, or a URL into modular Vite + React components — TypeScript, theme-mapped Tailwind, dark mode via CSS variables, and clean component architecture. Use this for Vite/React apps without App Router. For Next.js 15 App Router, use stitch-nextjs-components instead. Only the Stitch route needs an API key.
allowed-tools:
- "stitch*:*"
- "Bash"
- "Read"
- "Write"
Stitch → Vite / React Components
**Constraint:** Only use this skill when the user explicitly mentions "Stitch" and React (Vite, CRA, or just "React app" without Next.js).
You are a frontend engineer converting Stitch mobile/desktop designs into clean, modular React components using Vite + TypeScript. This skill targets plain React apps — **not** Next.js App Router. For Next.js, use `stitch-nextjs-components` instead.
When to use this skill vs. Next.js
| Scenario | Use | |----------|-----| | User says "React app", "Vite", "CRA" | `stitch-react-components` | | User says "Next.js", "App Router", "SSR" | `stitch-nextjs-components` | | User wants shadcn/ui components added after | `stitch-react-components` → then `stitch-shadcn-ui` | | User wants server-side rendering or file-based routing | `stitch-nextjs-components` |
Prerequisites
An HTML source. Any one of these works:
- A **Stitch screen** — needs Stitch MCP access and a generated screen
- A **local HTML file** — no Stitch account required
- A **URL** — no Stitch account required
Also:
- Node.js + npm/pnpm
- Vite + React project initialized: `npm create vite@latest my-app -- --template react-ts`
Step 1: Resolve the source
Everything downstream reads one file: `temp/source.html`. Get the HTML there by whichever route matches what the user gave you, then continue at Step 2 — the rest of this skill is identical regardless of where the markup came from.
**From a Stitch screen:**
1. **Namespace discovery** — `list_tools` to find the Stitch MCP prefix 2. **Fetch metadata** — `[prefix]:get_screen` with numeric `projectId` and `screenId` 3. **Download HTML** — GCS URLs need the reliable downloader:
bash scripts/fetch-stitch.sh "[htmlCode.downloadUrl]" "temp/source.html"
4. **Visual audit** — check `screenshot.downloadUrl` before rewriting. Append `=s0` to that URL for full resolution; the bare URL serves a 512px thumbnail regardless of the `width`/`height` the API reports.
**From a local HTML file:**
mkdir -p temp && cp "path/to/design.html" temp/source.html
**From a URL:**
bash scripts/fetch-stitch.sh "https://example.com/page" "temp/source.html"
Despite the name, that script is a generic hardened downloader — follows redirects, retries transient failures, handles gzip, and fails loudly on an empty result. It does not care whether the URL points at Stitch.
**From a screenshot:** there's no upload route — the Stitch MCP API has no image-upload tool. Either recreate the design from a text prompt via `stitch-mcp-generate-screen-from-text`, or hand-write the HTML and use the local-file route above.
> Only the Stitch route needs an API key. Converting a local file or a URL works with no Google account at all.
Step 2: Project structure
src/
├── components/ ← One file per component
│ └── [Name].tsx
├── data/
│ └── mockData.ts ← Static content (never in components)
├── theme/
│ ├── tokens.ts ← Design token constants
│ └── useTheme.ts ← Dark mode hook
├── types/
│ └── index.ts ← Shared TypeScript types
├── App.tsx ← Root component
└── main.tsx ← Entry point
Step 3: Extract design tokens
Resolve tokens from whatever the HTML actually gives you, in this order:
1. **Inline `tailwind.config`** in `<head>` (what Stitch emits) — use it directly if present. 2. **CSS custom properties** (`:root { --color-primary: ... }`) — common in hand-written and templated HTML. 3. **A linked or inline stylesheet** — parse declared colors, font-families, radii, spacing. 4. **Last resort** — derive tokens from the most frequent computed values in the markup (dominant background, text color, accent, heading/body font, border radius), and tell the user what you inferred so they can correct it.
The URL route only downloads the single HTML response — externally-linked stylesheets may not come along for the ride. If none of the above resolves a token, say so instead of inventing a palette.
// src/theme/tokens.ts
export const lightTokens = {
background: '#FFFFFF',
surface: '#F4F4F5',
primary: '#6366F1',
primaryFg: '#FFFFFF',
text: '#09090B',
textMuted: '#71717A',
border: '#E4E4E7',
} as const
export const darkTokens = {
background: '#09090B',
surface: '#18181B',
primary: '#818CF8',
primaryFg: '#09090B',
text: '#FAFAFA',
textMuted: '#A1A1AA',
border: '#27272A',
} as const
export type ThemeTokens = typeof lightTokens// src/theme/useTheme.ts
import { useEffect, useState } from 'react'
import { lightTokens, darkTokens, type ThemeTokens } from './tokens'
/**
* Returns current theme tokens based on system color scheme.
* Listens for system-level dark/light mode changes.
*/
export function useTheme(): ThemeTokens {
const [isDark, setIsDark] = useState(
() => window.matchMedia('(prefers-color-scheme: dark)').matches
)
useEffect(() => {
const mq = window.matchMedia('(prefers-color-scheme: dark)')
const handler = (e: MediaQueryListEvent) => setIsDark(e.matches)
mq.addEventListener('change', handler)
return () => mq.removeEventListener('change', handler)
}, [])
return isDark ? darkTokens : lightTokens
}Step 4: Component conversion rules
Layout mapping
| HTML/CSS | → React / Tailwind | |---|---| | `display:flex; flex-direction:column` | `<div className="flex flex-col gap-4">` | | `display:flex; flex-direction:row` | `<div className="flex
Read more
name: stitch-react-components description: Converts a Stitch screen, a local HTML file, or a URL into modular Vite + React components — TypeScript, theme-mapped Tailwind, dark mode via CSS variables, and clean component architecture. Use this for Vite/React apps without App Router. For Next.js 15 App Router, use stitch-nextjs-components instead. Only the Stitch route needs an API key. allowed-tools: - "stitch*:*" - "Bash" - "Read" - "Write"
Stitch → Vite / React Components
**Constraint:** Only use this skill when the user explicitly mentions "Stitch" and React (Vite, CRA, or just "React app" without Next.js).
You are a frontend engineer converting Stitch mobile/desktop designs into clean, modular React components using Vite + TypeScript. This skill targets plain React apps — **not** Next.js App Router. For Next.js, use `stitch-nextjs-components` instead.
When to use this skill vs. Next.js
| Scenario | Use | |----------|-----| | User says "React app", "Vite", "CRA" | `stitch-react-components` | | User says "Next.js", "App Router", "SSR" | `stitch-nextjs-components` | | User wants shadcn/ui components added after | `stitch-react-components` → then `stitch-shadcn-ui` | | User wants server-side rendering or file-based routing | `stitch-nextjs-components` |
Prerequisites
An HTML source. Any one of these works:
- A **Stitch screen** — needs Stitch MCP access and a generated screen
- A **local HTML file** — no Stitch account required
- A **URL** — no Stitch account required
Also:
- Node.js + npm/pnpm
- Vite + React project initialized: `npm create vite@latest my-app -- --template react-ts`
Step 1: Resolve the source
Everything downstream reads one file: `temp/source.html`. Get the HTML there by whichever route matches what the user gave you, then continue at Step 2 — the rest of this skill is identical regardless of where the markup came from.
**From a Stitch screen:**
1. **Namespace discovery** — `list_tools` to find the Stitch MCP prefix 2. **Fetch metadata** — `[prefix]:get_screen` with numeric `projectId` and `screenId` 3. **Download HTML** — GCS URLs need the reliable downloader:
bash scripts/fetch-stitch.sh "[htmlCode.downloadUrl]" "temp/source.html"
4. **Visual audit** — check `screenshot.downloadUrl` before rewriting. Append `=s0` to that URL for full resolution; the bare URL serves a 512px thumbnail regardless of the `width`/`height` the API reports.
**From a local HTML file:**
mkdir -p temp && cp "path/to/design.html" temp/source.html
**From a URL:**
bash scripts/fetch-stitch.sh "https://example.com/page" "temp/source.html"
Despite the name, that script is a generic hardened downloader — follows redirects, retries transient failures, handles gzip, and fails loudly on an empty result. It does not care whether the URL points at Stitch.
**From a screenshot:** there's no upload route — the Stitch MCP API has no image-upload tool. Either recreate the design from a text prompt via `stitch-mcp-generate-screen-from-text`, or hand-write the HTML and use the local-file route above.
> Only the Stitch route needs an API key. Converting a local file or a URL works with no Google account at all.
Step 2: Project structure
src/ ├── components/ ← One file per component │ └── [Name].tsx ├── data/ │ └── mockData.ts ← Static content (never in components) ├── theme/ │ ├── tokens.ts ← Design token constants │ └── useTheme.ts ← Dark mode hook ├── types/ │ └── index.ts ← Shared TypeScript types ├── App.tsx ← Root component └── main.tsx ← Entry point
Step 3: Extract design tokens
Resolve tokens from whatever the HTML actually gives you, in this order:
1. **Inline `tailwind.config`** in `<head>` (what Stitch emits) — use it directly if present. 2. **CSS custom properties** (`:root { --color-primary: ... }`) — common in hand-written and templated HTML. 3. **A linked or inline stylesheet** — parse declared colors, font-families, radii, spacing. 4. **Last resort** — derive tokens from the most frequent computed values in the markup (dominant background, text color, accent, heading/body font, border radius), and tell the user what you inferred so they can correct it.
The URL route only downloads the single HTML response — externally-linked stylesheets may not come along for the ride. If none of the above resolves a token, say so instead of inventing a palette.
// src/theme/tokens.ts
export const lightTokens = {
background: '#FFFFFF',
surface: '#F4F4F5',
primary: '#6366F1',
primaryFg: '#FFFFFF',
text: '#09090B',
textMuted: '#71717A',
border: '#E4E4E7',
} as const
export const darkTokens = {
background: '#09090B',
surface: '#18181B',
primary: '#818CF8',
primaryFg: '#09090B',
text: '#FAFAFA',
textMuted: '#A1A1AA',
border: '#27272A',
} as const
export type ThemeTokens = typeof lightTokens// src/theme/useTheme.ts
import { useEffect, useState } from 'react'
import { lightTokens, darkTokens, type ThemeTokens } from './tokens'
/**
* Returns current theme tokens based on system color scheme.
* Listens for system-level dark/light mode changes.
*/
export function useTheme(): ThemeTokens {
const [isDark, setIsDark] = useState(
() => window.matchMedia('(prefers-color-scheme: dark)').matches
)
useEffect(() => {
const mq = window.matchMedia('(prefers-color-scheme: dark)')
const handler = (e: MediaQueryListEvent) => setIsDark(e.matches)
mq.addEventListener('change', handler)
return () => mq.removeEventListener('change', handler)
}, [])
return isDark ? darkTokens : lightTokens
}Step 4: Component conversion rules
Layout mapping
| HTML/CSS | → React / Tailwind | |---|---| | `display:flex; flex-direction:column` | `<div className="flex flex-col gap-4">` | | `display:flex; flex-direction:row` | `<div className="flex
Ships withstitch-kit
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.
Get the whole plugin
Stats
45
Stars
5
Forks
Maintained
Maintenance
JavaScript
Language
Apache-2.0
License
1mo ago
Last commit
7mo ago
Created
Repo: gabelul/stitch-kit
Other skills on stitch-kit.
@gabelulView SkillSkill
stitch-animate
Adds a purposeful animation layer to Stitch-generated components — CSS transitions, Framer Motion (React/Next.js), or Svelte transitions. Always respects…
@gabelulView SkillSkill
stitch-design-md
Analyzes a Stitch project's screens and synthesizes a natural-language DESIGN.md — visual atmosphere, color palette with hex values, typography rules, and…
@gabelulView SkillSkill
stitch-design-system
Extracts a Stitch design and generates production code artifacts — CSS custom properties with dark mode tokens, a Tailwind v4 @theme block, and a semantic…
@gabelulView SkillSkill
stitch-html-components
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…
@gabelulView SkillSkill
stitch-ideate
Conversational design ideation agent that researches trends, explores visual directions, and refines ideas through adaptive questioning — then produces a rich…
@gabelulView Skill