ios-hig-rn-basics

Étoiles0

Forks0

Mis à jour17 janvier 2026 à 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

Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.

Source

0xabrar

0xabrar/skills

Ouvrir le dépôt GitHub Voir les dépôts du créateur

Téléchargement

Métiers associésSOC

Basé sur la classification professionnelle SOC

Concepteurs web et d'interfaces numériquesProfessions informatiques et mathématiques·SOC 15-1255

Explorateur de fichiers

3 fichiers

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

Plus depuis ce dépôt

même dépôt

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