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

1. Clone this repository
2. Copy files to ~/.claude/skills/mobile-app-ui-design/
3. 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