stitch-design-skill

AI skill for designing mobile app screens with Stitch MCP and implementing them as production-quality React Native code.

Stitch (by Google) generates beautiful UI designs but has no awareness of mobile platform constraints like Safe Areas, keyboard avoidance, or navigation architecture. This skill bridges that gap.

Install

npx stitch-design-skill          # → ~/.claude/skills/stitch-design/
npx stitch-design-skill --codex  # → ~/.agents/skills/stitch-design/
npx stitch-design-skill --local  # → ./skills/stitch-design/

What's Included

| File | Content | |------|---------| | SKILL.md | Main skill — decision flow, 3 scenarios (redesign, new app, iteration), Stitch workflow, implementation workflow, research & troubleshooting | | stitch-mcp-reference.md | Complete reference for all 12 Stitch MCP tools — parameters, enums (29 fonts, 10 color variants, 5 device types), ID formats, common mistakes | | mobile-checklist.md | 13-item React Native best practices checklist — each item explains what Stitch gets wrong and how to fix it with code examples |

3 Scenarios

1. Existing App Redesign — Analyze current app, detect issues, ask user, design with Stitch, implement with best practices
2. New App Design — Require analysis docs, define screen map, design with Stitch, plan architecture, implement
3. Stitch Iteration — Edit existing screens, generate variants, apply new design systems

13-Point Mobile Checklist

1. Safe Area
2. Keyboard Avoidance
3. Navigation Architecture
4. Touch Targets (≥44pt)
5. List Virtualization (FlatList)
6. Loading/Error/Empty States
7. Platform Differences (iOS vs Android)
8. Gestures & Animations
9. Accessibility
10. Font Loading
11. Asset Pipeline
12. Design Token Normalization
13. Dependency Awareness

Requirements

• Stitch MCP server connected to your Claude Code or Codex environment
• React Native / Expo project (for implementation)

Author

@ugarchance

License

MIT