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/kosta-plugins --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

Parent Repo Stars0

Parent Repo Forks0

Last CommitMar 30, 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