| .. | ||
| references | ||
| .gitignore | ||
| INDEX.md | ||
| README.md | ||
| SKILL.md | ||
Mobile App UI/UX Design Skill
A comprehensive Claude Code skill for designing professional, polished mobile app interfaces that follow proven design principles from top-tier apps like Airbnb, Duolingo, Spotify, Revolut, and Phantom.
Overview
This skill guides the creation of mobile app UIs that are intentional, smooth, personal, and alive — not just functional. It covers everything from design philosophy to implementation details.
Features
- Complete Design Process: 5-step framework from context to polish
- Industry-Specific Conventions: Design patterns for 9+ industries (AI, Crypto, Finance, Health, etc.)
- Emotional Design Principles: Peak-End Rule, feedback loops, strategic patterns
- Design Systems: Typography, color (60/30/10 rule), spacing (8-point grid)
- Implementation Guidance: React, Tailwind CSS, component patterns
When to Use
This skill automatically triggers when you ask Claude to:
- Design a mobile app screen
- Create app mockups
- Build mobile UI components
- Improve an existing mobile app design
- Create onboarding flows
- Design mobile navigation
- Build React Native/Flutter/SwiftUI interfaces
Design Principles
Core Philosophy
Great mobile UI isn't about flashiness — it's about intentionality. Every pixel, spacing value, and color choice should serve the user.
Key Design Laws
- 60/30/10 Color Rule: 60% neutral, 30% complementary, 10% accent
- 8-Point Grid System: All spacing divisible by 8 or 4
- Peak-End Rule: Users remember peak moment + ending
- Thumb Zone: Primary actions in bottom 1/3 of screen
- F-Pattern: Natural reading/scanning order
- Typography Hierarchy: Max 4 sizes, 2 weights
Examples
"Design a fitness app home screen"
"Create a banking app dashboard"
"Build a meditation app interface"
"Design a crypto wallet transaction screen"
"Create an onboarding flow for a health app"
File Structure
.
├── SKILL.md # Main skill guide
├── references/
│ └── industry-conventions.md # Industry-specific patterns & emotional design
├── INDEX.md # Navigation & quick reference
└── README.md # This file
Installation
Quick Install (Recommended)
npx skills add ceorkm/mobile-app-ui-design
Manual Installation
- Clone this repository
- Copy files to
~/.claude/skills/mobile-app-ui-design/ - Restart Claude Code
Direct Download
npx skills add ceorkm/mobile-app-ui-design
What's Included
SKILL.md
- Core design philosophy
- 5-step design process
- Visual design rules (typography, color, spacing, shadows)
- Smart UI patterns
- Anti-patterns to avoid
- Implementation notes
industry-conventions.md
- Industry-specific design languages (AI, Crypto, Finance, Health, etc.)
- Peak-End Rule from Nobel Prize research
- Emotional feedback loops
- Spotify's strategic principles
- 4-phase design process for client work
INDEX.md
- Complete navigation with line numbers
- Quick reference guide
- Design laws summary
- Tech stack overview
Tech Stack
The skill provides guidance for:
- React (artifacts)
- Tailwind CSS (utility classes)
- Lucide React (icons)
- Recharts (data visualization)
- CSS transitions (micro-interactions)
Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
License
MIT License - feel free to use this skill in your projects.
Credits
Design principles compiled from industry best practices, research papers, and case studies from leading design teams at:
- Airbnb
- Duolingo
- Spotify
- Revolut
- Phantom
- Apple (Design Award winners)
Made for Claude Code • Report Issues