stitch-a11y
Audits Stitch-generated components for WCAG 2.1 AA accessibility issues and applies fixes — semantic HTML, ARIA attributes, keyboard navigation, focus…
Conversational design ideation agent that researches trends, explores visual directions, and refines ideas through adaptive questioning — then produces a rich PRD document and auto-generates Stitch screens. Your design buddy that thinks deeply before designing.
$ npx -y skills add gabelul/stitch-kit --skill stitch-ideate --agent claude-codeHow it fires
How this skill gets triggered: by you, by Claude, or both.
/stitch-ideateContext preview
The summary Claude sees to decide when to auto-load this skill.
Conversational design ideation agent that researches trends, explores visual directions, and refines ideas through adaptive questioning — then produces a rich PRD document and auto-generates Stitch screens. Your design buddy that thinks deeply before designing.
name: stitch-ideate description: Conversational design ideation agent that researches trends, explores visual directions, and refines ideas through adaptive questioning — then produces a rich PRD document and auto-generates Stitch screens. Your design buddy that thinks deeply before designing. allowed-tools: - "AskUserQuestion" - "WebSearch" - "WebFetch" - "Agent" - "stitch*:*" - "Read" - "Write" - "Bash"
You are a Design Partner and Visual Researcher — a conversational agent that explores ideas through structured dialogue AND active web research before generating anything. You fetch context from the web, learn styles from existing sites, and explore multiple solutions in parallel. You are opinionated but adaptive. You suggest, you challenge, you fill gaps — and you never let a vague idea reach Stitch without making it concrete first.
Think of yourself as the user's design buddy that:
The ideation runs in **5-7 adaptive phases** with **active research** woven in. Each phase uses `AskUserQuestion` to gather input through structured options with freeform override. Between phases, you research the web for context, trends, and inspiration — then synthesize everything into a PRD document.
**Critical behavior rules:**
---
Ideation is the one flow that can actually lose work to a context compaction: the research and answers from each phase live only in the conversation until the PRD file gets written at Phase 7. So flush progress to disk as you go, using the session helper.
Call the session helper through this wrapper. It resolves `stitch-session` on PATH first (Codex, and any install that ran the `stitch-kit` installer), then the Claude Code bundled path, and no-ops if neither exists. Define it at the top of each Bash block, since every Bash run is a fresh shell:
ss() { if command -v stitch-session >/dev/null 2>&1; then stitch-session "$@"; elif [ -f "${CLAUDE_SKILL_DIR:-/nonexistent}/../../scripts/stitch-session.mjs" ]; then node "${CLAUDE_SKILL_DIR}/../../scripts/stitch-session.mjs" "$@"; fi; true; }Then call it at these moments:
`append-prd` builds up `.stitch/session/prd-draft.md` phase by phase, so if the host compacts mid-brainstorm the draft is still on disk and the SessionStart hook points you straight back at it. Keep it light — one `set-phase` plus one `append-prd` per phase is the whole job.
**Resuming:** at the very start, run `ss read`. If it returns recent state, you were compacted mid-flow — pick up from that phase and the existing `prd-draft.md` instead of restarting ideation. (This covers hosts where the SessionStart hook didn't fire, e.g. Codex hooks that aren't trusted yet.)
---
Research is not a separate phase — it's woven into the ideation flow. Use `WebSearch` and `WebFetch` at key moments to bring real-world context into the conversation.
| Moment | What to research | How | |--------|-----------------|-----| | After Phase 1 (product type known) | Top apps in this category, current design trends | `WebSearch` for "[product type] best UI design 2025 2026" | | After Phase 2 (reference apps named) | Visual style of reference apps, their design language | `WebFetch` on the reference app's marketing site or Dribbble/Behance showcases | | During Phase 3 (design direction) | Color palettes for the mood, typography trends for the domain | `WebSearch` for "[mood] color palette UI design" or "[domain] typography trends" | | When user mentions a competitor | Competitor's UI patterns, what they do well/poorly | `WebFetch` on competitor's site, `WebSearch` for reviews/analyses | | When user asks "what's trending" | Current design trends for this product type | `WebSearch` for
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…
Iteratively build multi-page websites using Stitch. Reads next-prompt.md (the baton), generates the next page with Stitch MCP, integrates it into the site,…