What is mobile-design?

A design guide for building mobile app interfaces with Flutter or React Native. It covers iOS and Android conventions, adaptive layouts, readable text, light and dark themes, and motion.

Use it when designing or coding app screens, navigation, themes, responsive layouts, gestures, and platform-specific interface components.

It helps apps feel appropriate on each mobile platform while remaining visually distinctive and usable on different screen sizes and devices.

How irahardianto/rugged-gemini configures Gemini CLI

Reuse

Borrowing it

Nothing to install: this file belongs to irahardianto/rugged-gemini. Take a copy, put it at the same path in your own repository, and replace the rules that are about this project with yours.

Copy the file

curl -O https://raw.githubusercontent.com/irahardianto/rugged-gemini/main/.gemini/skills/mobile-design/SKILL.md

Clone the repo

git clone --depth 1 https://github.com/irahardianto/rugged-gemini

Made for: Gemini CLI.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

README.md

[![agentmods](https://agentmods.dev/badge/skills/irahardianto/rugged-gemini/mobile-design/github.svg)](https://agentmods.dev/skills/irahardianto/rugged-gemini/mobile-design)

Your own site

<a href="https://agentmods.dev/skills/irahardianto/rugged-gemini/mobile-design"><img src="https://agentmods.dev/badge/skills/irahardianto/rugged-gemini/mobile-design/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

Your own site · 80×15

<a href="https://agentmods.dev/skills/irahardianto/rugged-gemini/mobile-design"><img src="https://agentmods.dev/badge/skills/irahardianto/rugged-gemini/mobile-design.svg" alt="Reviewed on agentmods" width="80" height="20"></a>

Per session 31 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.

When invoked 662 The whole file, excluding the scripts and references it only reads on demand.

Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe.

Origin original No closer match found in the catalogue.

Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

Model	Per session	Once invoked
Fable 5.1	$0.00031	$0.00662
Opus 5	$0.00015	$0.00331
Sonnet 5	$0.00006	$0.00132
Haiku 4.5	$0.00003	$0.00066

Measured 10d ago against content hash 9d4372b6a1ba, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-10, from the pricing page.

Security

Grade A, and why

mobile-design scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 10d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

.gemini/skills/mobile-design/SKILL.md · 80 lines

How it starts

The opening of the file, as written. The whole thing — 80 lines — stays where its author put it; the contents beside it link to each section on GitHub.

Mobile Design Skill

Distinctive, production-grade mobile interfaces. Native to platform while maintaining unique aesthetic.

Design Thinking

Before coding:

Platform: iOS (Cupertino), Android (Material 3), or cross-platform?
Tone: luxury, playful, utilitarian, editorial, organic, bold, soft...
Constraints: low-end device perf, offline, accessibility
Differentiation: signature interaction

CRITICAL: Respect platform conventions (nav patterns, gestures, system UI) while injecting personality through typography, color, motion, layout.

Guidelines

Platform

iOS: bottom tab bar, large title nav, swipe-back, Cupertino widgets
Android: Material 3, nav rail/drawer, FAB, top app bar
Cross: adaptive widgets rendering platform-appropriate UI

Typography

Readable at mobile sizes (16px+ body). Respect dynamic type (never hardcode sizes).
TextTheme in Flutter. Characterful display + legible body.

Color & Theme

ALWAYS support light + dark. ColorScheme/ThemeData. OLED + LCD contrast.
Color purposefully: primary actions, status, brand.

Motion

Meaningful (communicate state, not decorate). ≤300ms interactions, ≤500ms transitions.
Hero for shared elements. Stagger list items. Respect reduceMotion — always static fallback.

Layout

One-handed: critical actions in bottom 60% (thumb zone). Safe area insets.
Responsive: compact (<600dp), medium (600-840dp), expanded (>840dp).
Touch targets: min 48×48dp.

Performance

const constructors. ListView.builder for lists. cached_network_image.
Profile on real devices.

Flutter Patterns

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

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

// ❌ Hardcoded sizes
Container(width: 375, height: 812) // iPhone X only!

Read the full file on GitHub · 80 lines

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

10d ago First seen · 80 lines · 31 tokens per session scan A 9d4372b6a1ba

Subscribe to this mod's changes

mobile-design is a skill published in the GitHub repository irahardianto/rugged-gemini (5 stars, last pushed 4mo ago), licensed MIT. It adds 31 tokens to every session and 662 once invoked, about $0.0002 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.

Design and UX Mobile

display-glasses-with-jetpack-compose-glimmer

Provides guidelines for developing projected Android XR apps for display glasses using the Jetpack Compose Glimmer UI toolkit. This skill covers foundational Glimmer design principles, workflows for implementing Jetpack Compose Glimmer, and interaction models for the glasses form factor. Use this skill to build an…

android/skills · 91 tokens

expo-design-system

Framework (OSS). Build and maintain a design system inside an Expo app - a reusable theme of design tokens (color, spacing, typography, radius, shadow, motion), reusable component structure with variant/size/state prop conventions, and rules for when to extract a repeated view into a shared component. Use when…

expo/skills · 201 tokens

rugged-gemini: Skill for Gemini CLI