Skill

stitch-flow

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'.

Install

npx claudepluginhub ildunari/stitch-studio --plugin stitch-studio

Tool Access

This skill uses the workspace's default tool permissions.

Preview

You generate connected multi-screen UI flows via Stitch, maintaining design consistency across screens and producing navigation maps.

SKILL.md

Similar Skills

cache-components

Guides Next.js Cache Components and Partial Prerendering (PPR) with cacheComponents enabled. Implements 'use cache', cacheLife(), cacheTag(), revalidateTag(), static/dynamic optimization, and cache debugging.

cache-components

139.1k

claude-opus-4-5-migration

2 files

Migrates code, prompts, and API calls from Claude Sonnet 4.0/4.5 or Opus 4.1 to Opus 4.5, updating model strings on Anthropic, AWS, GCP, Azure platforms.

claude-opus-4-5-migration

83.2k

claude-code-plugin-release

1 file

Automates semantic versioning and release workflow for Claude Code plugins: bumps versions in package.json, marketplace.json, plugin.json; verifies builds; creates git tags, GitHub releases, changelogs.

claude-mem

64.7k

Stats

Stars0

Forks0

Last CommitMar 28, 2026

Used By2 plugins

Actions

View Source View Plugin View on GitHub View README

Stitch Flow

You generate connected multi-screen UI flows via Stitch, maintaining design consistency across screens and producing navigation maps.

Flow Planning

User describes a flow (e.g., "onboarding: splash → sign up → verify → welcome → home")
Parse into discrete screens (max 5 per Stitch generation)
For flows > 5 screens, chunk into groups and carry DESIGN.md forward
Define navigation type: linear (push), tabbed, modal, or mixed

Prompt Structure for Multi-Screen

Generate 5 connected mobile screens for [app type]:

Screen 1: [name] — [description, key elements]
Screen 2: [name] — [description, key elements]
Screen 3: [name] — [description, key elements]
Screen 4: [name] — [description, key elements]
Screen 5: [name] — [description, key elements]

Navigation: [linear push / tab bar / modal sheets]
Design: [use DESIGN.md tokens if available]
Platform: iOS mobile, iPhone 15 Pro dimensions, safe areas, SF Pro

Navigation Map Output

After generation, produce a navigation map:

[Splash] → (tap "Get Started") → [Sign Up]
[Sign Up] → (submit form) → [Verify Email]
[Verify Email] → (enter code) → [Welcome]
[Welcome] → (tap "Start") → [Home (Tab Bar)]

Chunking Strategy

For flows > 5 screens:

Group logically (onboarding group, main app group, settings group)
Generate each chunk as a separate Stitch call
Pass the same DESIGN.md to each chunk for visual consistency
Merge screenshots into a single flow diagram

Conversion to Code

After flow is approved, offer:

Convert all screens to SwiftUI via stitch-convert
Generate NavigationStack/NavigationPath routing code
Generate TabView structure if flow includes tabs
Wire up navigation with placeholder actions

Anti-patterns

Never generate more than 5 screens in one Stitch call (it's the limit)
Never skip the navigation map — users need to see the flow before coding
Never generate disconnected screens — each should reference the next
Never ignore platform — tab bars for iOS, sidebars for iPad/desktop