ios-hig-rn-basics

Stars0

Forks0

UpdatedJanuary 17, 2026 at 09:01

Core iOS HIG guidance and design rules. Use when giving iOS UI/UX advice on layout, typography, color, spacing, controls, and iconography (not Expo Router implementation).

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Source

0xabrar

0xabrar/skills

View GitHub Repository View Creator Repositories

Download

Related occupationsSOC

Based on SOC occupation classification

Web and Digital Interface DesignersComputer and Mathematical Occupations·SOC 15-1255

File Explorer

3 files

SKILL.md

readonly

name	ios-hig-rn-basics
description	Core iOS HIG guidance and design rules. Use when giving iOS UI/UX advice on layout, typography, color, spacing, controls, and iconography (not Expo Router implementation).

iOS HIG + RN/Expo Basics

Overview

Provide practical iOS UX/UI guidance and map each recommendation to React Native or Expo implementation hints.

Quick Start

Ask for screen type, primary action, and target devices (iPhone, iPad, or both).
Apply the baseline checks in references/checklist.md.
Output prioritized recommendations with severity and a brief RN/Expo mapping note.

Core Rules

Layout and Safe Areas

Keep the root scrollable when content may exceed the viewport.
Let the system handle safe area insets instead of hard-coding top/bottom padding.
Keep content aligned to a clear grid with consistent spacing rhythm.

Touch Targets and Controls

Ensure all tap targets are at least 44x44pt.
Prefer native controls over custom replicas.
Make the primary action obvious and reachable with one thumb.

Typography

Prefer system text styles and allow Dynamic Type scaling.
Keep line lengths short enough for scanability.
Use weight and size to express hierarchy, not color alone.

Color and Contrast

Prefer semantic system colors for text and backgrounds.
Maintain contrast for normal and large text.
Do not rely on color alone to encode status or state.

Iconography

Prefer SF Symbols for familiar system metaphors.
Pair icon-only buttons with clear labels or accessibility text.

RN/Expo Mapping

Safe areas and scrolling: ScrollView or FlatList with contentInsetAdjustmentBehavior="automatic".
System colors: PlatformColor or DynamicColorIOS.
Icons: expo-symbols for SF Symbols.
Haptics: expo-haptics for confirmation feedback.

Output Format

Provide a short list of issues and improvements.
Include severity tags: High, Medium, Low.
Add a brief RN/Expo implementation hint for each recommendation.

References

references/checklist.md
references/component-map.md

More from this repository

same repository

building-ui

0xabrar/skills

Expo Router UI implementation guide. Use for Expo-specific components, navigation setup, native tabs, and implementation patterns.

2026-01-170

git-commit-workflow

0xabrar/skills

Git commit workflow with conventional commits and staging hygiene. Use when asked to stage changes, write commit messages, or manage commits in multi-worktree setups.

2026-01-170

git-pr-workflow

0xabrar/skills

Git workflows for feature branches, merges, and PR creation with GitHub CLI. Use when asked to manage branches, sync with base, resolve conflicts, or create PRs.

2026-01-170

ios-accessibility-audit

0xabrar/skills

Audit iOS accessibility for screens and flows. Use to check Dynamic Type, VoiceOver, touch targets, contrast, focus order, and reduced motion (platform guidance, not implementation).

2026-01-170

ios-motion-feedback

0xabrar/skills

iOS motion and haptics guidance. Use when designing animations, transitions, or feedback states (platform guidance, not implementation).

2026-01-170

ios-navigation-architecture

0xabrar/skills

Choose and review iOS navigation patterns (tabs, stacks, modals, sheets, deep links). Use when designing app structure or refactoring navigation (platform guidance, not implementation).

2026-01-170

name	ios-hig-rn-basics
description	Core iOS HIG guidance and design rules. Use when giving iOS UI/UX advice on layout, typography, color, spacing, controls, and iconography (not Expo Router implementation).

iOS HIG + RN/Expo Basics

Overview

Provide practical iOS UX/UI guidance and map each recommendation to React Native or Expo implementation hints.

Quick Start

Ask for screen type, primary action, and target devices (iPhone, iPad, or both).
Apply the baseline checks in references/checklist.md.
Output prioritized recommendations with severity and a brief RN/Expo mapping note.

Core Rules

Layout and Safe Areas

Keep the root scrollable when content may exceed the viewport.
Let the system handle safe area insets instead of hard-coding top/bottom padding.
Keep content aligned to a clear grid with consistent spacing rhythm.

Touch Targets and Controls

Ensure all tap targets are at least 44x44pt.
Prefer native controls over custom replicas.
Make the primary action obvious and reachable with one thumb.

Typography

Prefer system text styles and allow Dynamic Type scaling.
Keep line lengths short enough for scanability.
Use weight and size to express hierarchy, not color alone.

Color and Contrast

Prefer semantic system colors for text and backgrounds.
Maintain contrast for normal and large text.
Do not rely on color alone to encode status or state.

Iconography

Prefer SF Symbols for familiar system metaphors.
Pair icon-only buttons with clear labels or accessibility text.

RN/Expo Mapping

Safe areas and scrolling: ScrollView or FlatList with contentInsetAdjustmentBehavior="automatic".
System colors: PlatformColor or DynamicColorIOS.
Icons: expo-symbols for SF Symbols.
Haptics: expo-haptics for confirmation feedback.

Output Format

Provide a short list of issues and improvements.
Include severity tags: High, Medium, Low.
Add a brief RN/Expo implementation hint for each recommendation.

References

references/checklist.md
references/component-map.md