Mobile App Design Standards — Claude Code skill: mobile UI/UX rules
A skill that gives your agent concrete rules for mobile screens: iOS and Android conventions, touch targets, contrast, accessibility.
npx skills add awesome-skills/mobile-app-design --skill mobile-app-design-standards -a claude-codeWhat Mobile App Design Standards does
The skill activates when you ask the agent to design a mobile screen, review an existing one, or plan navigation. It carries platform rules: Human Interface Guidelines for iOS, Material Design for Android, plus a cross-platform section on React Native covering React Navigation and the Platform API.
The numbers are specific, so the agent has something to check against. Touch targets start at 44 × 44 pt on iOS and 48 × 48 dp on Android. Body text sits at 16sp/pt or above. Normal text needs a 4.5:1 contrast ratio, large text 3:1. Accessibility sections cover screen reader labels (accessibilityLabel, contentDescription), focus order, and cutting cognitive load. Performance advice runs through skeleton screens, touch feedback within 100ms, and list virtualisation in React Native.
There is also a component architecture block: container and presentational components, atomic design from atoms up to pages, and a consistency checklist for design systems. The skill does not draw mockups or scan your codebase on its own. It shapes what the agent proposes, so a vague request gets vague output — name the screen and the property you care about.
Install runs through npx skills add with an agent flag, and the skill file lands in that platform's skills directory.
What it helps with
- design a screen that follows iOS and Android conventions
- audit touch targets and contrast in existing markup
- plan navigation and heading hierarchy for an app
- split an interface into reusable components
- add screen reader labels and a sane focus order
Example prompts for the agent
- review this checkout screen against iOS and Android guidelines
- design a profile screen in React Native with proper touch targets
- run the design system consistency checklist over my app
How to install Mobile App Design Standards
1Skills CLI (Vercel)
npx skills add awesome-skills/mobile-app-design --skill mobile-app-design-standards -a claude-code2Manually: put the files in place
~/.claude/skills/mobile-app-design-standards/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/mobile-app-design-standards/
1Skills CLI (Vercel)
npx skills add awesome-skills/mobile-app-design --skill mobile-app-design-standards -a codex2Manually: put the files in place
.agents/skills/mobile-app-design-standards/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add awesome-skills/mobile-app-design --skill mobile-app-design-standards -a cursor2Manually: put the files in place
.cursor/skills/mobile-app-design-standards/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install awesome-skills/mobile-app-design mobile-app-design-standards2Manually: put the files in place
.github/skills/mobile-app-design-standards/SKILL.md1Skills CLI (Vercel)
npx skills add awesome-skills/mobile-app-design --skill mobile-app-design-standards -a gemini-cli2Platform CLI
gemini skills install https://github.com/awesome-skills/mobile-app-designManually: put the files in place
.devin/skills/mobile-app-design-standards/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add awesome-skills/mobile-app-design --skill mobile-app-design-standards -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about Mobile App Design Standards
How do I install Mobile App Design Standards in Claude?
Run npx skills add awesome-skills/mobile-app-design --skill mobile-app-design-standards -a claude-code. The skill lands at ~/.claude/skills/mobile-app-design-standards/SKILL.md.
What does Mobile App Design Standards do?
It hands the agent a rulebook for mobile interfaces: native iOS and Android patterns, touch target sizes, typography, contrast, accessibility, and performance work.
Which platforms can install this skill?
Besides Claude, the same command works for Codex, Cursor, GitHub Copilot, Gemini CLI, and OpenCode — only the agent flag changes.
