stitch-kit 1.5.0

package/skills/stitch-swiftui-components/resources/architecture-checklist.md

@@ -0,0 +1,83 @@
+# SwiftUI Components — Architecture Checklist
+
+Run through this checklist before marking the task complete.
+
+## Xcode project structure
+
+- [ ] Views are in `Views/` — one file per view
+- [ ] Reusable components are in `Views/Components/`
+- [ ] Theme tokens are in `Theme/ThemeTokens.swift`
+- [ ] Color extension is in `Theme/Color+App.swift`
+- [ ] Static preview data is in `Models/MockData.swift` — not hardcoded in views
+- [ ] `@main` entry point is in `[AppName].swift`
+
+## SwiftUI correctness
+
+- [ ] `@State` is used for local UI state (not business logic)
+- [ ] `@StateObject` / `@ObservedObject` for view models (if MVVM)
+- [ ] `@Environment` used for system values (colorScheme, dismiss, reducedMotion)
+- [ ] No logic in `var body: some View` — extract to computed properties or helper views
+- [ ] Views are small and composable — extract when `body` exceeds ~50 lines
+- [ ] Previews have mock data — no force-unwraps in `#Preview`
+
+## Layout
+
+- [ ] `VStack`, `HStack`, `ZStack` used instead of `Group` for layout intent
+- [ ] `Spacer()` used for `justify-content: space-between` patterns
+- [ ] `LazyVStack` / `LazyVGrid` used inside `ScrollView` for long lists
+- [ ] `List` used for data-driven lists (virtualized automatically)
+- [ ] `.frame(maxWidth: .infinity)` replaces `w-full` / `width: 100%`
+- [ ] No hardcoded pixel values where semantic sizing (`font(.headline)`) is available
+
+## Touch targets and interaction
+
+- [ ] All interactive views have `.frame(minHeight: 44)` — Apple HIG minimum
+- [ ] Buttons use SwiftUI `Button` (not `.onTapGesture` on arbitrary views)
+- [ ] Icon-only buttons have `.accessibilityLabel("Action name")`
+- [ ] Press animation: `.scaleEffect(isPressed ? 0.96 : 1.0)` with `.spring()`
+- [ ] Reduced motion respected: `@Environment(\.accessibilityReduceMotion)` gates animations
+
+## Colors and dark mode
+
+- [ ] `@Environment(\.colorScheme) private var colorScheme` in every themed view
+- [ ] `private var theme: ThemeTokens { colorScheme == .dark ? .dark : .light }` pattern used
+- [ ] No hardcoded `Color(hex:)` values in views — always via `theme.*`
+- [ ] Tested in both light and dark mode (⌃⌘A in Simulator)
+- [ ] `#Preview("Dark Mode")` block exists for every component
+
+## Typography
+
+- [ ] Semantic fonts used: `.font(.headline)`, `.font(.body)` — NOT `.font(.system(size: 17))`
+- [ ] Dynamic Type works: increase text size in Simulator and verify layout holds
+- [ ] Text doesn't truncate unexpectedly — `.lineLimit(nil)` or `.fixedSize` where needed
+
+## Images
+
+- [ ] Remote images use `AsyncImage` — no sync image loading
+- [ ] Local images are in `Assets.xcassets` and loaded with `Image("name")`
+- [ ] Aspect ratios are explicit: `.aspectRatio(16/9, contentMode: .fill)`
+- [ ] Decorative images use `Image(decorative: "name")` — screen reader skips them
+- [ ] Content images have `.accessibilityLabel("Description")`
+
+## Accessibility
+
+- [ ] Buttons are labeled by their `Text` child automatically — verify with VoiceOver
+- [ ] Icon-only buttons have `.accessibilityLabel("Action name")`
+- [ ] Related text groups combined: `.accessibilityElement(children: .combine)`
+- [ ] Custom accessibility actions for swipe gestures if applicable
+- [ ] App tested with VoiceOver enabled — no silent tappable areas
+
+## Navigation
+
+- [ ] `NavigationStack` used (not deprecated `NavigationView`)
+- [ ] Tab bar uses `TabView` with `.tabItem { Label("Name", systemImage: "icon") }`
+- [ ] Sheets dismissed via `@Environment(\.dismiss) var dismiss`
+- [ ] Back navigation is automatic — no custom back buttons unless design requires
+- [ ] Deep links handled if the app supports URL schemes
+
+## Performance
+
+- [ ] No `print()` statements in production code
+- [ ] `LazyVStack` / `LazyVGrid` for lists of 20+ items
+- [ ] `AsyncImage` for remote images — no manual URLSession in views
+- [ ] `@StateObject` used when the view owns the model (not `@ObservedObject`)

