New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Mobile Design

by agent-skills-hub in agent-skills-hub/agent-skills-hub

Mobile-first design and engineering doctrine for iOS and Android apps.

MITAuto-check: notesMobile

Install Mobile Design

skills CLI
$ npx skills add agent-skills-hub/agent-skills-hub --skill mobile-design -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install agent-skills-hub/agent-skills-hub mobile-design --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/agent-skills-hub/agent-skills-hub.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/mobile-design .claude/skills/mobile-design && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
mobile-design
GitHub stars
112
Token cost
~2.3k tokens
SKILL.md length
618 words
Files
14 (incl. scripts)
Skills in repo
19
Repo updated
First seen
Licence
MIT

At a glance

Mobile-first design and engineering doctrine for iOS and Android apps.

  • Works in 11 steps: Mobile Feasibility & Risk Index (MFRI) → Mandatory Thinking Before Any Work → Mandatory Reference Reading (Enforced) → …
  • Native mobile apps
  • SKILL.md covers 1. Mobile Feasibility & Risk…, 2. Mandatory Thinking Before…, 3. Mandatory Reference Reading… and 4. AI Mobile Anti-Patterns…, plus 7 more sections
  • Runs Python scripts from its folder

What it does

Mobile Design is an agent skill from agent-skills-hub/agent-skills-hub. Mobile-first design and engineering doctrine for iOS and Android apps. Covers touch interaction, performance, platform conventions, offline behavior, and mobile-specific decision-making. Teaches principles and constraints, not fixed layouts. Use for React Native, Flutter, or native mobile apps.

Its SKILL.md is about 2.3k tokens, which your agent loads only when the skill is triggered. The skill folder holds 14 other files, including scripts (for example `decision-trees.md`, `mobile-backend.md` and `mobile-color-system.md`).

It sits in Mobile, covering Mobile UI design, Cross-platform mobile apps and Android development. It works with Flutter, React Native and iOS. The repository describes itself as: Agent Skills Hub is a global library of AI agent skills that work across OpenClaw, Claude Code, Gemini, Cursor, Antigravity, and more. The licence is MIT.

When your agent uses it

  • Native mobile apps
  • Tasks that involve Mobile UI design
  • Tasks that involve Cross-platform mobile apps

Example prompts

  • “/mobile-design”

Requirements

  • Python 3
  • Pre-approved tools (allowed-tools): Read, Glob, Grep, Bash

Workflow steps

11 steps, taken from the step headings in SKILL.md.

  1. Mobile Feasibility & Risk Index (MFRI)
  2. Mandatory Thinking Before Any Work
  3. Mandatory Reference Reading (Enforced)
  4. AI Mobile Anti-Patterns (Hard Bans)
  5. Platform Unification vs Divergence Matrix
  6. Mobile UX Psychology (Non-Optional)
  7. Performance Doctrine
  8. Mandatory Mobile Checkpoint
  9. Framework Decision Tree (Canonical)
  10. Release Readiness Checklist
  11. Related Skills

What it can do on your machine

Read from SKILL.md and the folder at commit efc0b96. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves these tools, so the agent can use them without asking each time:

    • Read
    • Glob
    • Grep
    • Bash

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Ships 1 file in scripts/ (Python), which the agent can run.

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Mobile Design loads about 2.3k tokens when it runs. Until then it costs about 77 tokens; SKILL.md has 618 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~77
When it runs · the whole SKILL.md, loaded when a task matches
~2.3k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check: notes

The automated check noted patterns worth knowing about, such as sudo or a known installer.

  • NotePre-approves every shell command (allowed-tools: Bash)SKILL.md
    allowed-tools: Read, Glob, Grep, Bash

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.

SKILL.md

The full file from agent-skills-hub/agent-skills-hub at commit efc0b96, republished under its MIT licence (© agent-skills-hub). 618 words, ~2,289 tokens.

