ui-mobile

SKILL.md

Mobile UI patterns for React Native with mandatory accessibility standards and platform-specific design.

Enforces non-negotiable accessibility rules: 44pt minimum touch targets, WCAG 2.1 AA color contrast (4.5:1 for text), visible button boundaries, and required accessibility labels for all interactive elements

Covers iOS Human Interface Guidelines and Android Material Design 3 with platform-specific code for shadows, typography, and spacing

Includes production-ready component patterns for buttons, cards, text fields, lists, headers, and tab navigation with proper focus states and touch feedback

Provides semantic color system, 4pt spacing grid, typography scale, and native animation guidance using Animated API and React Native Reanimated

Mobile UI Design Skill (React Native)

MANDATORY: Mobile Accessibility Standards

These rules are NON-NEGOTIABLE. Every UI element must pass these checks.

1. Touch Targets (CRITICAL)

// MINIMUM 44x44 points for ALL interactive elements
const MINIMUM_TOUCH_SIZE = 44;