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 irahardianto in irahardianto/awesome-agv

Generates distinctive, production-grade mobile interfaces for Flutter and React Native.

MITAuto-check passedMobile

Install Mobile Design

skills CLI
$ npx skills add irahardianto/awesome-agv --skill mobile-design -a claude-code

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

GitHub CLI
$ gh skill install irahardianto/awesome-agv 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/irahardianto/awesome-agv.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/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
156
Token cost
~1.2k tokens
SKILL.md length
484 words
Files
1
Skills in repo
34
Repo updated
First seen
Licence
MIT

At a glance

Generates distinctive, production-grade mobile interfaces for Flutter and React Native.

  • Building mobile apps
  • SKILL.md covers Design Thinking, Mobile Design Guidelines, Flutter-Specific Patterns and Rule Compliance
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
  • The user requests to style

What it does

Mobile Design is an agent skill from irahardianto/awesome-agv. Generates distinctive, production-grade mobile interfaces for Flutter and React Native. Prioritizes platform-native patterns, adaptive layouts, and fluid motion. Use when building mobile apps, screens, widgets, or when the user requests to style or create visually striking mobile UI.

Its SKILL.md is about 1.2k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Mobile, covering Mobile UI design, Cross-platform mobile apps and Responsive design. It works with Flutter, React Native, Android and iOS. The repository describes itself as: Comprehensive sets of standards and practices designed to elevate the capabilities of AI coding agents. The licence is MIT.

When your agent uses it

  • Building mobile apps
  • The user requests to style
  • Create visually striking mobile UI

Example prompts

  • “Use the mobile-design skill to generate distinctive, production-grade mobile interfaces for Flutter and React Native”
  • “/mobile-design”

What it can do on your machine

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

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md (its code samples are dart).

    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 1.2k tokens when it runs. Until then it costs about 75 tokens; SKILL.md has 484 words of instructions outside code blocks.

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

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 passed

The automated check found no risky patterns in SKILL.md.

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); files beside SKILL.md are not scanned.

SKILL.md

The full file from irahardianto/awesome-agv at commit 9e997ba, republished under its MIT licence (© irahardianto). 484 words, ~1,248 tokens.

