ios-hig-rn-basics

Estrelas0

Forks0

Atualizado17 de janeiro de 2026 às 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).

Instalação

Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.

Fonte

0xabrar

0xabrar/skills

Abrir repositório GitHub Ver repositórios do creator

Download

Ocupações relacionadasSOC

Baseado na classificação ocupacional SOC

Designers de interfaces web e digitaisInformática e Matemática·SOC 15-1255

Explorador de arquivos

3 arquivos

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

Mais deste repositório

mesmo repositório

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