package/skills/stitch-swiftui-components/resources/component-template.swift

@@ -0,0 +1,131 @@
+// StitchComponentView.swift
+// Generated from Stitch design via stitch-swiftui-components skill.
+// Replace "StitchComponent" with the actual view name throughout.
+
+import SwiftUI
+
+// MARK: - View
+
+/// StitchComponent — [describe purpose in one sentence]
+///
+/// Usage:
+/// ```swift
+/// StitchComponentView(title: "Hello", description: "World")
+/// ```
+struct StitchComponentView: View {
+
+  // MARK: - Properties (props equivalent)
+
+  /// Primary heading text
+  let title: String
+
+  /// Supporting description — optional
+  var description: String = ""
+
+  /// Callback for primary action — nil hides the action button
+  var onAction: (() -> Void)? = nil
+
+  // MARK: - Environment
+
+  /// Automatically switches between light and dark theme tokens
+  @Environment(\.colorScheme) private var colorScheme
+
+  /// Resolved theme tokens for current color scheme
+  private var theme: ThemeTokens {
+    colorScheme == .dark ? .dark : .light
+  }
+
+  /// Respects user's Reduce Motion accessibility setting
+  @Environment(\.accessibilityReduceMotion) private var reduceMotion
+
+  // MARK: - State
+
+  @State private var isPressed = false
+
+  // MARK: - Body
+
+  var body: some View {
+    VStack(alignment: .leading, spacing: 8) {
+
+      // Title
+      Text(title)
+        .font(.headline)
+        .foregroundStyle(theme.text)
+        .lineLimit(nil)                  // Allow multiline
+
+      // Description — only render when non-empty
+      if !description.isEmpty {
+        Text(description)
+          .font(.subheadline)
+          .foregroundStyle(theme.textMuted)
+          .lineLimit(3)
+      }
+
+      // Action button — only render when provided
+      if let action = onAction {
+        Button(action: action) {
+          Text("Action")
+            .font(.subheadline)
+            .fontWeight(.semibold)
+            .padding(.horizontal, 16)
+            .padding(.vertical, 8)
+            .background(theme.primary)
+            .foregroundStyle(theme.primaryFg)
+            .clipShape(Capsule())
+            // Press feedback (respects reduced motion)
+            .scaleEffect(isPressed ? 0.96 : 1.0)
+            .animation(
+              reduceMotion ? .none : .spring(response: 0.2, dampingFraction: 0.6),
+              value: isPressed
+            )
+        }
+        .simultaneousGesture(
+          DragGesture(minimumDistance: 0)
+            .onChanged { _ in isPressed = true }
+            .onEnded   { _ in isPressed = false }
+        )
+        // Accessibility — button is labeled by its Text child automatically
+        .accessibilityHint("Activates the primary action")
+      }
+    }
+    .padding(16)
+    .frame(maxWidth: .infinity, alignment: .leading)
+    .frame(minHeight: 44)  // Apple HIG minimum touch target
+    .background(theme.surface)
+    .clipShape(RoundedRectangle(cornerRadius: 12))
+    .overlay(
+      RoundedRectangle(cornerRadius: 12)
+        .stroke(theme.border, lineWidth: 1)
+    )
+  }
+}
+
+// MARK: - Preview
+
+#Preview("Light Mode") {
+  VStack(spacing: 16) {
+    StitchComponentView(
+      title: "Card Title",
+      description: "Supporting description text that can span multiple lines."
+    )
+    StitchComponentView(
+      title: "With Action",
+      description: "This card has a primary action.",
+      onAction: { print("Action tapped") }
+    )
+    StitchComponentView(title: "Title Only")
+  }
+  .padding()
+}
+
+#Preview("Dark Mode") {
+  VStack(spacing: 16) {
+    StitchComponentView(
+      title: "Dark Card",
+      description: "Preview in dark mode.",
+      onAction: { }
+    )
+  }
+  .padding()
+  .preferredColorScheme(.dark)
+}

