skills.rest
aberrantCode
aberrantCodeCOMMUNITY
Explore all skills by this author →
GitHub

ui-mobile

Provide mobile UI design patterns and accessibility rules for React Native, iOS, and Android interfaces.

1|Updated Feb 26, 2026
Search Tags:#accessibility#ios#android#react-native#touch-targets#design-systems#mobile-ui
One-click install
npx skills add https://github.com/aberrantCode/llm_skills --skill ui-mobile-aberrantcode
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-mobile
Source: https://github.com/aberrantCode/llm_skills/tree/main/claude/skills/ui-mobile
Command: npx skills add https://github.com/aberrantCode/llm_skills --skill ui-mobile-aberrantcode

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Mobile apps often suffer from inconsistent touch targets, poor contrast, and platform mismatches that break usability and accessibility; this Skill provides clear, enforceable patterns to make mobile interfaces reliable, accessible, and platform-appropriate.

Core Features & Use Cases

  • Accessibility-first Rules: Mandates minimum touch target sizes, required accessibility labels, visible press states, and WCAG contrast ratios to prevent common accessibility regressions.
  • Platform-Conscious Patterns: Documents iOS and Android differences for typography, shadows, tab bar sizing, and safe-area handling so teams can implement consistent cross-platform components.
  • Component and Interaction Guidance: Spells out spacing systems, button styles, list rows, loading states, and animation strategies (native driver and reanimated) for performant, polished UI.
  • Use Case: Use this Skill to audit a React Native screen for accessibility issues, standardize a design system's spacing and typography, or implement platform-specific navigation and feedback patterns.

Quick Start

Request an accessibility and platform audit for a given React Native screen by describing the screen layout, target platform, and any interactive elements to check.

Frequently Asked Questions about ui-mobile

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I design accessible touch targets for React Native components?▼

To design accessible touch targets in React Native, enforce a 44pt minimum size for interactive elements and include visible press states. This ensures compliance with WCAG contrast ratios and platform-specific accessibility requirements for mobile interfaces.

What are the iOS and Android differences for mobile UI typography and safe areas?▼

iOS and Android mobile UI differences involve platform-specific typography, shadow rendering, tab bar sizing, and safe-area handling. Documenting these variations allows teams to implement consistent cross-platform components without breaking native usability conventions.

How do I audit a React Native screen for accessibility issues?▼

To audit a React Native screen for accessibility issues, describe the screen layout, target platform, and interactive elements. The audit checks for required accessibility labels, 44pt minimum touch targets, and WCAG contrast ratios to identify usability regressions.

Can I use native driver animations for loading states in cross-platform mobile apps?▼

Yes, you can use native driver animations and reanimated strategies for loading states in cross-platform mobile apps. These patterns ensure performant, polished UI interactions without blocking the JavaScript thread on iOS and Android.

What is the best way to standardize a design system's spacing and typography for mobile?▼

The best way to standardize a design system's spacing and typography for mobile is to apply platform-conscious patterns. This approach documents specific iOS and Android differences to maintain consistent cross-platform component libraries and reliable layouts.

Related Skills

Explore More Design & Creative Skills→
latelierkiyoselatelierkiyose

accessibility-compliance

Implement WCAG 2.2 compliant interfaces with ARIA and semantic HTML.

Official
Advanced
EmasoftEmasoft
1

swiftui-ui

Build SwiftUI screens for iOS 26 with native components and state-driven navigation.

Community
Advanced
artofrawrartofrawr
1

ui-mobile

Identify and organize mobile UI design patterns for React Native and native platforms.

Community
Advanced
tyronerosstyroneross
1

mobile-web-ui

Enforce responsive design and touch target accessibility for mobile web interfaces.

Community
Intermediate