# Mobile App Design Standards

A skill that gives your agent concrete rules for mobile screens: iOS and Android conventions, touch targets, contrast, accessibility.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 906 installs · ★ 80
- Author: awesome-skills
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/awesome-skills/mobile-app-design/tree/HEAD/SKILL.md
- Updated: 2026-02-05
- HTML: https://affpapa.org/en/nevibecode/skills/mobile-app-design-standards

## What it 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.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add awesome-skills/mobile-app-design --skill mobile-app-design-standards -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/mobile-app-design-standards/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/mobile-app-design-standards/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add awesome-skills/mobile-app-design --skill mobile-app-design-standards -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/mobile-app-design-standards/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add awesome-skills/mobile-app-design --skill mobile-app-design-standards -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/mobile-app-design-standards/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install awesome-skills/mobile-app-design mobile-app-design-standards
```

2. **Manually: put the files in place**
- File: `.github/skills/mobile-app-design-standards/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add awesome-skills/mobile-app-design --skill mobile-app-design-standards -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/awesome-skills/mobile-app-design
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/mobile-app-design-standards/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add awesome-skills/mobile-app-design --skill mobile-app-design-standards -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/awesome-skills/mobile-app-design/tree/HEAD/SKILL.md

## When to use it
- 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
- 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

## Similar
- [ui-mobile](https://affpapa.org/en/nevibecode/skills/ui-mobile.md) — skill · 1200 installs
- [app-ui-design](https://affpapa.org/en/nevibecode/skills/app-ui-design.md) — skill · 636 installs
- [mobile-app-debugging](https://affpapa.org/en/nevibecode/skills/secondsky-mobile-app-debugging.md) — skill · 428 installs
- [mobile-app-developer](https://affpapa.org/en/nevibecode/agents/mobile-app-developer.md) — subagent · 1552 installs
- [mobile-principles](https://affpapa.org/en/nevibecode/skills/mobile-principles.md) — skill · 974 installs
- [mobile-design](https://affpapa.org/en/nevibecode/skills/mobile-design.md) — skill · 3700 installs

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md