package/skills/stitch-swiftui-components/resources/layout-mapping.md

@@ -0,0 +1,155 @@
+# HTML/CSS → SwiftUI Layout Mapping Reference
+
+Quick lookup when converting Stitch HTML to SwiftUI.
+
+---
+
+## Flex containers
+
+| CSS | SwiftUI |
+|-----|---------|
+| `flex-col` (default) | `VStack(alignment: .leading, spacing: 16) { }` |
+| `flex-col items-center` | `VStack(alignment: .center, spacing: 16) { }` |
+| `flex-col items-end` | `VStack(alignment: .trailing, spacing: 16) { }` |
+| `flex-row` | `HStack(alignment: .center, spacing: 12) { }` |
+| `flex-row items-start` | `HStack(alignment: .top, spacing: 12) { }` |
+| `flex-row justify-between` | `HStack { content; Spacer(); content }` |
+| `flex-row justify-around` | `HStack { Spacer(); content; Spacer(); content; Spacer() }` |
+| Absolute overlay | `ZStack(alignment: .topLeading) { base; overlay }` |
+
+---
+
+## Spacing
+
+| CSS | SwiftUI |
+|-----|---------|
+| `gap-1` (4px) | `spacing: 4` in VStack/HStack |
+| `gap-2` (8px) | `spacing: 8` |
+| `gap-3` (12px) | `spacing: 12` |
+| `gap-4` (16px) | `spacing: 16` |
+| `gap-6` (24px) | `spacing: 24` |
+| `p-4` (16px all) | `.padding(16)` |
+| `px-4 py-2` | `.padding(.horizontal, 16).padding(.vertical, 8)` |
+| `pt-4` | `.padding(.top, 16)` |
+| `mx-auto` (center) | `.frame(maxWidth: .infinity)` + center alignment |
+| `mb-4` | use `spacing` in parent VStack instead |
+
+---
+
+## Sizing
+
+| CSS | SwiftUI |
+|-----|---------|
+| `w-full` | `.frame(maxWidth: .infinity)` |
+| `h-full` | `.frame(maxHeight: .infinity)` |
+| `w-12` (48px) | `.frame(width: 48)` |
+| `h-12` (48px) | `.frame(height: 48)` |
+| `w-1/2` | `.frame(maxWidth: .infinity)` on each child in HStack |
+| `min-h-[44px]` (touch target) | `.frame(minHeight: 44)` |
+
+---
+
+## Typography
+
+| CSS | SwiftUI |
+|-----|---------|
+| `text-xs` (12px) | `.font(.caption2)` |
+| `text-sm` (14px) | `.font(.caption)` or `.font(.subheadline)` |
+| `text-base` (16px) | `.font(.body)` |
+| `text-lg` (18px) | `.font(.callout)` |
+| `text-xl` (20px) | `.font(.title3)` |
+| `text-2xl` (24px) | `.font(.title2)` |
+| `text-3xl` (30px) | `.font(.title)` |
+| `text-4xl` (36px) | `.font(.largeTitle)` |
+| `font-medium` | `.fontWeight(.medium)` |
+| `font-semibold` | `.fontWeight(.semibold)` |
+| `font-bold` | `.fontWeight(.bold)` |
+| `text-muted` | `.foregroundStyle(.secondary)` |
+| `truncate` | `.lineLimit(1)` |
+| `line-clamp-2` | `.lineLimit(2)` |
+| No clamp | `.lineLimit(nil)` |
+
+---
+
+## Colors & backgrounds
+
+| CSS | SwiftUI |
+|-----|---------|
+| `bg-[var(--color-surface)]` | `.background(theme.surface)` |
+| `bg-primary` | `.background(theme.primary)` |
+| `text-muted` | `.foregroundStyle(theme.textMuted)` |
+| `border border-[var(--color-border)]` | `.overlay(RoundedRectangle(...).stroke(theme.border))` |
+| `opacity-50` | `.opacity(0.5)` |
+| `shadow-md` | `.shadow(color: .black.opacity(0.1), radius: 8, x: 0, y: 4)` |
+
+---
+
+## Border radius
+
+| CSS | SwiftUI |
+|-----|---------|
+| `rounded-sm` (4px) | `.clipShape(RoundedRectangle(cornerRadius: 4))` |
+| `rounded-md` (8px) | `.clipShape(RoundedRectangle(cornerRadius: 8))` |
+| `rounded-lg` (12px) | `.clipShape(RoundedRectangle(cornerRadius: 12))` |
+| `rounded-xl` (16px) | `.clipShape(RoundedRectangle(cornerRadius: 16))` |
+| `rounded-full` | `.clipShape(Capsule())` or `.clipShape(Circle())` |
+
+> **Note:** Use `.clipShape` over deprecated `.cornerRadius` modifier in iOS 17+.
+
+---
+
+## Images
+
+| CSS | SwiftUI |
+|-----|---------|
+| `<img src="https://...">` | `AsyncImage(url: URL(string: "https://..."))` |
+| `<img src="./local.png">` | `Image("local")` (add to Assets.xcassets) |
+| `object-fit: cover` | `.scaledToFill()` + `.clipped()` |
+| `object-fit: contain` | `.scaledToFit()` |
+| `aspect-ratio: 16/9` | `.aspectRatio(16/9, contentMode: .fill)` |
+| Circle avatar | `AsyncImage(...).clipShape(Circle())` |
+
+---
+
+## Interactive elements
+
+| CSS | SwiftUI |
+|-----|---------|
+| Primary `<button>` | `Button("Label") { }.buttonStyle(.borderedProminent).tint(theme.primary)` |
+| Secondary button | `Button("Label") { }.buttonStyle(.bordered)` |
+| Ghost/text button | `Button("Label") { }.buttonStyle(.plain)` |
+| Destructive button | `Button("Delete") { }.tint(.red)` |
+| Icon-only button | `Button { action() } label: { Image(systemName: "star") }` |
+| `<input type="text">` | `TextField("Placeholder", text: $text)` |
+| `<input type="password">` | `SecureField("Password", text: $password)` |
+| `<input type="search">` | `TextField("Search", text: $query).searchable(text: $query)` |
+| Toggle/checkbox | `Toggle("Label", isOn: $isOn)` |
+| Slider | `Slider(value: $value, in: 0...100)` |
+| Stepper | `Stepper("Count: \(count)", value: $count, in: 0...10)` |
+
+---
+
+## Scroll and lists
+
+| CSS | SwiftUI |
+|-----|---------|
+| `overflow-y: scroll` | `ScrollView { VStack { ... } }` |
+| `overflow-x: scroll` (horizontal) | `ScrollView(.horizontal) { HStack { ... } }` |
+| `overflow: hidden` | `.clipped()` |
+| Long list (performance) | `List { ForEach(items) { ... } }` or `LazyVStack` inside `ScrollView` |
+| Grid | `LazyVGrid(columns: [GridItem(.flexible()), GridItem(.flexible())]) { ... }` |
+| Horizontal card scroll | `ScrollView(.horizontal, showsIndicators: false) { HStack(spacing: 16) { ... } }` |
+
+---
+
+## Navigation patterns
+
+| Pattern | SwiftUI |
+|---------|---------|
+| Bottom tab bar | `TabView { View1().tabItem { Label("Home", systemImage: "house") } }` |
+| Push navigation | `NavigationStack { ... NavigationLink("Go", destination: DetailView()) }` |
+| Modal sheet | `.sheet(isPresented: $show) { ModalView() }` |
+| Full screen | `.fullScreenCover(isPresented: $show) { FullView() }` |
+| Dismiss sheet/nav | `@Environment(\.dismiss) var dismiss; dismiss()` |
+| Alert | `.alert("Title", isPresented: $show) { Button("OK") { } }` |
+| Action sheet | `.confirmationDialog("Choose", isPresented: $show) { ... }` |

