Does this skill support both iOS and Android platforms?

Yes, it includes specific implementation logic for both Apple's Human Interface Guidelines and Google's Material Design 3, including platform-specific shadows and fonts.

How does it handle mobile accessibility?

It enforces non-negotiable standards including 44x44pt minimum touch targets, WCAG 2.1 AA color contrast ratios, and mandatory accessibility labels for interactive elements.

Does it provide dynamic dark mode support?

Yes, it includes a semantic color system and hooks like useColorScheme to facilitate seamless switching between light and dark themes.

Can I use these patterns with Expo?

Absolutely. These React Native patterns and styling conventions are fully compatible with both Expo and React Native CLI environments.

Mobile UI & React Native Design

Name: Mobile UI & React Native Design
Author: artofrawr

byartofrawr

•

Mobile Development

Implements high-performance, accessible mobile interfaces using React Native and platform-specific design patterns.

The ui-mobile skill equips Claude with specialized knowledge for building production-grade mobile interfaces that adhere to strict accessibility and platform standards. It prioritizes non-negotiable mobile ergonomics, including 44pt minimum touch targets and WCAG 2.1 AA color contrast ratios, while providing specific implementation patterns for both iOS Human Interface Guidelines and Android Material Design. This skill is ideal for developers building native applications who need to ensure their UI is inclusive, thumb-friendly, and maintains a consistent design language across different mobile operating systems.

Key Features

01Enforcement of mandatory touch target sizes and accessibility labels

02Platform-specific styling for iOS (HIG) and Android (Material Design)

03Standardized 4px base grid spacing and semantic typography system

04Dynamic dark mode support with semantic color tokens

05Pre-defined patterns for common components like Cards, Buttons, and Inputs

061 GitHub stars

Use Cases

01Translating web-based UI designs into native-optimized mobile layouts

02Building accessible React Native component libraries from scratch

03Implementing platform-adaptive styles that switch between iOS and Android conventions

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add artofrawr/claude-control ui-mobile

For use in Claude.ai and ChatGPT

Download Skill