Mobile Design

Designs, implements, and reviews professional mobile UI for React Native and Expo, with platform-aware design and review guidance for iOS and Android. Use when the task involves mobile screens, components, navigation, visual direction, design systems, accessibility, gestures, haptics, animations, typography, color, dark mode, safe areas, adaptive windows, localization, platform conventions, App Store or Play-quality polish, iOS HIG, Material Design, Expo Router, React Navigation, Reanimated, Gesture Handler, or mobile UX critique.

7 starsMobile Development

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add RubenGlez/mobile-design --skill mobile-design

Manual install

git clone --depth 1 https://github.com/RubenGlez/mobile-design.git /tmp/mobile-design
mkdir -p ~/.claude/skills
cp -r /tmp/mobile-design/. ~/.claude/skills/mobile-design

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# Mobile Design

Act as a senior mobile product designer and React Native engineer. The work should feel app-native, usable in real contexts, and visually intentional. Put the user, their device, and their task before aesthetic defaults.

## Operating Loop

1. Infer the brief before designing.
2. State a one-line design read.
3. Load only the relevant reference files.
4. Run the feasibility preflight only when the feature has material platform, data, or runtime risk.
5. Check current local package versions and official docs before version-specific implementation advice.
6. Build or review against platform, accessibility, performance, and state-completeness constraints.
7. Verify the result when the repo and tools allow it.

## Design Read

Before code or critique, write one sentence:

`Reading this as: <app category> for <audience/context>, with a <visual direction> interface, targeting <platform>.`

If the brief lacks a critical constraint and no safe assumption is available, ask exactly one question and wait. Critical constraints include target platform, existing brand/design system, Expo vs bare workflow when native modules are involved, offline/security requirements, and target device class.

## Source Freshness

Treat mobile platform and library details as unstable. Before giving version-specific code or migration advice, inspect the local project when available and prefer official docs for:

- iOS HIG, SF Symbols, Live Activities, safe areas, Dynamic Type

Read the full skill on GitHub

Details

Skill name: mobile-design
Repository: RubenGlez/mobile-design
License: MIT
Repo updated: 21 July 2026

FAQ

What does the Mobile Design skill do?

How do I install the Mobile Design skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add RubenGlez/mobile-design --skill mobile-design. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Mobile Design popular?

It lives in RubenGlez/mobile-design, which has 7 GitHub stars and 0 forks.

Related skills

Mimic

khimaros/mimic

Drive an android device from a shell with the `mimic` cli -- read the on-screen accessibility tree (filtered/queried on-device to stay small) and tap, swipe, click, type, scroll, and navigate. Use for ui automation on a connected/termux android device. Covers setup, every subcommand, and how to keep agent context small.

Mobile Development

Store Ready

Medlzd/store-ready

Audits a mobile app before App Store or Google Play submission. Use when the user mentions publishing or submitting an app, App Store Connect, Play Console, TestFlight, rejection, metadata, signing.

Mobile Development

Iphone Duo Design

Belweave/iphone-duo-design

Design, build, lint and review iOS apps for iPhone Duo, Apple's foldable iPhone. Use when adapting SwiftUI or UIKit layouts for the outer and inner displays, size classes, vertical (side) bars, the fold and reserved regions, split views, ArrangementView, sheets, Split View multitasking, games, the hinge, camera direction, multiple windows, Live Activities, Liquid Glass on iOS 27, App Store screenshots and the optimized-for-iPhone-Duo badge, or when reviewing or testing an app on iPhone Duo.

Mobile Development

Anti Crack

sundaygod1207/anti-crack-skill

Anti-crack audit for client software. 防破解安全审计——保护客户端软件不被盗版、逆向、破解。覆盖 Electron/iOS/Android/Flutter/Go/Rust/C++/.NET(WPF/WinForms)/CLI/游戏等客户端平台，含联网通信和服务端配合防御，7大通用维度 + 10大平台专项。

Mobile Development

Apple Hig

ebuntario/apple-hig

Design and build interfaces that follow Apple's Human Interface Guidelines for iOS, iPadOS, macOS, watchOS, tvOS, and visionOS. TRIGGER on: "iOS app", "iPadOS", "macOS", "watchOS", "tvOS", "visionOS", "SwiftUI", "UIKit", "AppKit", "HIG", "Apple design", "iPhone UI", "Mac app", "Apple Watch app", "Vision Pro", "SF Symbols", "Dynamic Type", "Dark Mode", "Liquid Glass", or any request to build, mock, or review a user interface meant to ship on an Apple platform — even when "HIG" is not said. Also trigger on web or Figma mockups that the user explicitly wants to feel native to Apple. Always run Ph

Mobile Development

Android Performance Skill

avinashbest/android-performance-skill

Expert-level Android performance optimization skill. Use this skill whenever the user asks about anything related to Android app performance — including but not limited to: ANRs (Application Not Responding errors), crashes (NullPointerException, OOM, fatal exceptions), app startup time (cold start, warm start, hot start), UI jank or frame drops, memory leaks, battery drain, slow network calls, database/SQLite performance, overdraw, ProGuard/R8, Doze mode, WorkManager, RecyclerView performance, Bitmap/image loading, threading/coroutines, profiling with Android Studio, Perfetto, or Systrace. Tri

Mobile Development

Browse the most popular Claude skills, all mobile development skills, or write your own with the skills generator.