# Codebase Index

## Overview
This repository contains a comprehensive mobile app UI/UX design skill and reference guide focused on creating professional, polished mobile interfaces.

## File Structure

```
mobile-app-ui-design/
├── SKILL.md                      # Mobile App UI/UX Design Skill Guide
├── references/
│   └── industry-conventions.md   # Industry-Specific Design Reference
├── INDEX.md                      # This file
└── README.md                     # Documentation & Installation
```

---

## SKILL.md
**Mobile App UI/UX Design Skill**

A comprehensive guide for designing high-quality mobile app interfaces following proven design principles from top-tier apps.

### Key Sections:
- **Core Philosophy** (lines 10-18): User-centric design approach
- **Design Process** (lines 20-96): 5-step framework
  - Step 1: Understand Context (lines 23-27)
  - Step 2: Structure First - UX Lens (lines 29-37)
  - Step 3: Visual Design - UI Lens (lines 39-76)
    - Typography (lines 41-46)
    - Color System - 60/30/10 Rule (lines 48-56)
    - Spacing - 8-Point Grid (lines 58-64)
    - Shadows (lines 66-69)
    - Visual Cues & Imagery (lines 71-77)
  - Step 4: Design for Emotion - Peak-End Rule (lines 79-87)
  - Step 5: Polish & Details (lines 89-96)
- **Smart Patterns** (lines 98-124): User-stage personalization, search, status tracking, categories
- **Anti-Patterns to Avoid** (lines 126-136): Common design mistakes
- **Implementation Notes** (lines 138-149): Technical guidance for React/Tailwind

### Design Principles Summary:
- One font family, max 4 sizes, 2 weights
- 60/30/10 color rule
- 8-point grid spacing system
- Soft shadows matched to backgrounds
- Thumb-zone primary actions
- Emotional feedback loops
- Peak-end rule application

---

## references/industry-conventions.md
**Industry Conventions & Emotional Design Reference**

Deep dive into industry-specific design languages and psychological principles for emotional design.

### Key Sections:
- **Industry-Specific Design Languages** (lines 3-55)
  - AI/Tech (lines 7-11)
  - Crypto/Web3 (lines 13-17): Phantom case study
  - Finance/Banking (lines 19-23): Revolut case study
  - Health/Wellness (lines 25-29): Ahead case study
  - Sleep/Meditation (lines 31-34)
  - Education/Learning (lines 36-39): Duolingo case study
  - Fitness (lines 41-44)
  - Productivity (lines 46-49)
  - E-commerce/Food (lines 51-54)

- **Emotional Design Principles** (lines 59-120)
  - Peak-End Rule (lines 60-96): Nobel Prize research by Daniel Kahneman
  - Emotional Feedback Loops (lines 98-103)
  - Three Strategic Principles from Spotify (lines 105-120)
    - The Trojan Horse: Hide complexity
    - The Vanity Mirror: Identity-based sharing
    - The Comfort Trap: Consistency as moat

- **Design Process for Client/Product Work** (lines 124-152)
  - Phase 1: Discovery & Inspiration (lines 126-129)
  - Phase 2: UI Direction (lines 131-135)
  - Phase 3: UX Structure (lines 137-144)
  - Phase 4: Combine UI + UX (lines 146-148)
  - UI vs UX lens separation (lines 150-152)

### Key Insights:
- Industry conventions build familiarity vs. breaking them stands out
- Peak-end rule: users remember the most intense moment + final impression
- Emotional feedback > functional feedback
- Separate UI and UX research lenses

---

## Quick Reference Guide

### When to Use This Skill
- Designing mobile app screens
- Creating app mockups
- Building mobile UI components
- Improving existing mobile designs
- Creating onboarding flows
- Designing mobile navigation
- Building React Native/Flutter/SwiftUI prototypes

### Core Design Framework
1. **Understand** → Context, user, primary action, industry conventions
2. **Structure** → User flow, MVP elements, thumb zone, F-pattern
3. **Visual Design** → Typography, color (60/30/10), spacing (8pt grid), shadows
4. **Emotion** → Peak moment, ending, feedback loops
5. **Polish** → Micro-interactions, states, accessibility

### Design Laws Applied
- **60/30/10 Color Rule**: 60% neutral, 30% complementary, 10% accent
- **8-Point Grid**: All spacing divisible by 8 or 4
- **Peak-End Rule**: Users remember peak + ending moments
- **Thumb Zone**: Primary actions in bottom 1/3 of screen
- **F-Pattern**: Natural reading/scanning order
- **Typography Hierarchy**: Max 4 sizes, 2 weights, opacity for hierarchy

---

## Implementation Tech Stack
- React (for artifacts)
- Tailwind CSS (utility classes)
- Lucide React (iconography)
- Recharts (data visualization)
- CSS transitions (micro-interactions)
- Mobile-first design (375px baseline)

---

## Tags
`mobile-ui` `ux-design` `emotional-design` `design-system` `react-native` `flutter` `swiftui` `tailwind` `design-principles` `app-design`