ios-hig-rn-basics

星标0

分支0

更新时间2026年1月17日 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).

安装

用 Codex 或 Claude 帮你安装复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。

来源

0xabrar

0xabrar/skills

打开 GitHub 仓库查看创作者相关仓库

下载

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

同仓库更多 Skills

同仓库

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