Mobile Design

Coding agents can write mobile UI but rarely reason about it like a mobile product designer. Mobile Design is an agent skill that gives them a real design process: before touching code it infers the brief, states a one-line design read, and sets three design dials that shape density, motion, and visual risk for the rest of the task.

The skill is a compact SKILL.md plus 13 reference files covering screen patterns, forms, typography and color, accessibility and touch, motion and haptics, navigation, iOS and Android conventions, React Native implementation, and review checklists. The agent loads only the files the task needs, so a form redesign doesn’t pull in animation guidance.

Some rules are hard constraints, not taste: 44pt/48dp touch targets, WCAG AA contrast, safe area handling, Dynamic Type and Reduce Motion support, and complete loading, empty, error, and disabled states. It also steers agents away from generic AI-looking mobile output, the centered web-style heroes and purple gradient blobs, in favor of choices traceable to the actual product.

Because mobile platform details go stale fast, the skill treats them as unstable: it checks local package versions and official sources (iOS HIG, Material 3, Expo, React Navigation, Reanimated) before giving version-specific advice.