stitch-studio

Review SwiftUI code generated from Stitch HTML/CSS conversion. Compares output against the original screenshot for visual accuracy, checks accessibility, and verifies design token usage. Use after stitch-convert produces SwiftUI output. <example> Context: stitch-convert just generated a SwiftUI view user: "Review this conversion — does it match the original?" assistant: "I'll use the conversion-reviewer agent to compare the generated SwiftUI against the Stitch screenshot and check for gaps." <commentary> Review is a different lens than generation. Separating review prevents the generator from self-validating. </commentary> </example>

Explore design variants in parallel by generating multiple Stitch screens with different aesthetic directions. Use when the user wants to see options, compare design approaches, or explore alternatives for a screen concept. <example> Context: User is designing a new feature screen user: "Show me 3 different takes on the settings screen" assistant: "I'll use the design-explorer agent to generate competing design variants and present them side by side." <commentary> User wants to compare design directions, which matches this agent's specialty of parallel variant generation. </commentary> </example> <example> Context: User is unsure about the right visual approach user: "I'm not sure if this should be minimal or information-dense — can you explore both?" assistant: "I'll launch the design-explorer to generate variants across that spectrum." <commentary> User explicitly wants to explore competing aesthetics, which is this agent's core purpose. </commentary> </example>

Focused design token extraction and mapping. Reads DESIGN.md and existing code tokens, detects drift, and produces platform-specific token files. Use when extracting or syncing design tokens between DESIGN.md and code. <example> Context: User has a new DESIGN.md from Stitch user: "Extract the tokens from this DESIGN.md into Swift files" assistant: "I'll use the token-mapper agent to parse the tokens and generate Swift constants." <commentary> Focused extraction task that benefits from isolated context — the agent only sees DESIGN.md and target token files, not the whole project. </commentary> </example>

This skill should be used when the user wants to bootstrap a design system from scratch using Google Stitch's Brand Kit import or Vibe Design. It generates DESIGN.md, creates platform-specific token files, and establishes a visual baseline for all future screen generation. Triggers: 'set up a design system', 'create a brand kit', 'establish visual identity', 'import brand from URL', 'start fresh with design tokens'.

This skill should be used when the user wants to convert Stitch HTML/CSS output to SwiftUI, React, or other framework code. It maps Tailwind classes and CSS properties to native framework equivalents using comprehensive mapping tables. Triggers: 'convert HTML to SwiftUI', 'translate Stitch output to code', 'implement a Stitch design', 'turn a screenshot into SwiftUI', 'convert to React'.

This skill should be used when the user wants to generate multi-screen connected UI flows using Google Stitch. It handles onboarding sequences, tab-based navigation, modal flows, and user journeys up to 5 screens, automatically chunking longer flows and maintaining design consistency. Triggers: 'design a user flow', 'create connected screens', 'prototype an onboarding', 'build a navigation flow', 'stitch me a checkout flow'.

This skill should be used when the user wants to generate UI screens from text descriptions using Google Stitch. It enhances prompts with project context, design tokens, and platform-specific conventions (iOS dimensions, safe areas, native controls). Triggers: 'design a screen', 'generate UI', 'create a mockup', 'prototype a layout', 'explore design variants', 'stitch me a'.

This skill should be used when the user wants to design UI screens, generate mockups, extract design tokens, convert HTML to SwiftUI/React, create multi-screen flows, or set up a design system using Google Stitch. It orchestrates all Stitch sub-skills and routes requests to the appropriate workflow. Triggers: "design a screen", "stitch me a", "generate UI", "convert to SwiftUI", "extract design tokens", "set up design system", "create a flow", "import brand", "design with Stitch", "UI from prompt", "screen mockup", "HTML to SwiftUI", "sync tokens", "design exploration".

This skill should be used when the user wants to extract design tokens from DESIGN.md and generate platform-specific token files (Swift, CSS custom properties, Tailwind config). It provides bidirectional sync between Stitch design tokens and code. Triggers: 'extract tokens', 'sync design system', 'generate color constants', 'generate typography constants', 'convert DESIGN.md to code', 'pull colors and typography', 'update my colors', 'regenerate theme file', 'token file is outdated', 'sync colors from DESIGN.md'.

2 hooks across 2 events