skills.rest
lciacci
lciacciCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

ui-mobile

Design accessible mobile interfaces with 44-point touch targets and WCAG contrast.

Updated Jun 19, 2026
Search Tags:#accessibility#ios#dark mode#android#react native#mobile ui#touch targets
One-click install
npx skills add https://github.com/lciacci/tessera --skill ui-mobile-lciacci
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-mobile
Source: https://github.com/lciacci/tessera/tree/main/skills/ui-mobile
Command: npx skills add https://github.com/lciacci/tessera --skill ui-mobile-lciacci

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps create mobile interfaces that are touch-friendly, accessible, visually clear, and consistent across React Native, iOS, and Android.

Core Features & Use Cases

  • Accessibility-first design: Apply 44-point touch targets, accessible labels, readable contrast, dynamic type, and visible interaction states.
  • Cross-platform patterns: Build platform-aware navigation, safe-area handling, typography, colors, shadows, and feedback for iOS and Android.
  • Production-ready components: Structure buttons, inputs, cards, lists, loading states, animations, and dark-mode interfaces using reusable mobile conventions.
  • Use Case: Apply the Skill when building a React Native settings screen that must support one-handed use, VoiceOver and TalkBack, large text, dark mode, and platform-specific styling.

Quick Start

Use the ui-mobile skill to design or review this mobile screen for accessibility, touch targets, platform conventions, and dark-mode readiness.

Frequently Asked Questions about ui-mobile

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

FAQPage Schema
How do I design React Native screens for accessibility and VoiceOver?▼

Design accessible mobile interfaces by enforcing 44-point touch targets, WCAG contrast, accessibility labels, visible interaction states, and dynamic type support for VoiceOver and TalkBack compatibility.

What is the minimum touch target size for iOS and Android accessibility?▼

The minimum touch target size for iOS and Android accessibility is 44 points. Enforcing this standard ensures interactive elements remain usable for touch-first mobile interactions.

How do I handle safe-area and dark mode for mobile UI components?▼

Handle safe-area and dark mode by applying platform-aware navigation, safe-area insets, and platform-specific styling patterns to ensure responsive mobile interfaces across iOS and Android.

Does this approach work for both iOS and Android platform conventions?▼

Yes, this approach supports iOS and Android by applying platform-aware patterns for navigation, typography, colors, shadows, and feedback to ensure cross-platform mobile UI consistency.

What components can I structure using accessible mobile UI patterns?▼

You can structure buttons, inputs, cards, lists, loading states, and animations using reusable mobile conventions that support dark-mode interfaces and accessible touch-first interaction.

Related Skills

Explore More Design & Creative Skills→
gustavscirulisgustavscirulis
114

ux-spec

Generate UI/UX specifications with wireframes and design systems from PRDs.

Community
Advanced
gabelulgabelul
38

stitch-react-native-components

Convert Google Stitch mobile UI designs into React Native/Expo components.

Community
Advanced
yusufcmgyusufcmg
1

visual-design-foundations

Apply visual design principles to create accessible digital interfaces.

Community
Intermediate
manutejmanutej
61

mobile-design

Provide mobile UX patterns for touch interactions, navigation, and accessibility.

Community
Intermediate