m mobile-design showcase

An agent skill for coding agents

Mobile UI judgment for coding agents.

mobile-design helps coding agents design, implement, and review React Native, Expo, iOS, and Android UI with production-minded states, accessibility, and platform constraints.

See the skill in action Install via skills.sh ↗ View the repository ↗
Installnpx skills add RubenGlez/mobile-design
01 Trust after a transfer 02 Safety without signal 03 Checkout beyond English 04 Design audit in action

01 · Fintech

A transfer confirmation that earns confidence.

Solace makes the irreversible decision explicit, keeps the amount and recipient in view, and avoids treating a pending payment as a success.

Design read
Calm, explicit, iOS + Android
Dial choice
Low motion, low visual variance
State shown
Review → pending → sent
View the prompt Design a banking transfer confirmation for iOS and Android. Make the recipient, amount, risk, recovery, and platform divergence explicit.
9:41● ● ●
Review transfer

You’re sending

$420.00

M
Maya Thompson•••• 0198
✓
ArrivesToday
Fee$0.00
FromDaily account

Review the recipient and amount. Transfers may not be reversible once sent.

You’ll confirm with Face ID

02 · Outdoor safety

A ride log that stays honest when the network disappears.

Trailguard designs for motion, location consent, battery awareness, and a route that can remain safely on-device until a rider chooses to sync.

Design read
Outdoor, high contrast, safety-critical
Risk preflight
Location, background execution, offline sync
Fallback
Manual ride mode with no invented route
View the prompt Design a cycling-safety feature for React Native/Expo that records rides with background location and an offline route log. Keep the app useful if location or connectivity is unavailable.
9:41● 5G ▰
Riverside loop●◆
Recording
12.4km
00:38time
StrongGPS

Saved on this device · Syncing when online

03 · Commerce + localization

Checkout that survives RTL, long copy, and a resized window.

Maison North makes language, direction, currency, and compact-to-wide layout part of the product contract instead of a final translation pass.

Design read
Editorial commerce, decisive, cross-platform
Modes
English / Arabic and compact / wide
State shown
Safe form completion with order summary
View the prompt Design a commerce checkout localized for Arabic and German. Cover RTL, long strings, currency formatting, form keyboard flow, and tablet layouts.
M
Maison North

Delivery details

2 of 3
Wool wrap coatStandard delivery · 2–4 days
$320.00
Total $320.00

04 · Design audit

Turn vague visual discomfort into an actionable fix list.

The audit starts with a weak support screen, names the issues by severity, then rebuilds hierarchy, targets, state, and recovery without a decorative rewrite.

Review method
Severity, rule ID, location, required fix
Problems found
Target size, hierarchy, swipe-only delete
Result
Keyboard-friendly, understandable in five seconds
View the prompt Review a mobile support queue with small icon actions, unclear priority, and swipe-only delete. Report issues with severity and required fixes.
9:41● ● ●
Inbox

Support tickets

Refund maybe?Can someone help, it has been...
›
What is this chargeYesterday · #94821
›
Urgent accessPlease help please help please...
›

Swipe a row to delete

P1 · MD-001 Delete has no visible alternative
P1 · MD-004 Icon targets are too small
P2 · MD-008 Priority is not scannable

The method

What changes when the design is treated as a product decision.

  1. 01
    Read the context

    Audience, environment, platform, constraints, task success.

  2. 02
    Design the states

    Not just the default screen, also loading, denied, offline, error, and recovery.

  3. 03
    Verify the contract

    Accessibility, window size, input methods, localization, and real runtime limits.

Try it on a real app

Give your coding agent a mobile brief with consequences.

Install via skills.sh ↗View the repository ↗