Download SKILL.mdSave it as .claude/skills/mobile-design/SKILL.md (or your agent's skills folder). This skill also uses 13 other files; get the full folder from GitHub.
name
mobile-design
description
Mobile-first design and engineering doctrine for iOS and Android apps. Covers touch interaction, performance, platform conventions, offline behavior, and mobile-specific decision-making. Teaches principles and constraints, not fixed layouts. Use for React Native, Flutter, or native mobile apps.
allowed-tools
Read, Glob, Grep, Bash

Mobile Design System

(Mobile-First · Touch-First · Platform-Respectful)

Philosophy: Touch-first. Battery-conscious. Platform-respectful. Offline-capable. Core Law: Mobile is NOT a small desktop. Operating Rule: Think constraints first, aesthetics second.

This skill exists to prevent desktop-thinking, AI-defaults, and unsafe assumptions when designing or building mobile applications.

1. Mobile Feasibility & Risk Index (MFRI)

Before designing or implementing any mobile feature or screen, assess feasibility.

MFRI Dimensions (1–5)
DimensionQuestion
Platform ClarityIs the target platform (iOS / Android / both) explicitly defined?
Interaction ComplexityHow complex are gestures, flows, or navigation?
Performance RiskDoes this involve lists, animations, heavy state, or media?
Offline DependenceDoes the feature break or degrade without network?
Accessibility RiskDoes this impact motor, visual, or cognitive accessibility?
Score Formula
MFRI = (Platform Clarity + Accessibility Readiness)
       − (Interaction Complexity + Performance Risk + Offline Dependence)

Range: -10 → +10

Interpretation
MFRIMeaningRequired Action
6–10SafeProceed normally
3–5ModerateAdd performance + UX validation
0–2RiskySimplify interactions or architecture
< 0DangerousRedesign before implementation

2. Mandatory Thinking Before Any Work

⛔ STOP: Ask Before Assuming (Required)

If any of the following are not explicitly stated, you MUST ask before proceeding:

AspectQuestionWhy
PlatformiOS, Android, or both?Affects navigation, gestures, typography
FrameworkReact Native, Flutter, or native?Determines performance and patterns
NavigationTabs, stack, drawer?Core UX architecture
OfflineMust it work offline?Data & sync strategy
DevicesPhone only or tablet too?Layout & density rules
AudienceConsumer, enterprise, accessibility needs?Touch & readability

🚫 Never default to your favorite stack or pattern.

3. Mandatory Reference Reading (Enforced)

Universal (Always Read First)
FilePurposeStatus
mobile-design-thinking.mdAnti-memorization, context-forcing🔴 REQUIRED FIRST
touch-psychology.mdFitts’ Law, thumb zones, gestures🔴 REQUIRED
mobile-performance.md60fps, memory, battery🔴 REQUIRED
mobile-backend.mdOffline sync, push, APIs🔴 REQUIRED
mobile-testing.mdDevice & E2E testing🔴 REQUIRED
mobile-debugging.mdNative vs JS debugging🔴 REQUIRED
Platform-Specific (Conditional)
PlatformFile
iOSplatform-ios.md
Androidplatform-android.md
Cross-platformBOTH above

❌ If you haven’t read the platform file, you are not allowed to design UI.

4. AI Mobile Anti-Patterns (Hard Bans)

🚫 Performance Sins (Non-Negotiable)
❌ NeverWhy✅ Always
ScrollView for long listsMemory explosionFlatList / FlashList / ListView.builder
Inline renderItemRe-renders all rowsuseCallback + memo
Index as keyReorder bugsStable ID
JS-thread animationsJankNative driver / GPU
console.log in prodJS thread blockStrip logs
No memoizationBattery + perf drainReact.memo / const widgets
Show full SKILL.md (258 more words)Show less
🚫 Touch & UX Sins
❌ NeverWhy✅ Always
Touch <44–48pxMiss tapsMin touch target
Gesture-only actionExcludes usersButton fallback
No loading stateFeels brokenExplicit feedback
No error recoveryDead endRetry + message
Ignore platform normsMuscle memory brokeniOS ≠ Android
🚫 Security Sins
❌ NeverWhy✅ Always
Tokens in AsyncStorageEasily stolenSecureStore / Keychain
Hardcoded secretsReverse engineeredEnv + secure storage
No SSL pinningMITM riskCert pinning
Log sensitive dataPII leakageNever log secrets

5. Platform Unification vs Divergence Matrix

UNIFY                          DIVERGE
──────────────────────────     ─────────────────────────
Business logic                Navigation behavior
Data models                    Gestures
API contracts                  Icons
Validation                     Typography
Error semantics                Pickers / dialogs
Platform Defaults
ElementiOSAndroid
FontSF ProRoboto
Min touch44pt48dp
BackEdge swipeSystem back
SheetsBottom sheetDialog / sheet
IconsSF SymbolsMaterial Icons

6. Mobile UX Psychology (Non-Optional)

Fitts’ Law (Touch Reality)
  • Finger ≠ cursor
  • Accuracy is low
  • Reach matters more than precision

Rules:

  • Primary CTAs live in thumb zone
  • Destructive actions pushed away
  • No hover assumptions

7. Performance Doctrine

React Native (Required Pattern)
ts
const Row = React.memo(({ item }) => (
  <View><Text>{item.title}</Text></View>
));

const renderItem = useCallback(
  ({ item }) => <Row item={item} />,
  []
);

<FlatList
  data={items}
  renderItem={renderItem}
  keyExtractor={(i) => i.id}
  getItemLayout={(_, i) => ({
    length: ITEM_HEIGHT,
    offset: ITEM_HEIGHT * i,
    index: i,
  })}
/>
Flutter (Required Pattern)
dart
class Item extends StatelessWidget {
  const Item({super.key});

  @override
  Widget build(BuildContext context) {
    return const Text('Static');
  }
}
  • const everywhere possible
  • Targeted rebuilds only

8. Mandatory Mobile Checkpoint

Before writing any code, you must complete this:

🧠 MOBILE CHECKPOINT

Platform:     ___________
Framework:    ___________
Files Read:   ___________

3 Principles I Will Apply:
1.
2.
3.

Anti-Patterns I Will Avoid:
1.
2.

❌ Cannot complete → go back and read.

9. Framework Decision Tree (Canonical)

Need OTA + web team → React Native + Expo
High-perf UI → Flutter
iOS only → SwiftUI
Android only → Compose

No debate without justification.

10. Release Readiness Checklist

Before Shipping
  • Touch targets ≥ 44–48px
  • Offline handled
  • Secure storage used
  • Lists optimized
  • Logs stripped
  • Tested on low-end devices
  • Accessibility labels present
  • MFRI ≥ 3
  • frontend-design – Visual systems & components
  • frontend-dev-guidelines – RN/TS architecture
  • backend-dev-guidelines – Mobile-safe APIs
  • error-tracking – Crash & performance telemetry

Final Law: Mobile users are distracted, interrupted, and impatient—often using one hand on a bad network with low battery. Design for that reality, or your app will fail quietly.

© agent-skills-hub, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 13 other files (scripts) in skills/mobile-design of agent-skills-hub/agent-skills-hub.

  • SKILL.md
  • decision-trees.md
  • mobile-backend.md
  • mobile-color-system.md
  • mobile-debugging.md
  • mobile-design-thinking.md
  • mobile-navigation.md
  • mobile-performance.md
  • mobile-testing.md
  • mobile-typography.md
  • platform-android.md
  • platform-ios.md
  • scripts/mobile_audit.py
  • touch-psychology.md

Open the folder on GitHubat commit efc0b96

Compare with similar skills

Mobile Design next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Mobile Design compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Mobile Design this skillagent-skills-hub/agent-skills-hub112—~2.3kAutomated safety check: NotesMIT
Developing Mobile Appstelagod/code-abyss244—~258Automated safety check: PassMIT
Mobile Apps Createforcedotcom/sf-skills1.1k—~1.4kAutomated safety check: PassApache-2.0
Mobile DesignxenitV1/Antigravity-Workflows1302 repos~3.7kAutomated safety check: NotesMIT
Oma Mobilefirst-fluke/oh-my-agent1.3k—~2.4kAutomated safety check: PassMIT
Senior Mobileborghei/Claude-Skills891—~1.9kAutomated safety check: PassMIT

Similar skills

  • Developing Mobile Apps

    telagod/code-abyss

    Mobile development knowledge reference covering iOS (SwiftUI), Android (Jetpack Compose), React Native, and Flutter.

    244 GitHub stars~258 tokensUpdated 2 mo ago
    MobileAuto-check passed

  • Mobile Apps Create

    forcedotcom/sf-skills

    The entry point for building any Salesforce native mobile app on iOS or Android.

    1.1k GitHub stars~1.4k tokensUpdated yesterday
    MobileAuto-check passed

  • Mobile Design

    xenitV1/Antigravity-Workflows

    Mobile-first design thinking and decision-making for iOS and Android apps.

    130 GitHub starsUsed in 2 repos~3.7k tokens
    MobileAuto-check: notes

  • Oma Mobile

    first-fluke/oh-my-agent

    Implement Flutter, React Native, or native Swift apps. An agent skill from first-fluke/oh-my-agent.

    1.3k GitHub stars~2.4k tokensUpdated yesterday
    MobileAuto-check passed

  • Senior Mobile

    borghei/Claude-Skills

    A skill your agent uses when the user asks to "build a mobile app", "scaffold React Native project", "create SwiftUI views", "set up Jetpack Compose", "optimize mobile performance", "configure Expo…

    891 GitHub stars~1.9k tokensUpdated 4 days ago
    MobileAuto-check passed

  • Android Design

    hashgraph-online/awesome-codex-plugins

    A skill your agent uses when the user asks for an Android app, Compose UI, Material 3, Material You, Material 3 Expressive, Pixel-style app, foldable/adaptive layout, Play Store deliverable, React…

    1.3k GitHub stars~2.5k tokensUpdated yesterday
    MobileAuto-check passed

More from agent-skills-hub/agent-skills-hub

All 19 skills in this repo

  • Open Notebook

    agent-skills-hub/agent-skills-hub

    Drives a self-hosted Open Notebook instance to organize sources into notebooks, chat with documents, generate notes and multi-speaker podcasts, and search across material.

    112 GitHub starsUsed in 3 repos~2.6k tokens
    Auto-check passed

  • Timesfm Forecasting

    agent-skills-hub/agent-skills-hub

    Zero-shot time series forecasting with Google's TimesFM foundation model.

    112 GitHub starsUsed in 1 repo~7.8k tokens
    Auto-check: notes

  • Pyzotero

    agent-skills-hub/agent-skills-hub

    Interact with Zotero reference management libraries using the pyzotero Python client.

    112 GitHub starsUsed in 4 repos~1.1k tokens
    Auto-check: notes

  • Alpha Vantage

    agent-skills-hub/agent-skills-hub

    Access real-time and historical stock market data, forex rates, cryptocurrency prices, commodities, economic indicators, and 50+ technical indicators via the Alpha Vantage API.

    112 GitHub starsUsed in 2 repos~1.6k tokens
    Auto-check passed

  • Build Sdf Liquid Glass

    agent-skills-hub/agent-skills-hub

    Build lightweight SDF/canvas displacement glass with Vaso. An agent skill from agent-skills-hub/agent-skills-hub.

    112 GitHub stars~674 tokensUpdated 9 days ago
    Auto-check passed

  • Edgartools

    agent-skills-hub/agent-skills-hub

    Python library for accessing, analyzing, and extracting data from SEC EDGAR filings.

    112 GitHub starsUsed in 2 repos~1.4k tokens
    Auto-check passed

Works with

Categories

Questions about Mobile Design

What does Mobile Design do?

Mobile-first design and engineering doctrine for iOS and Android apps. Mobile Design is an agent skill from agent-skills-hub/agent-skills-hub. Mobile-first design and engineering doctrine for iOS and Android apps.

When should I use Mobile Design?

Mobile Design fits situations like: native mobile apps; tasks that involve Mobile UI design; tasks that involve Cross-platform mobile apps.

How do I install Mobile Design in Claude Code?

Run `npx skills add agent-skills-hub/agent-skills-hub --skill mobile-design -a claude-code`. Or copy the skill folder (skills/mobile-design in agent-skills-hub/agent-skills-hub) into .claude/skills/mobile-design in your project. Claude Code loads it when a task matches its description.

How do I install Mobile Design in Codex?

Run `npx skills add agent-skills-hub/agent-skills-hub --skill mobile-design -a codex`. Or copy the skill folder (skills/mobile-design in agent-skills-hub/agent-skills-hub) into .agents/skills/mobile-design in your project. Codex loads it when a task matches its description.

Can I use Mobile Design in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add agent-skills-hub/agent-skills-hub --skill mobile-design -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/mobile-design, .gemini/skills/mobile-design, .github/skills/mobile-design and .opencode/skills/mobile-design in your project.

What does Mobile Design need to run?

Going by SKILL.md and its folder, Mobile Design needs Python for the scripts in its folder. Our summary lists: Python 3. Its frontmatter pre-approves these tools: Read, Glob, Grep, Bash.

Does Mobile Design access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Mobile Design safe to install?

Our automated static check of SKILL.md found notes only (pre-approves every shell command (allowed-tools: bash)), nothing it rates as a warning. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.

What licence does Mobile Design use?

Mobile Design is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Mobile Design use?

About 2.3k tokens (SKILL.md is roughly 9.2k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Mobile Design?

Skills that share tags, products or a category with Mobile Design: Developing Mobile Apps (telagod/code-abyss, 244 stars), Mobile Apps Create (forcedotcom/sf-skills, 1.1k stars), Mobile Design (xenitV1/Antigravity-Workflows, 130 stars) and Oma Mobile (first-fluke/oh-my-agent, 1.3k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Mobile Design?

agent-skills-hub (a GitHub organization) maintains it in agent-skills-hub/agent-skills-hub, which has 112 GitHub stars. The repository holds 19 skills in this directory. The repository was last updated on October 2, 2026.

Source: agent-skills-hub/agent-skills-hub on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.