# Mobile App UI/UX Design Skill

[![Install with npx](https://img.shields.io/badge/install-npx%20skills%20add-blue)](https://skills.sh)
[![Agent Skills](https://img.shields.io/badge/agent-skills-purple)](https://agentskills.io)
[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](LICENSE)

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)
```bash
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
```bash
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](https://github.com/ceorkm/mobile-app-ui-design/issues)