mobile-app-ui-design
ceorkm/mobile-app-ui-design · skills.sh
Open source Repository Open in the app JSON README (API)
About
Skill publicada por ceorkm/mobile-app-ui-design no skills.sh. Instale com: npx skills add ceorkm/mobile-app-ui-design@mobile-app-ui-design
Details
- Kind
- Agent skills
- Topic
- No topic detected
- Publisher
- ceorkm
- Origin
- skillssh
- Category
- ferramentas
- Stars
- 327
- Forks
- 29
- Last push
- 2026-06-25T11:07:18Z
- Repository state
- ativo
- Added
- 2026-08-30 15:21:20
- Updated
- 2026-09-08 15:02:15
- Origin id
ceorkm/mobile-app-ui-design/mobile-app-ui-design
README
# Mobile App UI/UX Design Skill [](https://skills.sh) [](https://agentskills.io) [](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)