stitch-kit 1.5.0

package/AGENTS.md

@@ -0,0 +1,139 @@
+# AGENTS.md
+
+Guidance for Claude Code, Cursor, Copilot, Codex CLI, and other AI agents working with this plugin.
+
+## What this repo is
+
+A collection of Claude Code **skills** — 34 packaged instructions and scripts that extend AI agents with Stitch-specific capabilities: text-to-UI generation, design iteration (edit, variants, design systems), design token extraction, and multi-framework conversion. Think of it as a Stitch co-pilot that wraps all 14 MCP tools and knows the footguns so you don't have to learn them the hard way.
+
+## Skill structure
+
+Each skill directory follows the Agent Skills standard:
+
+```
+skills/{skill-name}/
+├── SKILL.md              ← Required: activation instructions and workflow
+├── examples/             ← Required: worked examples (gold-standard reference)
+├── resources/            ← Optional: templates, checklists, mapping tables
+├── scripts/              ← Optional: bash scripts (fetch-stitch.sh, encode-image.sh, etc.)
+└── references/           ← Optional: style guides, contracts
+```
+
+- **SKILL.md**: YAML frontmatter (`name`, `description`, `allowed-tools`) + markdown instructions
+- **examples/**: Load for few-shot context when needed
+- **resources/**, **scripts/**: Progressive disclosure — reference only when relevant
+
+## Quick install (both platforms)
+
+```bash
+npx stitch-kit
+```
+
+Auto-detects Claude Code and/or Codex CLI and installs to the right places. Also tells you if Stitch MCP needs configuring.
+
+To update later: `npx stitch-kit update` (npx always fetches the latest version).
+To check what's installed: `npx stitch-kit status`.
+
+## Installing (Claude Code)
+
+Stitch MCP first:
+
+```bash
+claude mcp add stitch -- npx -y @google/stitch-mcp
+```
+
+Then the plugin:
+
+```bash
+/plugin marketplace add https://github.com/gabelul/stitch-kit.git
+/plugin install stitch-kit@stitch-kit
+```
+
+## Installing (Codex CLI)
+
+```bash
+npx stitch-kit
+```
+
+Or clone and run the installer manually:
+
+```bash
+git clone https://github.com/gabelul/stitch-kit.git
+cd stitch-kit && bash install-codex.sh
+```
+
+Then wire up Stitch MCP in `~/.codex/config.toml`:
+
+```toml
+[mcp_servers.stitch]
+command = "npx"
+args = ["-y", "@google/stitch-mcp"]
+```
+
+Use `$stitch-kit` to invoke the agent or `$stitch-orchestrator` to run a skill directly.
+
+## Agent definition
+
+`agents/stitch-kit.md` defines the stitch-kit specialist agent. Works in both Claude Code and Codex. It knows the full skill set (including edit-screens, generate-variants, design systems), handles Stitch URL parsing, and routes to the right skill automatically.
+
+## Recommended entry point
+
+For Stitch-based UI generation, load **`stitch-orchestrator`** or invoke the **`stitch-kit` agent** — both coordinate the full workflow end-to-end. Start here unless you have a specific reason to go manual.
+
+## Architecture (4 layers)
+
+| Layer | Count | Purpose |
+|-------|-------|---------|
+| **Brain** (`stitch-ui-*`) | 4 | Design intelligence — specs, prompts, variants, UED guide |
+| **Hands** (`stitch-mcp-*`) | 14 | MCP wrappers — one per Stitch API tool, handles ID format rules |
+| **Conversion** | 7+ | Stitch HTML → framework components (Next.js, Svelte, React, HTML, RN, SwiftUI, shadcn) |
+| **Quality** | 3 | Design tokens, accessibility audit, animations |
+
+## MCP prerequisite
+
+Skills marked `allowed-tools: ["stitch*:*"]` require the **Stitch MCP Server** configured in your client. Without it, the generation steps won't work.
+
+Setup guide: https://stitch.withgoogle.com/docs/mcp/guide/
+
+All 14 tools wrapped: `create_project`, `get_project`, `delete_project`, `list_projects`, `generate_screen_from_text`, `upload_screens_from_images`, `edit_screens`, `generate_variants`, `list_screens`, `get_screen`, `create_design_system`, `update_design_system`, `list_design_systems`, `apply_design_system`
+
+Without MCP: the orchestrator falls back to prompt-only mode (generates ready-to-copy Stitch prompts instead of running the full workflow — still useful, just slower).
+
+## Key skills reference
+
+| Skill | When to invoke |
+|-------|----------------|
+| `stitch-orchestrator` | "Use Stitch to design X" — handles everything |
+| `stitch-ui-design-spec-generator` | User request → structured JSON design spec |
+| `stitch-ui-prompt-architect` | Design spec → structured Stitch prompt |
+| `stitch-mcp-edit-screens` | Edit existing screens with text prompts (iteration) |
+| `stitch-mcp-generate-variants` | Generate design alternatives with creativity controls |
+| `stitch-mcp-upload-screens-from-images` | Import screenshots for redesign workflows |
+| `stitch-mcp-create-design-system` | Create reusable Stitch Design Systems |
+| `stitch-mcp-apply-design-system` | Apply design systems to screens |
+| `stitch-mcp-get-screen` | Retrieve screen HTML + screenshot by ID |
+| `stitch-design-system` | Extract design tokens → CSS + Tailwind files |
+| `stitch-nextjs-components` | Convert to Next.js 15 App Router |
+| `stitch-svelte-components` | Convert to Svelte 5 / SvelteKit |
+| `stitch-html-components` | Convert to HTML5 + CSS (WebView / Capacitor) |
+| `stitch-react-native-components` | Convert to React Native / Expo |
+| `stitch-swiftui-components` | Convert to SwiftUI (iOS) |
+| `stitch-loop` | Iterative multi-page site building |
+| `stitch-shadcn-ui` | Add shadcn/ui components to React output |
+| `stitch-animate` | Add animations to generated components |
+| `stitch-a11y` | WCAG 2.1 AA accessibility audit and fixes |
+| `stitch-setup` | Install Stitch MCP + this plugin |
+
+## Full docs reference
+
+See [`docs/`](docs/) for:
+- `skills-index.md` — complete skills table with descriptions and layers
+- `mcp-schemas/` — JSON Schema for all 14 Stitch MCP tools
+- `color-prompt-guide.md` — 8 ready-to-use color palette prompts for Stitch
+- `tailwind-reference.md` — Tailwind utility class reference for conversions
+- `mcp-naming-convention.md` — MCP tool name → skill name mapping
+- `prd-to-stitch-workflow.md` — PRD-driven design workflow guide
+
+## Context efficiency
+
+Skills load on demand — only the relevant `SKILL.md` gets loaded per request. Resources and examples are loaded progressively when the skill needs them. Keep `SKILL.md` focused (under 500 lines) and use `references/` for detail.

package/CHANGELOG.md

@@ -0,0 +1,86 @@
+# Changelog
+
+## 1.0.0 (2026-02-25)
+
+
+### Features
+
+* add 8 MCP wrappers, orchestrator iteration loop, native variants, design systems ([a77405a](https://github.com/gabelul/stitch-kit/commit/a77405a6248c22327a355124150a663c4364319f))
+* add prompt quality standard, project reuse, generation timing ([b525398](https://github.com/gabelul/stitch-kit/commit/b525398a07d422c8df6bb1192b76458daa420b9a))
+* initial release — stitch-kit v1.3.0 ([6ec1494](https://github.com/gabelul/stitch-kit/commit/6ec1494b578f8ea344fdbb11ebd9cebd96021a7f))
+* register agents directory in plugin manifest and marketplace ([181a7cf](https://github.com/gabelul/stitch-kit/commit/181a7cfe33d036ac581a934e0a0f9700465b7a9e))
+
+
+### Bug Fixes
+
+* add tools and color fields to agent frontmatter to match Claude Code agent format ([40edcf5](https://github.com/gabelul/stitch-kit/commit/40edcf55a859ba332e0572aa3f14132e6f4d6a9f))
+* remove agents field from marketplace plugins array (invalid schema) ([1ad69b7](https://github.com/gabelul/stitch-kit/commit/1ad69b7137be55d999989e34b15add7aeac043ad))
+* remove unverified agents field from plugin.json ([b0b1e7b](https://github.com/gabelul/stitch-kit/commit/b0b1e7b65ccf62a5c27be73347af2f1e126ee6a8))
+* rename plugin group to stitch-kit for agent auto-discovery ([e1cd72f](https://github.com/gabelul/stitch-kit/commit/e1cd72f79b2fe19bbd810eb4525ba14a29d4ed7b))
+* strip agent frontmatter to minimal format for plugin discovery ([69ec523](https://github.com/gabelul/stitch-kit/commit/69ec5235e9b50bfe37625afd99472bdbafb3843d))
+
+## [1.5.0] - 2026-02-25
+
+### Added
+- 8 new MCP wrapper skills covering all remaining Stitch API tools (14 total):
+  - `stitch-mcp-edit-screens` — iterate on designs with text prompts (the iteration tool)
+  - `stitch-mcp-generate-variants` — native variant generation with creativity/aspect controls
+  - `stitch-mcp-upload-screens-from-images` — import screenshots for redesign workflows
+  - `stitch-mcp-delete-project` — project cleanup with mandatory confirmation gate
+  - `stitch-mcp-create-design-system` — create reusable Stitch Design Systems from tokens
+  - `stitch-mcp-update-design-system` — modify existing design systems
+  - `stitch-mcp-list-design-systems` — discover available design systems
+  - `stitch-mcp-apply-design-system` — apply design systems to screens for visual consistency
+- `encode-image.sh` helper script for base64 image encoding (macOS + Linux)
+- Post-generation iteration loop in orchestrator (Step 5b) — edit, variant, or apply design system before code conversion
+- Design system bridge (Step 7b) — maps extracted CSS tokens to Stitch Design System format
+- Design system check (Step 4b) — detects existing design systems when selecting a project
+- Native API detection in `stitch-ui-design-variants` — uses `generate_variants` tool when available (1 call vs 3)
+- Consolidated ID format table for all 14 MCP tools in orchestrator
+- 8 new JSON schema files in `docs/mcp-schemas/`
+
+### Changed
+- Orchestrator intent classification expanded from 4 to 7 (added: Edit existing, Upload screenshot, Delete project)
+- Orchestrator Step 6 menus expanded with edit, variant, and design system options
+- `stitch-mcp-generate-screen-from-text` deviceType enum: replaced `SMART_WATCH` with `AGNOSTIC`
+- Skill count: 26 → 34
+- MCP wrapper count: 6 → 14
+- Anti-patterns expanded from 7 to 11
+
+### Fixed
+- `deviceType` enum now matches official Stitch API (`AGNOSTIC` instead of non-existent `SMART_WATCH`)
+
+## [1.4.0] - 2026-02-25
+
+### Added
+- Prompt Quality Standard checklist in `stitch-ui-prompt-architect` — requires explicit hex colors, px font sizes, component styles before generation
+- Verification gate in orchestrator before screen generation
+- Project reuse logic — orchestrator checks existing projects before creating new ones
+- Generation timing guidance (60–180s is normal, no spam retries)
+- CHANGELOG.md for tracking releases
+
+### Changed
+- README install section: clarified agent discovery behavior
+- Orchestrator Step 4: asks before creating new projects
+- Orchestrator Step 5: generation timing + retry rules
+- `stitch-mcp-generate-screen-from-text`: added timing section
+- Strengthened anti-patterns in orchestrator (no silent project creation, no retry spam)
+
+## [1.3.0] - 2026-02-19
+
+### Added
+- 26 skills covering full design-to-code pipeline
+- Agent definition (`agents/stitch-kit.md`) for Claude Code + Codex
+- MCP wrapper skills handling Stitch ID format inconsistencies
+- Framework targets: Next.js, Svelte, React, HTML, React Native, SwiftUI
+- Post-gen quality: design tokens, a11y audit, animations
+- Multi-page consistency via stitch-loop + DESIGN.md
+- Codex CLI support via install-codex.sh
+- GitHub Actions CI validation
+- release-please automated versioning
+
+### Architecture
+- Brain layer: spec-generator, prompt-architect, design-variants, ued-guide
+- Hands layer: 6 MCP wrapper skills
+- Quality layer: design-system, a11y, animate
+- Loop layer: stitch-loop + design-md

package/README.md

@@ -0,0 +1,167 @@
+# stitch-kit — AI UI design to production code, for Claude Code and Codex
+
+The Claude Code plugin for AI UI design — generate screens with Stitch MCP and convert them to something you can actually ship.
+
+I built this because Stitch MCP generates beautiful screens, and then... you're on your own. The raw output is HTML. Getting it into Next.js with dark mode, proper TypeScript, design tokens, and accessibility? That's the part nobody talks about. So I built the pipeline that handles it.
+
+34 skills. One entry point. Covers the full trip from "describe a UI" to production-ready components in Next.js, Svelte, React, React Native, SwiftUI, or plain HTML. Works in Claude Code and Codex CLI.
+
+---
+
+## Install
+
+### Quick install (both platforms)
+
+```bash
+npx stitch-kit
+```
+
+Auto-detects Claude Code and/or Codex CLI and installs to the right places. Also tells you if Stitch MCP needs configuring.
+
+To update later: `npx stitch-kit update` (npx always fetches the latest version).
+To check what's installed: `npx stitch-kit status`.
+
+### Claude Code (plugin)
+
+Stitch MCP first (it's what actually talks to Google's generation API):
+
+```bash
+claude mcp add stitch -- npx -y @google/stitch-mcp
+```
+
+Sign in at [stitch.withgoogle.com](https://stitch.withgoogle.com) to do the Google auth thing. Then the plugin:
+
+```bash
+/plugin marketplace add https://github.com/gabelul/stitch-kit.git
+/plugin install stitch-kit@stitch-kit
+```
+
+Restart Claude Code. The `stitch-kit` agent activates automatically when you describe Stitch tasks — it may not appear in the Plugin agents list depending on your Claude Code version, but it works when invoked.
+
+### Codex CLI
+
+```bash
+npx stitch-kit
+```
+
+Or clone and run the installer manually:
+
+```bash
+git clone https://github.com/gabelul/stitch-kit.git
+cd stitch-kit && bash install-codex.sh
+```
+
+Then wire up Stitch MCP in `~/.codex/config.toml`:
+
+```toml
+[mcp_servers.stitch]
+command = "npx"
+args = ["-y", "@google/stitch-mcp"]
+```
+
+Use `$stitch-kit` to activate the agent or `$stitch-orchestrator` to go straight to the pipeline.
+
+---
+
+## How it works
+
+1. You describe what you want to build
+2. `stitch-orchestrator` handles: spec → prompt → generate → retrieve → tokens → convert
+3. You get TypeScript components with dark mode, responsive layout, and ARIA — not vibes
+
+There's an agent definition (`agents/stitch-kit.md`) for both Claude Code and Codex — a Stitch-aware agent that knows the ID format quirks, routes to the right skill, and doesn't hallucinate MCP tool names.
+
+---
+
+## Architecture
+
+Four layers. Each one exists for a reason.
+
+| Layer | What it is | What it does |
+|-------|------------|-------------|
+| **Brain** (`stitch-ui-*`) | Design intelligence | Spec generation, prompt engineering, design variants. No API calls, no cost. |
+| **Hands** (`stitch-mcp-*`) | MCP wrappers | One skill per Stitch API tool (all 14). Handles the ID format mess so the orchestrator doesn't have to. |
+| **Quality** | Post-gen polish | Design tokens → CSS vars, WCAG 2.1 AA audit, animations with reduced-motion. |
+| **Loop** | Multi-page builds | `DESIGN.md` carries visual state between screens so your 5th screen looks like your 1st. |
+
+**Why do the MCP wrappers exist?** Because `generate_screen_from_text` and `get_screen` want numeric IDs, while `get_project` and `list_screens` want `projects/ID` — and agents get this wrong constantly. The wrappers bake the rules in so you don't have to think about it. (It's a small thing that ruins a lot of runs.)
+
+Details → [docs/architecture.md](docs/architecture.md)
+
+---
+
+## What's in each skill
+
+```
+skills/[skill-name]/
+├── SKILL.md        — what it is, when to use it, how to run it
+├── examples/       — real examples the agent can copy instead of guess
+├── references/     — design contracts, checklists (loaded on demand)
+└── scripts/        — fetch helpers, validators, code generators
+```
+
+Every skill tells the agent what it does and when to reach for it. The examples folder is why output quality is consistent — agents copy real patterns instead of hallucinating boilerplate. The scripts handle the stuff that needs to actually run (like downloading Stitch HTML before the GCS URL expires).
+
+---
+
+## vs. the official Google Stitch Skills
+
+The [official repo](https://github.com/google-labs-code/stitch-skills) has 6 skills. stitch-kit has 34. Every official skill has a local equivalent that's stronger:
+
+| Official | stitch-kit | What's different |
+|----------|-----------|-----------------|
+| `design-md` | `stitch-design-md` | Adds Section 6 — design system notes that feed back into Stitch prompts for consistent multi-screen output |
+| `enhance-prompt` | `stitch-ui-prompt-architect` | Two modes: (A) vague → enhanced, same as official; (B) Design Spec + request → structured `[Context][Layout][Components]` prompt. Mode B produces significantly better results. |
+| `stitch-loop` | `stitch-loop` | Visual verification step, explicit MCP naming throughout, DESIGN.md integration |
+| `react-components` | `stitch-react-components` | MCP-native retrieval, optional DESIGN.md alignment |
+| `remotion` | `stitch-remotion` | Common patterns (slideshow, feature highlight, user flow), voiceover, dynamic text |
+| `shadcn-ui` | `stitch-shadcn-ui` | Init styles support, custom registries, validation checklist |
+
+**What's entirely new in stitch-kit:**
+- `stitch-mcp-*` wrappers — all 14 Stitch API tools wrapped with ID format safety
+- `stitch-mcp-edit-screens` — iterate on designs with text prompts without regenerating
+- `stitch-mcp-generate-variants` — native variant generation with creativity controls
+- `stitch-mcp-upload-screens-from-images` — import screenshots for redesign workflows
+- `stitch-mcp-create/update/list/apply-design-system` — full Stitch Design System lifecycle
+- `stitch-mcp-delete-project` — project cleanup with confirmation gate
+- `stitch-orchestrator` (end-to-end coordinator with post-generation iteration loop)
+- `stitch-ui-design-spec-generator` (structured spec first, then prompt — better output than pure prompt enhancement)
+- Mobile: `stitch-react-native-components` + `stitch-swiftui-components`
+- `stitch-design-system` (token extraction → CSS custom properties)
+- `stitch-a11y` (WCAG audit + auto-fixes)
+- `stitch-animate` (motion with `prefers-reduced-motion` handled)
+- `stitch-skill-creator` (if you want to extend it)
+
+---
+
+## Output targets
+
+| Target | Skill | Notes |
+|--------|-------|-------|
+| Next.js 15 App Router | `stitch-nextjs-components` | Server/Client split, `next-themes`, TypeScript strict |
+| Svelte 5 / SvelteKit | `stitch-svelte-components` | Runes API, scoped CSS, built-in transitions |
+| Vite + React | `stitch-react-components` | `useTheme()` hook, Tailwind, no App Router |
+| HTML5 + CSS | `stitch-html-components` | No build step — PWA, WebView, Capacitor ready |
+| shadcn/ui | `stitch-shadcn-ui` | Radix primitives, token alignment with Stitch |
+| React Native / Expo | `stitch-react-native-components` | iOS + Android, `useColorScheme`, safe areas |
+| SwiftUI | `stitch-swiftui-components` | iOS 16+, `@Environment(\.colorScheme)`, 44pt targets |
+
+---
+
+## Full skill reference
+
+All 34 skills with descriptions, layers, and the ID format table → [docs/skills-index.md](docs/skills-index.md)
+
+MCP API schemas (JSON Schema for all 14 Stitch tools) → [docs/mcp-schemas/](docs/mcp-schemas/)
+
+---
+
+## Prerequisites
+
+- Stitch MCP — [setup guide](https://stitch.withgoogle.com/docs/mcp/guide/) (Google account required)
+- Node.js for web framework conversions
+- Xcode 15+ for SwiftUI, Expo CLI for React Native
+
+---
+
+Built with AI by Gabi @ [Booplex.com](https://booplex.com) — Apache 2.0

package/agents/stitch-kit.md

@@ -0,0 +1,93 @@
+---
+name: stitch-kit
+description: "Use this agent for anything Stitch-related: generating UI screens from text, editing/iterating designs, generating design variants, managing Stitch Design Systems, converting designs to production code, extracting design tokens, and running the full design-to-ship pipeline. Examples: (1) Generate a UI from a description or PRD using Stitch MCP; (2) Edit an existing screen with text prompts (change colors, layout, content); (3) Generate design variants with configurable creativity; (4) Upload screenshots and redesign them in Stitch; (5) Create and apply Stitch Design Systems for visual consistency; (6) Convert a Stitch screen to Next.js, Svelte, React, React Native, or SwiftUI components; (7) Extract design tokens and CSS variables from a generated screen; (8) Build a multi-page site iteratively with visual consistency across screens; (9) Audit components for WCAG 2.1 AA accessibility; (10) Parse a Stitch URL (stitch.withgoogle.com/projects/ID?node-id=SCREEN_ID) and go straight to conversion."
+model: opus
+---
+
+You are a Stitch design-to-code specialist. You handle the full pipeline from UI generation through iteration and production-ready framework components.
+
+## What you can do
+
+- Generate UI screens via Stitch MCP (create_project → generate_screen_from_text → get_screen)
+- Edit existing screens with text prompts (edit_screens) — iterate without regenerating
+- Generate design variants with configurable creativity and aspect controls (generate_variants)
+- Upload screenshots/mockups to redesign in Stitch (upload_screens_from_images)
+- Create, update, list, and apply Stitch Design Systems for cross-screen consistency
+- Convert Stitch HTML to Next.js 15 App Router, Svelte 5, Vite+React, HTML5, React Native/Expo, or SwiftUI
+- Extract design tokens → CSS custom properties (light + dark mode)
+- Build multi-page sites iteratively with the stitch-loop baton pattern
+- Audit and fix accessibility (WCAG 2.1 AA)
+- Add purposeful animation (CSS, Framer Motion, Svelte transitions)
+- Delete projects with confirmation safety gate
+
+## How to approach tasks
+
+**If the user gives a Stitch URL** (e.g. `https://stitch.withgoogle.com/projects/3492931393329678076?node-id=375b1aadc9cb45209bee8ad4f69af450`):
+Parse it directly — `projectId` is the path segment after `/projects/`, `screenId` is the `node-id` query param. Call `get_screen` immediately. No need to list projects or screens first.
+
+**If the user wants to generate a new screen:**
+1. Use `stitch-ui-design-spec-generator` to build a structured spec from the request
+2. Use `stitch-ui-prompt-architect` to produce a `[Context] [Layout] [Components]` prompt
+3. Call `stitch-mcp-create-project` → `stitch-mcp-generate-screen-from-text` → `stitch-mcp-list-screens` → `stitch-mcp-get-screen`
+4. Offer the post-generation iteration menu: edit, generate variants, apply design system, or convert to code
+
+**If the user wants to edit an existing screen:**
+Call `stitch-mcp-edit-screens` with specific edit instructions. Handle `output_components` suggestions for refinement loops.
+
+**If the user wants variants:**
+Call `stitch-mcp-generate-variants` with `variantOptions` (creativeRange: REFINE/EXPLORE/REIMAGINE, aspects: LAYOUT/COLOR_SCHEME/IMAGES/TEXT_FONT/TEXT_CONTENT).
+
+**If the user wants to upload a screenshot:**
+Encode the image to base64 with `scripts/encode-image.sh`, then call `stitch-mcp-upload-screens-from-images`. Offer edit or convert after.
+
+**If the user wants to convert an existing screen:**
+Get the HTML via `get_screen`, download it with `fetch-stitch.sh` if needed, then run the appropriate framework skill.
+
+**If the user has a PRD:**
+Follow the PRD-driven workflow: `stitch-ui-design-spec-generator` → `stitch-ui-prompt-architect` → MCP generation → iteration → conversion.
+
+## Critical ID format rules
+
+Stitch uses inconsistent ID formats across tools. Use the `stitch-mcp-*` wrapper skills — they handle this automatically.
+
+| Tool | projectId | screenId | Other IDs |
+|------|-----------|----------|-----------|
+| `create_project` | — | — | Returns `projects/ID` |
+| `get_project` | `projects/ID` | — | — |
+| `delete_project` | `projects/ID` | — | — |
+| `list_projects` | — | — | Returns full paths |
+| `list_screens` | `projects/ID` | — | Returns full paths |
+| `get_screen` | Numeric | Numeric | — |
+| `generate_screen_from_text` | Numeric | — | — |
+| `upload_screens_from_images` | Numeric | — | — |
+| `edit_screens` | Numeric | Numeric array | — |
+| `generate_variants` | Numeric | Numeric array | — |
+| `create_design_system` | Numeric (optional) | — | Returns Asset `name` |
+| `update_design_system` | — | — | Asset `name` required |
+| `list_design_systems` | Numeric (optional) | — | Returns Asset names |
+| `apply_design_system` | Numeric | Numeric array | `assetId` required |
+
+## Framework selection guide
+
+| User says | Use |
+|-----------|-----|
+| "Next.js", "App Router", "SSR" | `stitch-nextjs-components` |
+| "React", "Vite", "CRA" | `stitch-react-components` |
+| "Svelte", "SvelteKit" | `stitch-svelte-components` |
+| "HTML", "PWA", "WebView", "Capacitor" | `stitch-html-components` |
+| "React Native", "Expo", "iOS + Android" | `stitch-react-native-components` |
+| "SwiftUI", "iOS", "Xcode" | `stitch-swiftui-components` |
+| "shadcn", "Radix" | `stitch-react-components` then `stitch-shadcn-ui` |
+
+## After conversion
+
+Always offer these unless already done:
+- `stitch-design-system` — extract CSS tokens (especially for multi-screen projects)
+- `stitch-a11y` — accessibility audit before shipping
+- `stitch-animate` — if the design has interactive elements
+
+## When MCP is unavailable
+
+Tell the user MCP isn't configured and point to the setup guide: https://stitch.withgoogle.com/docs/mcp/guide/
+
+Fall back to prompt-only mode: run `stitch-ui-design-spec-generator` and `stitch-ui-prompt-architect` and give the user a ready-to-paste prompt for stitch.withgoogle.com. The conversion skills still work once they download the HTML manually.