Production-grade mobile UI design skill for React Native / Expo apps. Applies design standards from Airbnb, Uber, and Instagram to every screen you build.
When activated, this skill guides Claude Code to produce mobile interfaces that look like they were designed by a senior design team:
- Visual hierarchy — consistent spacing (8px grid), typography scales, clear focal points
- Modern components — bottom sheets (not modals), proper input states, subtle shadows
- Best practices — FlashList for lists, skeleton loading, keyboard-aware forms, safe areas
- Anti-patterns — blocks common mistakes (thick borders, heavy shadows, centered text, native alerts)
- Pre-flight checklist — 10-point quality check before delivering any screen
Copy the mobile-design/ folder into your Claude Code skills directory:
# macOS / Linux
cp -r mobile-design/ ~/.claude/skills/mobile-design/
# Windows
xcopy mobile-design\ %USERPROFILE%\.claude\skills\mobile-design\ /E /I
The skill works best with reference screenshots. Create subfolders in references/ and add screenshots from apps you admire (Mobbin is a great source):
references/
onboarding/ # Splash, welcome screens
auth/ # Login, signup, OTP
home-search/ # Home feed, search
search-results/ # Results, filters
listing-detail/ # Item detail pages
detail-page/ # Immersive details
pricing/ # Plans, subscriptions
payment/ # Checkout, payment methods
profile/ # User profile, stats
settings/ # Account, preferences
messaging/ # Chat, DM
notifications/ # Notification center
empty-states/ # Empty lists, no results
forms/ # Multi-step forms, wizards
map/ # Map views, pins
content-feed/ # Content cards, explore
Claude will automatically consult the relevant folder when building a screen of that type.
Note: Reference images are not included in this repo (copyright). Add your own!
Once installed, the skill activates automatically when you ask Claude Code to build mobile screens. You can also invoke it explicitly:
/mobile-design
Ahmed Sunder — @codewithsunderdev