mobile-app-ui-design skill
A skill for designing mobile app screens: five steps, the 60/30/10 rule, an 8-pixel grid and industry conventions
- 507 ★ on the repository
- Last commit
Minimal access
Why this level
- The skill is text instructions and a reference; it runs nothing and makes no network calls.
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/mobile-app-ui-designDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewMinimal accessThe tool runs nothing and makes no network calls.
- The skill is text instructions and a reference; it runs nothing and makes no network calls.
This is third-party code. Review the repository files before installing.
What it does
mobile-app-ui-design is a Claude Code skill that fires on any request about a mobile interface: a screen, a mockup, onboarding, navigation or a fix to an existing design. The agent follows five steps: it studies the context and the user, builds a structure with the main actions in the thumb zone, applies the visual rules, designs the user's emotion and polishes the details. The visual rules are numeric. Color splits 60/30/10 into a neutral base, a complementary color and an accent. All spacing is a multiple of 8 or 4 pixels, with one font family, at most four sizes and two weights. Shadows are soft and tinted to the background. The `references/industry-conventions.md` file describes the visual language of industries from finance and crypto to education and meditation and explains the peak-end rule. The agent assembles the result as a React prototype with Tailwind CSS, Lucide icons and Recharts charts.
Who it is for. Developers and product founders without a designer who ask an agent to draw app screens and want a tidy result without colors picked by eye.
Good fit when
- A fitness app home screen or a banking dashboard is needed, and the agent should propose a considered layout with a clear hierarchy.
- A health app's onboarding must feel calm and carry no extra fields.
- A finished screen looks flat, and the agent revisits hierarchy, spacing and shadows by the rules.
- A crypto wallet app needs the industry's visual language, where careful animation builds trust.
Not a fit when
- The layout is needed in Figma or native SwiftUI and Compose code: the skill builds React prototypes with Tailwind CSS.
- The product already has a design system with its own colors and fonts: the 60/30/10 rule and the 8-pixel grid will clash with it.
- The task is a website or a desktop dashboard: the skill's baseline width is 375 pixels.
Example request
Design the home screen of a meditation app: today's practice, a day streak and three quick scenarios.Limitations
This is a single skill made of `SKILL.md` and a reference file: the repository holds no scripts, project templates or mockups. The result comes as a React and Tailwind CSS prototype and no finished native screen appears; for React Native, Flutter and SwiftUI the skill gives principles but not code. The rules are strict and general, so an existing brand book has to be checked by hand. The repository has no license file, although the README calls the project MIT. The skill also suggests installing another skill by the same author for app store screenshots.
How to disable. Delete the `~/.claude/skills/mobile-app-ui-design/` folder, or use the `npx skills` removal mode if you installed with that CLI.
FAQ
How do I install the skill?
Run `npx skills add ceorkm/mobile-app-ui-design`. By hand, copy the files into `~/.claude/skills/mobile-app-ui-design/` and restart Claude Code.
When does the skill trigger on its own?
On requests like "design an app screen", "make a mockup", "improve this design" or "build onboarding". Saying "design an app" is enough, and the skill name need not be given.
What does the skill count as the thumb zone?
The bottom third of the screen: main actions go there, and key content is not hidden behind banners or extra taps. A tap target is at least 44 by 44 points.
How many fonts and sizes are allowed?
One family, two at most, no more than four sizes and two weights. The skill recommends setting large numbers such as prices and metrics in a monospace variant.
Which industries does the reference cover?
Artificial intelligence, crypto and Web3, finance and banking, health, sleep and meditation, education and several more. Each gets typical palettes, a mood and a lesson from a well-known app.
Discussion
No questions or reviews yet.
Related
SkillsTwo skills for building mobile screens at top-app quality: studying real screens through the Appllama MCP and a strict bar for native Expo and React Native UI
SwiftUI Design Skill
swiftui-design-skill
A SwiftUI interface design skill: compilable code, tokens, patterns and six rules against AI sloppiness. One-command installation through npx skills
A Claude Code skill that designs and builds a questionnaire-style app onboarding flow modeled on subscription apps
Animations, gestures, on-device AI, audio and live video: 10 Software Mansion skills teach the agent React Native patterns.
A SwiftUI best practices skill: state, view composition, performance, new APIs, Liquid Glass and Instruments trace analysis
A set of skills for iOS 26+, Swift 6.3 and SwiftUI that gives the agent knowledge of modern Apple frameworks
Comparison with similar tools
Cards that share the main search query, and how they differ.
| Tool | Official | Repository stars | Main difference |
|---|---|---|---|
| mobile-app-ui-design (this card) | no | 507 | |
| UI UX Pro Max | no | 146,102 | a large database of styles, palettes and font pairs for any product type; this one is a short skill with numeric rules and a reference for mobile screens only |
| SwiftUI Design Skill | no | 206 | interface design in SwiftUI code with tokens and patterns; this one builds React and Tailwind CSS prototypes with no platform tie |
README in short
The author draws on the practices of Airbnb, Duolingo, Spotify, Revolut and Phantom. `INDEX.md` sits next to `SKILL.md` with navigation by section and a short cheat sheet of the rules.
README badge
Original SKILL.md
--- name: mobile-app-ui-design description: Design high-quality mobile app UI/UX screens, flows, and components. Use this skill whenever the user asks 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, or requests any mobile-first interface work. Also trigger when the user mentions app design, mobile UI, mobile UX, screen design, app mockups, wireframes, or wants to build React Native / Flutter / SwiftUI style interfaces as visual prototypes. Even if the user just says "design an app" or "make this screen look better", use this skill. --- # Mobile App UI/UX Design Skill This skill guides the creation of professional, polished mobile app interfaces that follow proven design principles used by top-tier apps like Airbnb, Duolingo, Spotify, Revolut, and Phantom. ## Core Philosophy Great mobile UI isn't about flashiness — it's about intentionality. Every pixel, every spacing value, every color choice should serve the user. The goal is to create interfaces that feel smooth, personal, and alive — not just functional. Before designing anything, understand three things: 1. **What is the user trying to accomplish?** (reduce friction to that goal) 2. **How should this make the user feel?** (trust, delight, confidence, calm) 3. **What's the one thing they should notice first?** (visual hierarchy) ## Design Process Follow this sequence for any mobile screen: ### Step 1: Understand the Context - What type of app? (fitness, finance, social, productivity, health, crypto, etc.) - Who is the user? (new, returning, power user — adapt the experience) - What's the primary action on this screen? - What industry design conventions apply? (See `references/industry-conventions.md`) ### Step 2: Structure First (UX Lens) - Map the user flow: what screen comes before and after? - Identify the MVP elements — only what's essential for this screen - Place primary actions in the **thumb zone** (bottom 1/3 of screen) - Follow the **F-pattern** reading order for content layout - Reduce interaction cost: expose content directly instead of hiding behind taps - Turn empty states into opportunities with guidance, illustration, and a CTA - Choose the right input method: sliders/scroll wheels for one-time setup, text fields for repeated/precise entry ### Step 3: Apply Visual Design (UI Lens) Follow these rules in order: #### Typography - Use **one font family** (two max, with clear hierarchy purpose) - Maximum **4 font sizes** and **2 font weights** - Use monospace variants for large numbers (prices, stats, metrics) - Keep text containers under 600px wide for readability