Common Mobile Ux Core

hoangnguyen0403/common-mobile-ux-core

Enforce universal mobile UX principles for touch-first interfaces including touch targets, safe areas, and mobile-specific interaction patterns. Use when building mobile screens, handling touch interactions, or validating safe area compliance.

1k tokens

context cost

the whole folder, loaded on every use

files

instructions only

copies elsewhere

how many repositories repackaged it

536

stars on the repo

on the repository, not the skill itself

Install

one command, takes just this skill from the repository

npx skills add https://github.com/HoangNguyen0403/agent-skills-standard --skill common-mobile-ux-core

What comes with it

2 485 bytes besides the instruction

evals/evals.json

The instruction itself

7 sections, as written by the author

Mobile UX Core

Priority: P0 (CRITICAL)

Guidelines

Touch Targets: Min 44x44pt (iOS) / 48x48dp (Android). Add padding if needed.
Safe Areas: Wrap content in SafeArea/WindowInsets. Avoid notches.
Interactions: Use active states (no hover). Haptic feedback (short).
Typography: Min 16sp body. Line height 1.5x.
Keyboards: Auto-scroll inputs. Set InputType (email/number) & Action.

Code Examples

Correct: IconButton(icon: Icon(Icons.close), padding: EdgeInsets.all(12))
Avoid: Icon(Icons.close, size: 16) (Touch target too small)

Review Workflow

Test the smallest interactive element against 44pt iOS / 48dp Android.
Test content, keyboard, and fixed actions with notch/home-indicator/window insets.
Check pressed, loading, error, and disabled states; do not port desktop hover behavior.
Verify platform conventions separately before calling the screen complete.

Anti-Patterns

No Hover Effects: Mobile no cursor; use pressed/active states instead
No Tiny Targets: All clickable elements must ≥44pt
No Fixed Bottoms: Always account for Home Indicator and Keyboard safe areas
No OS Mixing: Respect Material (Android) and Cupertino (iOS) conventions separately

mobile-accessibility | mobile-performance | flutter-design-system | react-native-dls

How to use it

Copy the folder

Take hoangnguyen0403/common-mobile-ux-core from the repository into ~/.claude/skills for personal use, or into .claude/skills inside a project.

Check the name does not clash

The agent identifies a skill by the name field in its header. Two skills with the same name cannot sit side by side — one of them will be ignored.