Add mobile-design skill for React Native / Expo

[codewithsunderdev]

Summary

• Adds a new mobile-design skill for building production-grade React Native / Expo interfaces
• Applies design standards from top apps (Airbnb, Uber, Instagram)
• Includes 10 core design principles, component specs, anti-patterns, and a pre-flight checklist
• Organized reference image system (16 categories) — users add their own screenshots from Mobbin

What the skill covers

• Visual hierarchy — 8px grid, typography scales, clear focal points
• Modern components — bottom sheets, proper input states, subtle shadows, chips/tags
• Colors & contrast — neutral palette with primary as accent only
• Lists & performance — FlashList (never FlatList), skeleton loading, pull-to-refresh
• Forms — KeyboardAvoidingView, validation states, sticky submit buttons
• Navigation — bottom tabs, headers, StatusBar consistency, safe areas
• Animations — subtle micro-interactions (200-300ms), no cartoon bounce
• Anti-patterns — blocks 11 common mistakes (thick borders, heavy shadows, native alerts, etc.)
• Pre-flight checklist — 10-point quality check before delivering any screen

Reference image system

The skill includes a structured references/ directory with 16 categorized folders (onboarding, auth, payment, profile, map, empty-states, forms, etc.). Users populate them with their own screenshots from sources like Mobbin. Claude automatically consults the relevant folder when building a screen.

Test plan

• Install skill to ~/.claude/skills/mobile-design/
• Ask Claude Code to build a mobile login screen → verify it follows the principles
• Ask for a listing detail screen → verify visual hierarchy and component specs
• Check that anti-patterns are actively avoided (no FlatList, no alert(), no heavy shadows)

🤖 Generated with Claude Code