This is a mobile design reference that forces you to think through platform decisions instead of defaulting to web patterns on a small screen. It's built around mandatory reading files covering touch psychology, performance patterns, and platform conventions, with explicit callouts to prevent AI from suggesting ScrollView for long lists or sub-44px touch targets. The "ask before assuming" section is the real value: it makes you declare iOS versus Android, React Native versus Flutter, and whether you need offline support before writing a single line. The anti-patterns table is a checklist of things that look fine in demos but kill performance in production. Use this when you're building actual mobile apps and need to respect battery life, thumb zones, and the fact that users will lose network mid-session.

skills.sh installs
1.8K
GitHub stars
33.2K
last updated
Aug 21, 2026

Install

$ npx -y skills add davila7/claude-code-templates --skill mobile-design --agent claude-code

Installs into .claude/skills of the current project.

Files

Mobile Design System

Philosophy: Touch-first. Battery-conscious. Platform-respectful. Offline-capable. Core Principle: Mobile is NOT a small desktop. THINK mobile constraints, ASK platform choice.


🔧 Runtime Scripts

Execute these for validation (don't read, just run):

ScriptPurposeUsage
scripts/mobile_audit.pyMobile UX & Touch Auditpython scripts/mobile_audit.py <project_path>

🔴 MANDATORY: Read Reference Files Before Working!

â›” DO NOT start development until you read the relevant files:

Universal (Always Read)

Sponsors

Details

Repository
github.com/davila7/claude-code-templates
Categories
Frontend Development, Debugging, Productivity & Planning, Mobile Development, Design & UI/UX
First seen
May 16, 2026

More from davila7/claude-code-templates

All 618
1everyinc avatarce-updateeveryinc/compound-engineering-pluginCheck if the compound-engineering plugin is up to date and recommend the update command if not. Use when the user says "update compound engineering", "check com1.8Kskills.sh installs
2refoundai avatardesign-systemsrefoundai/lenny-skillsHelp users build and scale design systems. Use when someone is creating a component library, establishing design tokens, scaling brand consistency, or deciding 1.8Kskills.sh installs
3nvidia avatarmcore-testingnvidia/skillsTest system for Megatron-LM. Covers test layout, recipe YAML structure, adding and running unit and functional tests, golden values, marker filters, and CI pari1.8Kskills.sh installs
4pproenca avatartypescriptpproenca/dot-skillsTypeScript performance, tsconfig, type errors, async patterns — triggered when the user asks to "optimize TypeScript performance", "speed up tsc compilation", "1.8Kskills.sh installs
5dylantarre avatarframer-motiondylantarre/animation-principlesUse when implementing Disney's 12 animation principles with Framer Motion in React applications1.8Kskills.sh installs
6k-dense-ai avatarxlsxk-dense-ai/scientific-agent-skillsCreate, edit, analyze, or convert Excel spreadsheets (.xlsx, .xlsm, .xltx) where the workbook file is the primary deliverable. Use for formulas, formatting, fin1.8Kskills.sh installs