package/skills/stitch-swiftui-components/scripts/fetch-stitch.sh

@@ -0,0 +1,45 @@
+#!/usr/bin/env bash
+# fetch-stitch.sh
+# Reliably downloads Stitch HTML from Google Cloud Storage URLs.
+# GCS URLs require redirect handling and specific security handshakes that
+# AI fetch tools often fail on. This script handles both.
+#
+# Usage:
+#   bash scripts/fetch-stitch.sh "<url>" "<output-path>"
+#
+# Example:
+#   bash scripts/fetch-stitch.sh "$htmlCode_downloadUrl" "temp/source.html"
+
+set -euo pipefail
+
+URL="${1:?Usage: fetch-stitch.sh <url> <output-path>}"
+OUTPUT="${2:?Usage: fetch-stitch.sh <url> <output-path>}"
+
+# Create output directory if it doesn't exist
+mkdir -p "$(dirname "$OUTPUT")"
+
+# Use curl with:
+#   -L  : follow redirects (GCS uses multiple redirect hops)
+#   -A  : set User-Agent to avoid bot blocking
+#   --compressed : handle gzip responses
+#   --retry 3   : retry on transient failures
+#   --retry-delay 1 : wait 1s between retries
+#   --max-time 30   : don't hang forever
+curl -L \
+  -A "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36" \
+  --compressed \
+  --retry 3 \
+  --retry-delay 1 \
+  --max-time 30 \
+  --silent \
+  --show-error \
+  --output "$OUTPUT" \
+  "$URL"
+
+# Verify the download succeeded and is not empty
+if [ ! -s "$OUTPUT" ]; then
+  echo "Error: Downloaded file is empty. URL may be expired or invalid." >&2
+  exit 1
+fi
+
+echo "Downloaded to: $OUTPUT ($(wc -c < "$OUTPUT") bytes)"

