Claude MarketplacesSubmit
awesome-skills avatar

Mobile App Design Standards

awesome-skills/mobile-app-design

This is your reference guide when you're building mobile UIs and need to check if you're following platform conventions. It covers the iOS and Android basics like touch target minimums (44pt vs 48dp), navigation patterns, typography scales, and WCAG contrast ratios. The React Native guidance is solid too, with the container/presentational pattern and performance tips like using FlatList for long lists. What I like is it's opinionated about atomic design methodology and includes an actual consistency checklist you can run through. It won't teach you design from scratch, but if you're implementing screens and want to avoid the common mistakes or need to review someone else's work, this gives you the specifics to look for.

install copies · 90 days. Times the install command was copied on this site in the last 90 days, bots filtered.
7
GitHub stars
60
last updated
Aug 21, 2026
View on GitHub

Install

$ npx -y skills add awesome-skills/mobile-app-design --skill 'Mobile App Design Standards' --agent claude-code

Installs into .claude/skills of the current project.

Files

Mobile App Design Standards

Comprehensive guidance for designing mobile applications that follow platform conventions, accessibility standards, and modern UX best practices.

Purpose

Apply platform-specific design guidelines, interaction patterns, and accessibility standards when designing, reviewing, or improving mobile application interfaces. Ensure designs are consistent, accessible, performant, and follow 2026 industry best practices.

When to Use This Skill

Use this skill when:

  • Designing new mobile app screens or features
  • Reviewing existing UI/UX implementations
  • Planning interaction flows and navigation
  • Establishing design systems or style guides
  • Making platform-specific design decisions
  • Optimizing for accessibility or performance
  • Modernizing legacy mobile interfaces

Core Design Principles

Platform-Native Conventions

iOS (Human Interface Guidelines):

  • Navigation: Back button in top-left, primary action in top-right
  • Tab bar at bottom with 3-5 items
  • Large titles for hierarchy
  • System fonts: San Francisco (designed for small sizes)
  • Haptic feedback for confirmations
  • Swipe gestures for navigation
SKILL.md on GitHub

Sponsors

Promote your product hereReach 125k+ visitors monthlyPromote your product hereReach 125k+ visitors monthlyAgent CaffeineSponsoredClose your lid, come back to finished workSnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthlyWaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthlyknobsSponsoredSee your site on any phone, any day, in any language

Details

Repository
github.com/awesome-skills/mobile-app-design
Categories
Frontend Development, Git & Pull Requests, Code Review & Quality, Mobile Development, Design & UI/UX
First seen
Jun 3, 2026

Recommended

More Frontend Development
1bountydotnew avatarIntegrating Stripe Paymentsbountydotnew/bounty.newComplete workflow for integrating Stripe payments (subscriptions or one-time) with Convex + Next.js. Includes hosted checkout, webhooks, UI components, and test0skills.sh installs
2breaking-brake avatarjira-driven-planningbreaking-brake/cc-wf-studioJiraチケットの要件とConfluenceの関連ドキュメントを基に、Frontend/Backend/Infrastructureに分割した実装計画を策定するプランニングスキル。Jiraチケット情報とConfluence検索結果が前段で取得済みであることを前提とし、構造化された実装計画を出力する。「プランニング」「実0skills.sh installs
3butterbase-ai avatarauth-setupbutterbase-ai/butterbase-skillsThis covers OAuth setup for Google, GitHub, Apple, X, and custom providers, plus JWT lifetime tuning and post-login hooks.0skills.sh installs
4butterbase-ai avatardebug-rlsbutterbase-ai/butterbase-skillsWhen your frontend users complain they can't see their data or they're seeing everyone else's data, this is the protocol to follow.0skills.sh installs
5butterbase-ai avatarjourney-deploybutterbase-ai/butterbase-skillsUse as the deploy-verification stage of the Butterbase journey, after journey-frontend (or after any build stage if there is no frontend). Smoke-tests the deplo0skills.sh installs
6butterbase-ai avatarjourney-planbutterbase-ai/butterbase-skillsUse as stage 2 of the Butterbase journey, after journey-idea has written 01-idea.md. Translates the idea + capability map into a concrete Butterbase plan — tabl0skills.sh installs