# mobile-design

A skill for mobile interfaces: touch targets, gestures, thumb zones, safe areas and mobile-first layout for small screens.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 545 installs · ★ 62
- Author: manutej
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/manutej/luxor-claude-marketplace/tree/HEAD/plugins/luxor-frontend-essentials/skills/mobile-design/SKILL.md
- Updated: 2026-06-13
- HTML: https://affpapa.org/en/nevibecode/skills/manutej-mobile-design

## What it does

Reach for this skill when you build a mobile interface or adapt an existing one. It carries the rules: how big touch targets should be, how far apart they sit, where the thumb actually reaches, and how navigation should behave. Viewport handling and safe areas for the notch and home indicator are covered too.

The material is split by topic — mobile-first versus desktop-first, touch interactions, breakpoints, the viewport meta tag. Code samples come in CSS, HTML and React Native, so it works for web and for native iOS and Android work. There is a single-tap example with visual feedback and a warning about double-tap zoom on iOS. That one is worth checking against your own buttons if they come out under 48 pixels.

Install comes from the `manutej/luxor-claude-marketplace` marketplace via `npx skills add`; GitHub Copilot users get a separate `gh skill install` line. Nothing else to set up — it is a set of instructions in `SKILL.md` that the agent reads.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add manutej/luxor-claude-marketplace --skill mobile-design -a claude-code
```

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

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add manutej/luxor-claude-marketplace --skill mobile-design -a codex
```

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

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add manutej/luxor-claude-marketplace --skill mobile-design -a cursor
```

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

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install manutej/luxor-claude-marketplace mobile-design
```

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

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add manutej/luxor-claude-marketplace --skill mobile-design -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/manutej/luxor-claude-marketplace --path plugins/luxor-frontend-essentials/skills/mobile-design
```

### Windsurf (Devin Desktop)

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

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add manutej/luxor-claude-marketplace --skill mobile-design -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/manutej/luxor-claude-marketplace/tree/HEAD/plugins/luxor-frontend-essentials/skills/mobile-design/SKILL.md

## When to use it
- size buttons and spacing for a finger, not a cursor
- move the primary action into one-handed reach
- kill accidental double-tap zoom on iOS
- handle the notch and home indicator with safe areas
- rewrite a desktop layout the mobile-first way

## Example prompts
- Check this form against mobile-design: are the touch targets and spacing right?
- Rewrite this CSS mobile-first, the way the mobile-design skill suggests
- Add safe area padding to the header and footer per mobile-design

## Similar
- [mobile-ux-optimizer](https://affpapa.org/en/nevibecode/skills/mobile-ux-optimizer.md) — skill · 498 installs
- [mobile-native](https://affpapa.org/en/nevibecode/skills/mobile-native.md) — skill · 86600 installs
- [mobile-touch](https://affpapa.org/en/nevibecode/skills/mobile-touch.md) — skill · 2400 installs
- [navigation-patterns](https://affpapa.org/en/nevibecode/skills/navigation-patterns.md) — skill · 1800 installs
- [build-mobile-threejs-games](https://affpapa.org/en/nevibecode/skills/build-mobile-threejs-games.md) — skill · 1300 installs
- [godot-platform-mobile](https://affpapa.org/en/nevibecode/skills/godot-platform-mobile.md) — skill · 421 installs

## Other versions with the same name
- [mobile-design · sickn33](https://affpapa.org/en/nevibecode/skills/mobile-design.md) — 3700 installs

From the same set: [manutej/luxor-claude-marketplace](https://affpapa.org/en/nevibecode/by/manutej/luxor-claude-marketplace.md) — 31 cards

---
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