ios-hig-rn-basics

Estrellas0

Forks0

Actualizado17 de enero de 2026 a las 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).

Instalación

Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.

Fuente

0xabrar

0xabrar/skills

Abrir repositorio de GitHub Ver repositorios del creador

Descarga

Ocupaciones relacionadasSOC

Basado en la clasificación ocupacional SOC

Diseñadores de interfaces web y digitalesOcupaciones informáticas y matemáticas·SOC 15-1255

Explorador de archivos

3 archivos

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

Más de este repositorio

mismo repositorio

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