Download SKILL.mdSave it as .claude/skills/mobile-design/SKILL.md (or your agent's skills folder).
name
mobile-design
description
Generates distinctive, production-grade mobile interfaces for Flutter and React Native. Prioritizes platform-native patterns, adaptive layouts, and fluid motion. Use when building mobile apps, screens, widgets, or when the user requests to style or create visually striking mobile UI.

Mobile Design Skill

This skill guides creation of distinctive, production-grade mobile interfaces that feel native to the platform while maintaining a unique aesthetic identity. Implement real working code with exceptional attention to platform conventions and creative design choices.

The user provides mobile UI requirements: a screen, widget, feature, or complete app interface. They may include context about the platform (iOS/Android), audience, or technical constraints.

Design Thinking

Before coding, understand the context and commit to a platform-aware aesthetic direction:

  • Platform: iOS (Cupertino), Android (Material 3), or cross-platform? Each has distinct expectations.
  • Tone: Pick a direction — refined luxury, playful/energetic, utilitarian/efficient, editorial/content-first, organic/warm, bold/geometric, soft/pastel, etc.
  • Constraints: Performance on low-end devices, offline capability, accessibility.
  • Differentiation: What makes this app memorable? What's the signature interaction?

CRITICAL: Mobile users have muscle memory. Respect platform conventions (navigation patterns, gesture zones, system UI) while injecting personality through typography, color, motion, and layout composition.

Mobile Design Guidelines

Platform Conventions
  • iOS: Bottom tab bar, large title navigation, swipe-to-go-back, Cupertino widgets
  • Android: Material 3, navigation rail/drawer, FAB, top app bar
  • Cross-platform: Use adaptive widgets that render platform-appropriate UI
Typography
  • Choose distinctive but highly readable fonts at mobile sizes (16px+ body)
  • Respect dynamic type / font scaling — never hardcode font sizes
  • Use TextTheme in Flutter, keep a consistent type scale
  • Pair a characterful display font with a supremely legible body font
Color & Theme
  • Support both light and dark themes — always
  • Use ColorScheme / ThemeData for consistency
  • Ensure contrast ratios work on OLED (pure black) and LCD displays
  • Use color purposefully — primary actions, status indicators, brand identity
Motion & Animation
  • Use meaningful motion — animations should communicate state changes, not decorate
  • Keep animations under 300ms for interactions, up to 500ms for transitions
  • Use Hero animations for shared element transitions
  • Stagger list item animations for visual polish
  • Respect reduceMotion / accessibility settings — always provide a static fallback
Show full SKILL.md (185 more words)Show less
Layout & Spacing
  • Design for one-handed use — critical actions in thumb-reach zone (bottom 60% of screen)
  • Use safe area insets — never overlap system UI (notch, home indicator, status bar)
  • Design for varying screen sizes — phones, tablets, foldables
  • Use responsive breakpoints: compact (<600dp), medium (600-840dp), expanded (>840dp)
  • Generous touch targets: minimum 48x48dp
Performance
  • Avoid rebuilding expensive widget trees — use const constructors
  • Lazy-load lists with ListView.builder (never ListView for large lists)
  • Optimize images — use cached_network_image, proper resolution variants
  • Profile on real devices, not just emulators

Flutter-Specific Patterns

dart
// ✅ Good: Adaptive widget that respects platform
Widget buildButton(BuildContext context) {
  return Platform.isIOS
    ? CupertinoButton(child: text, onPressed: onTap)
    : ElevatedButton(child: text, onPressed: onTap);
}

// ✅ Good: Responsive layout with breakpoints
Widget build(BuildContext context) {
  final width = MediaQuery.of(context).size.width;
  if (width >= 840) return _expandedLayout();
  if (width >= 600) return _mediumLayout();
  return _compactLayout();
}

// ❌ Bad: Hardcoded sizes that break on different devices
Container(width: 375, height: 812) // iPhone X only!

Rule Compliance

Before implementing, verify against:

  • Project Structure @project-structure.md (Flutter/Mobile layout, feature organization)
  • Testing Strategy @testing-strategy.md (widget tests, integration tests)
  • Security Principles @security-principles.md (secure storage, API key handling)
  • Accessibility Principles @accessibility-principles.md (screen reader, dynamic type, contrast)
  • Architectural Patterns @architectural-pattern.md (Riverpod 3 Notifier, repository pattern)

IMPORTANT: Mobile has unique constraints — battery life, network variability, and user context (one-handed, on-the-go). Every design choice should respect these realities. Beautiful UI that drains battery or stutters on scroll is a failure.

Remember: The best mobile apps feel like they were designed specifically for the device in your hand. Make every pixel and every interaction intentional.

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

Files

Just SKILL.md in .agents/skills/mobile-design of irahardianto/awesome-agv.

Open the folder on GitHubat commit 9e997ba

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 skillirahardianto/awesome-agv156—~1.2kAutomated safety check: PassMIT
Developing Mobile Appstelagod/code-abyss244—~258Automated safety check: PassMIT
Android Designhashgraph-online/awesome-codex-plugins1.3k—~2.5kAutomated safety check: PassApache-2.0
Mobile Apps Createforcedotcom/sf-skills1.1k—~1.4kAutomated safety check: PassApache-2.0
Mobile DesignxenitV1/Antigravity-Workflows1302 repos~3.7kAutomated safety check: NotesMIT
SimdeckNativeScript/SimDeck153—~3.6kAutomated 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

  • 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 today
    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

  • Simdeck

    NativeScript/SimDeck

    A skill your agent uses for simulator lifecycle, app install/launch, live viewing, UI inspection, touch/keyboard automation, screenshots, recordings, logs, pasteboard, hardware controls, and…

    153 GitHub stars~3.6k tokensUpdated 29 days ago
    MobileAuto-check passed

  • Detour Onboarding

    software-mansion-labs/skills

    Complete onboarding guide for developers who are new to Detour, the open-source deferred deep linking SDK by Software Mansion.

    291 GitHub stars~2.8k tokensUpdated 12 days ago
    MobileAuto-check passed

More from irahardianto/awesome-agv

All 34 skills in this repo

  • Distinctive Frontend Design Builder

    irahardianto/awesome-agv

    Commits to one bold aesthetic direction, sets up a CSS token system for it, then builds the interface in Vue or plain HTML using those tokens.

    156 GitHub stars~2.4k tokensUpdated 5 days ago
    Auto-check passed

  • Perf Optimization

    irahardianto/awesome-agv

    Profile-driven performance optimization protocol. An agent skill from irahardianto/awesome-agv.

    156 GitHub stars~4.3k tokensUpdated 5 days ago
    Auto-check passed

  • Angular Idioms and Patterns

    irahardianto/awesome-agv

    Coding conventions for Angular 19 and later: standalone components, signals, OnPush change detection, lazy routes and where RxJS still belongs.

    156 GitHub stars~3.8k tokensUpdated 5 days ago
    Auto-check passed

  • CI/CD Pipeline Principles

    irahardianto/awesome-agv

    Rules for designing CI/CD pipelines in layers: universal lint, test and scan stages, container builds with SBOM attestation, and GitOps for orchestrated deployments.

    156 GitHub stars~2.7k tokensUpdated 5 days ago
    Auto-check: notes

  • Hono Idioms

    irahardianto/awesome-agv

    Hono lightweight web framework patterns: type-safe route handlers, middleware composition, Zod validation, and RPC clients for Cloudflare Workers, Node, or Bun.

    156 GitHub stars~3k tokensUpdated 5 days ago
    Auto-check passed

  • Mobile Testing

    irahardianto/awesome-agv

    Mobile E2E testing patterns — Flutter integrationtest, Patrol, Maestro, golden testing, device matrix, and test data management.

    156 GitHub stars~1.8k tokensUpdated 5 days ago
    Auto-check: notes

Works with

Categories

Questions about Mobile Design

What does Mobile Design do?

Generates distinctive, production-grade mobile interfaces for Flutter and React Native. Mobile Design is an agent skill from irahardianto/awesome-agv. Generates distinctive, production-grade mobile interfaces for Flutter and React Native.

When should I use Mobile Design?

Mobile Design fits situations like: building mobile apps; the user requests to style; create visually striking mobile UI.

How do I install Mobile Design in Claude Code?

Run `npx skills add irahardianto/awesome-agv --skill mobile-design -a claude-code`. Or copy the skill folder (.agents/skills/mobile-design in irahardianto/awesome-agv) 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 irahardianto/awesome-agv --skill mobile-design -a codex`. Or copy the skill folder (.agents/skills/mobile-design in irahardianto/awesome-agv) 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 irahardianto/awesome-agv --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?

SKILL.md names no scripts, command-line tools or credentials: Mobile Design is instructions for the agent only.

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 no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

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 1.2k tokens (SKILL.md is roughly 5k 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), Android Design (hashgraph-online/awesome-codex-plugins, 1.3k stars), Mobile Apps Create (forcedotcom/sf-skills, 1.1k stars) and Mobile Design (xenitV1/Antigravity-Workflows, 130 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Mobile Design?

irahardianto (a GitHub user) maintains it in irahardianto/awesome-agv, which has 156 GitHub stars. The repository holds 34 skills in this directory. The repository was last updated on October 5, 2026.

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