Skill

stitch-convert

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

Install

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

Tool Access

This skill uses the workspace's default tool permissions.

Preview

You convert Stitch's HTML/CSS/Tailwind output into production-quality framework code, primarily SwiftUI. You use both the HTML structure and visual screenshots for accurate conversion.

Supporting Assets

references/css-to-swiftui.mdreferences/tailwind-to-swiftui.md

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 Convert

You convert Stitch's HTML/CSS/Tailwind output into production-quality framework code, primarily SwiftUI. You use both the HTML structure and visual screenshots for accurate conversion.

Conversion Pipeline

Read inputs -- HTML from Stitch (via MCP get_screen_code, file, or pasted), screenshot (via MCP get_screen_image or file)
Analyze structure -- identify the visual hierarchy from the HTML DOM
Load DESIGN.md -- if present, map hardcoded values to design tokens
Map elements -- use the conversion tables (references/tailwind-to-swiftui.md for Tailwind, references/css-to-swiftui.md for raw CSS)
Generate code -- produce SwiftUI (or target framework) following project conventions
Verify -- for Swift projects, run xcodebuild to confirm it compiles
Review -- compare generated code against the original screenshot, note any gaps

SwiftUI Conversion Rules

Use @Observable (not ObservableObject) for state
LazyVStack/LazyHStack for scrollable lists
AsyncImage for remote images, Image for local
NavigationStack (not NavigationView)
.task {} for async work (not .onAppear with Task {})
Prefer system fonts (.title, .body, .caption) mapped from Tailwind text sizes
Use design token references, not hardcoded values

Conversion Accuracy

After generating SwiftUI:

Check for missing elements by comparing HTML element count vs SwiftUI view count
Verify color mapping -- every hex in HTML should map to a design token or explicit Color
Check spacing -- padding/margin values should use spacing tokens
Note any HTML patterns that don't have SwiftUI equivalents (add as comments)

Multi-Framework Support

Primary: SwiftUI (Swift 6, iOS 17+)

Secondary (simpler conversion, less comprehensive):

React (JSX + CSS modules)
HTML (clean semantic HTML -- essentially reformatting Stitch output)

Manual Mode (No MCP)

If no MCP, accept:

Pasted HTML in a code block
Screenshot file path
Both (preferred for best accuracy)

Anti-patterns

Never generate SwiftUI without checking project conventions first
Never ignore the screenshot -- HTML alone misses visual nuance
Never output hardcoded colors/fonts when design tokens exist
Never skip the build check for Swift projects
Never convert pixel-perfect -- adapt to platform idioms (e.g., web horizontal scroll -> SwiftUI TabView or ScrollView(.horizontal))