package/skills/stitch-ued-guide/SKILL.md

@@ -0,0 +1,124 @@
+---
+name: stitch-ued-guide
+description: Visual vocabulary, design terminology, and prompt engineering strategy for Stitch. Reference this when you need layout pattern names, aesthetic style terms, color structure formulas, or device guidelines.
+allowed-tools: []
+---
+
+# Stitch UED Guide
+
+This is a reference guide, not an action skill. Use it when:
+- You need specific design terminology for a Stitch prompt (masonry, glassmorphism, split-screen)
+- You're unsure how to describe a layout pattern or visual style
+- You want to apply color + theme structure consistently
+- You need to know device-specific constraints for prompt writing
+
+## Prompt engineering strategy
+
+The most effective Stitch prompts follow this 4-part structure:
+
+```
+[Context & Style] + [Layout Structure] + [Component Details] + [Content & Data]
+```
+
+**Context & Style:**
+> "Mobile fitness app for gym-goers. Dark mode with neon green accents. Cyberpunk aesthetic. Rounded corners."
+
+**Layout Structure:**
+> "Bottom navigation bar (Home, Workout, Progress, Profile). Scrollable main feed. Sticky top bar with greeting."
+
+**Component Details:**
+> "Workout cards with gradient border, thumbnail, title, duration badge, and 'Start' pill button."
+
+**Content & Data:**
+> "Sample data: 'Upper Body Blast' (45 min), 'Core Destroyer' (20 min), 'Morning Run' (30 min, completed today)."
+
+## Stitch model selection
+
+| Model | When to use |
+|-------|-------------|
+| `GEMINI_3_PRO` | High-fidelity designs, complex layouts, when quality matters — **recommended default** |
+| `GEMINI_3_FLASH` | Fast iteration, wireframes, rapid exploration, when speed matters |
+
+## Layout patterns
+
+### Mobile patterns
+- **Vertical scroll feed** — infinite scroll of content cards, sticky header, bottom nav
+- **Tab navigation** — segmented control or tab bar, content switches inline
+- **Bottom sheet** — slide-up panel for secondary content or actions
+- **Full-screen form** — single-column, large touch targets, sticky submit
+- **Detail → action** — hero content at top, description below, sticky CTA at bottom
+
+### Desktop patterns
+- **Left sidebar + main** — persistent side nav (200-280px), main content area, top bar
+- **Top nav + content** — horizontal navigation bar, sectioned main content below
+- **Split screen** — two equal halves (form/preview, signup/product screenshot)
+- **Dashboard grid** — KPI strip, charts, tables, widgets in responsive grid
+- **Landing page** — full-width hero, feature sections, pricing, footer CTA
+
+### Universal patterns
+- **Masonry grid** — variable-height cards, Pinterest-style layout
+- **Bento grid** — asymmetric boxes of varying sizes, each containing different content
+- **Hero section** — full-width/height with background image, headline, CTA
+- **Card grid** — uniform cards in responsive column grid
+
+## Visual styles
+
+| Style | Description | Use for |
+|-------|-------------|---------|
+| **Flat** | No shadows, bold colors, simple shapes | Mobile apps, illustrations |
+| **Material** | Cards with elevation, clear hierarchy, ripple effects | Android-style apps |
+| **Neumorphism** | Extruded elements on same-color bg, soft shadows | Luxury, subtle UIs |
+| **Glassmorphism** | Frosted glass effect, blur + transparency + border | Modern SaaS, overlays |
+| **Brutalism** | Raw, high-contrast, purposefully rough, grid-breaking | Editorial, bold brands |
+| **Minimalism** | Maximum whitespace, single accent color, typographic focus | Portfolios, landing pages |
+| **Cyberpunk** | Dark bg, neon accents, glitch elements, monospace fonts | Gaming, tech, dark mode |
+
+## Color structure formula
+
+For consistent, professional palettes in prompts:
+
+```
+[Domain/mood description] + [Background hex] + [Primary hex] + [Secondary hex] + [Text hex] + [Aesthetic mood]
+```
+
+**Example:**
+> "Modern SaaS productivity app. Slate-50 (#F8FAFC) background. Indigo (#6366F1) primary. Violet (#8B5CF6) secondary. Zinc-900 (#18181B) text. Clean, structured, professional."
+
+**Dark mode example:**
+> "Premium dark dashboard. Zinc-900 (#18181B) background. Indigo-400 (#818CF8) primary on dark. Zinc-800 (#27272A) card surface. Zinc-100 (#F4F4F5) text. Focused, high-contrast, developer-friendly."
+
+## Device guidelines
+
+| Device | Dimensions | Key constraints |
+|--------|-----------|-----------------|
+| **MOBILE** | ~375px wide | Bottom navigation, thumb-friendly tap targets (44px min), single-column layouts, larger type |
+| **DESKTOP** | ~1440px wide | Multi-column layouts, sidebar navigation, dense data tables, hover interactions |
+| **TABLET** | ~768-1024px | Hybrid: 2-column grids, collapsible sidebar, touch-friendly but more space |
+| **AGNOSTIC** | Fluid | Responsive/fluid layout — not tied to a specific device, adapts to viewport |
+
+## Accessibility in prompts
+
+Include these phrases in prompts to guide Stitch toward accessible output:
+- "High contrast text, WCAG AA compliant colors"
+- "Touch-friendly tap targets, minimum 44px height"
+- "Clear visual hierarchy, strong heading sizes"
+- "Sufficient color contrast between text and background"
+
+## Quick reference — UI component names for Stitch prompts
+
+Use these precise names (vague descriptions produce worse results):
+
+- "Floating action button (FAB)" not "button in corner"
+- "Segmented control" not "toggle group"
+- "Bottom sheet" not "popup from bottom"
+- "Skeleton loader" not "loading placeholder"
+- "Snackbar" not "notification at bottom"
+- "Breadcrumb trail" not "navigation path"
+- "Stepper / wizard" not "multi-step form indicator"
+- "Data table with sortable columns" not "list of data"
+- "Autocomplete input" not "search with suggestions"
+
+## Related skills
+
+- `stitch-ui-design-spec-generator` — produces the structured JSON this guide helps you describe
+- `stitch-ui-prompt-architect` — applies this vocabulary to build final Stitch prompts

