mobile-design · manutej — Claude Code skill: mobile UX and touch patterns
A skill for mobile interfaces: touch targets, gestures, thumb zones, safe areas and mobile-first layout for small screens.
npx skills add manutej/luxor-claude-marketplace --skill mobile-design -a claude-codeWhat mobile-design 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.
What it helps with
- 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 for the agent
- 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
How to install mobile-design
1Skills CLI (Vercel)
npx skills add manutej/luxor-claude-marketplace --skill mobile-design -a claude-code2Manually: put the files in place
~/.claude/skills/mobile-design/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/mobile-design/
1Skills CLI (Vercel)
npx skills add manutej/luxor-claude-marketplace --skill mobile-design -a codex2Manually: put the files in place
.agents/skills/mobile-design/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add manutej/luxor-claude-marketplace --skill mobile-design -a cursor2Manually: put the files in place
.cursor/skills/mobile-design/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install manutej/luxor-claude-marketplace mobile-design2Manually: put the files in place
.github/skills/mobile-design/SKILL.md1Skills CLI (Vercel)
npx skills add manutej/luxor-claude-marketplace --skill mobile-design -a gemini-cli2Platform CLI
gemini skills install https://github.com/manutej/luxor-claude-marketplace --path plugins/luxor-frontend-essentials/skills/mobile-designManually: put the files in place
.devin/skills/mobile-design/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add manutej/luxor-claude-marketplace --skill mobile-design -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-design
How do I install mobile-design in Claude?
Run npx skills add manutej/luxor-claude-marketplace --skill mobile-design -a claude-code. The skill lands at ~/.claude/skills/mobile-design/SKILL.md.
What does the mobile-design skill do?
It gives the agent mobile interface rules: touch targets, gestures, thumb zones, navigation, viewport and safe areas. The agent applies them while you edit a mobile layout or a native app.
Which platforms can run mobile-design?
It installs into Claude, Codex, Cursor, GitHub Copilot, Gemini CLI and OpenCode. The examples inside cover web, PWAs and React Native.
Similar skills
Everything for Design →mobile-design by other authors comes first.
