Can I use this for Dark Mode?

Absolutely. The skill includes a semantic color system and React Native hooks to handle dynamic switching between light and dark themes.

How does it handle accessibility?

It enforces mandatory 44x44pt touch targets, WCAG 2.1 AA color contrast ratios, and required accessibility labels for all interactive elements.

Does this skill support both iOS and Android?

Yes, it includes platform-specific logic and design patterns tailored to the iOS Human Interface Guidelines and Android Material Design 3.

What mobile framework is this compatible with?

This skill is specifically optimized for React Native, utilizing StyleSheet and native platform components.

Mobile UI Design Pattern

Name: Mobile UI Design Pattern
Author: alinaqi

byalinaqi

•

530

•

Mobile Development

Implements accessibility-first React Native user interfaces with platform-specific design systems and touch-optimized patterns.

The ui-mobile skill equips Claude with a rigorous framework for developing professional mobile applications using React Native. It prioritizes accessibility through non-negotiable standards, such as mandatory 44x44pt touch targets and WCAG-compliant color contrast ratios. By providing standardized spacing systems, semantic color palettes, and platform-specific design patterns for both iOS and Android, this skill ensures that mobile interfaces are not only visually consistent but also highly functional and inclusive. It is an essential tool for developers building AI-native mobile apps that require high-quality, production-ready UI components.

主要功能

01Standardized 4px base grid spacing system and Safe Area integration

02Strict 44x44pt minimum touch target enforcement for interactive elements

03WCAG 2.1 AA color contrast validation for light and dark modes

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

05Comprehensive semantic color system for dynamic theme switching

06530 GitHub stars

使用场景

01Creating cross-platform interfaces that adapt to native OS design languages

02Bootstrapping a new React Native project with accessible-by-default components

03Refactoring existing mobile screens to comply with accessibility standards

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add alinaqi/claude-bootstrap ui-mobile

For use in Claude.ai and ChatGPT

Download Skill