package/skills/stitch-ui-design-spec-generator/SKILL.md

@@ -0,0 +1,115 @@
+---
+name: stitch-ui-design-spec-generator
+description: Translates a user request or PRD document into a structured Design Spec JSON — theme, color, typography, density, and device type. Call this before building Stitch generation prompts.
+allowed-tools: []
+---
+
+# Stitch Design Spec Generator
+
+You are a Creative Director. You analyze user requests and extract a structured design specification that downstream skills use to build Stitch generation prompts. Your output is a JSON object — never freeform text.
+
+## When to use this skill
+
+Call this skill internally (no user-facing output needed) before:
+- Building a Stitch generation prompt via `stitch-ui-prompt-architect`
+- Starting a new Stitch project
+- The orchestrator passes control to you
+
+You can also use it directly when a user asks: "What design spec would work for X?" or "Help me define the visual style."
+
+## Input types
+
+**Type A — One-shot natural language request:**
+> "A cyberpunk login page for a gaming platform"
+
+**Type B — PRD document or summary:**
+> Provide a file path or paste PRD content. Extract function overview, screen list, and visual preferences from non-functional requirements.
+
+## Logic rules — apply in order
+
+### 1. Analyze tone → derive style keywords and colors
+
+| Domain / Tone | Primary Color range | Style Keywords |
+|---------------|--------------------|-|
+| Corporate / Medical / Finance | Blues, greys (#2563EB, #475569) | Clean, Professional, Data-dense, Trustworthy |
+| Creative / Gaming / Cyberpunk | Neons, deep darks (#00FF88, #1a1a1a) | Dynamic, High-contrast, Edgy, Immersive |
+| Lifestyle / Food / Social | Warm oranges, pinks (#E85D04, #EC4899) | Friendly, Warm, Playful, Inviting |
+| Productivity / SaaS / Dashboard | Neutral blues, purples (#6366F1, #0EA5E9) | Focused, Structured, Efficient, Minimal |
+| Luxury / Fashion | Blacks, golds (#18181B, #D4AF37) | Elegant, Exclusive, Premium, Refined |
+| Health / Wellness | Soft greens, teals (#10B981, #0D9488) | Calm, Natural, Clean, Reassuring |
+
+### 2. Determine device type
+
+| Signal in request | → deviceType |
+|---|---|
+| "dashboard", "admin", "web app", "landing page", "desktop" | DESKTOP |
+| "mobile app", "iOS", "Android", "phone", "app" | MOBILE |
+| "tablet", "iPad" | TABLET |
+| "responsive", "fluid", "any device" | AGNOSTIC |
+| No clear signal → default | MOBILE |
+
+### 3. Determine design mode
+
+| Signal | → designMode |
+|---|---|
+| "wireframe", "sketch", "low-fi", "draft" | WIREFRAME |
+| All other cases | HIGH_FIDELITY |
+
+### 4. Determine roundness
+
+| Style keywords contain | → roundness |
+|---|---|
+| "sharp", "brutalist", "corporate", "enterprise" | Low |
+| "modern", "clean", "professional" | Medium |
+| "friendly", "playful", "card", "soft", "rounded" | High |
+
+### 5. Determine density
+
+| Context | → density |
+|---|---|
+| Data tables, dashboards, admin panels | COMPACT |
+| Mobile apps, social, consumer | COMFORTABLE |
+| Marketing pages, landing pages, portfolios | SPACIOUS |
+
+## Output format
+
+Always output **exactly this JSON structure** — no extra fields, no explanations:
+
+```json
+{
+  "theme": "DARK" | "LIGHT",
+  "primaryColor": "#HEXCODE",
+  "font": "Font Name",
+  "roundness": "High" | "Medium" | "Low",
+  "density": "COMPACT" | "COMFORTABLE" | "SPACIOUS",
+  "designMode": "WIREFRAME" | "HIGH_FIDELITY",
+  "styleKeywords": ["Keyword1", "Keyword2", "Keyword3"],
+  "deviceType": "MOBILE" | "TABLET" | "DESKTOP" | "AGNOSTIC"
+}
+```
+
+**Font selection guide — use Stitch enum names exactly:**
+
+| Use case | Font (Stitch enum) |
+|----------|--------------------|
+| Corporate / SaaS / Dashboard | `INTER`, `DM_SANS`, `IBM_PLEX_SANS` |
+| Clean modern / startup | `GEIST`, `MANROPE`, `PLUS_JAKARTA_SANS`, `WORK_SANS` |
+| Editorial / expressive | `SPACE_GROTESK`, `EPILOGUE`, `SORA`, `RUBIK` |
+| Friendly / consumer app | `NUNITO_SANS`, `LEXEND`, `BE_VIETNAM_PRO` |
+| Luxury / serif | `EB_GARAMOND`, `LITERATA`, `SOURCE_SERIF_FOUR`, `LIBRE_CASLON_TEXT` |
+| Dense data / admin | `SOURCE_SANS_THREE`, `PUBLIC_SANS`, `ARIMO` |
+| News / reading | `NEWSREADER`, `DOMINE`, `NOTO_SERIF` |
+
+Full font list: `BE_VIETNAM_PRO`, `EPILOGUE`, `INTER`, `LEXEND`, `MANROPE`, `NEWSREADER`,
+`NOTO_SERIF`, `PLUS_JAKARTA_SANS`, `PUBLIC_SANS`, `SPACE_GROTESK`, `SPLINE_SANS`,
+`WORK_SANS`, `DOMINE`, `LIBRE_CASLON_TEXT`, `EB_GARAMOND`, `LITERATA`, `SOURCE_SERIF_FOUR`,
+`MONTSERRAT`, `METROPOLIS`, `SOURCE_SANS_THREE`, `NUNITO_SANS`, `ARIMO`, `HANKEN_GROTESK`,
+`RUBIK`, `GEIST`, `DM_SANS`, `IBM_PLEX_SANS`, `SORA`
+
+## Integration
+
+After generating the spec JSON, the next step is always `stitch-ui-prompt-architect`, which merges the spec with the user's request to produce a `[Context] [Layout] [Components]` Stitch generation prompt.
+
+## References
+
+- `examples/usage.md` — Three worked examples (cyberpunk login, medical dashboard, food app)