Everything-react-native-expo hig

Apple HIG design intelligence — build, review, animate, and analyze with Apple Human Interface Guidelines for React Native/Expo

install

source · Clone the upstream repo

git clone https://github.com/JubaKitiashvili/everything-react-native-expo

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/JubaKitiashvili/everything-react-native-expo "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/hig" ~/.claude/skills/jubakitiashvili-everything-react-native-expo-hig && rm -rf "$T"

manifest: skills/hig/SKILL.md

source content

Apple HIG Design Intelligence

When to Use

Building UI components with Apple-quality design (spring physics, semantic colors, 8pt grid)
Reviewing existing code for HIG compliance
Implementing animations with proper physics (not linear/ease-in-out)
Analyzing reference videos to extract motion specs
Generating design tokens for a project

Intent Router

Detect intent from the user's message and route to the appropriate mode:

Intent Keywords	Mode	What Happens
`build` , `create` , `make` , `design` , `component`	Build	Apply HIG rules while creating UI
`review` , `check` , `scan` , `audit` , `compliance`	Review	Run HIG scanner on source files
`animate` , `motion` , `spring` , `gesture` , `transition`	Animate	Implement animations with HIG physics
`video` + file path	Analyze	Extract motion spec from reference video
`tokens` , `theme` , `design system`	Tokens	Generate HIG design tokens
No clear intent	Interactive	Ask what the user wants

Build Mode

When building UI, load and apply these rules from

design/hig/rules/

Always:
```
design-system.md
```
(typography, colors, spacing, corners)
If animation involved:
```
animation.md
```
+
```
craft.md
```
(spring physics)
If navigation/modals:
```
patterns.md
```
(sheets, tabs, transitions)

Non-negotiable requirements:

```
borderCurve: 'continuous'
```
on all rounded elements
Semantic color tokens, never hardcoded hex
4pt grid spacing, prefer 8pt
44pt minimum touch targets
```
useReducedMotion
```
with any animation
```
expo-haptics
```
on key interactions
Dark mode support via
```
useColorScheme
```
Spring physics via
```
withSpring
```
, never
```
withTiming
```
with linear easing

Spring presets (use from

design/hig/index.ts

```
smooth
```
: default for most transitions
```
snappy
```
: button presses, toggles
```
bouncy
```
: playful elements, celebrations
```
gentle
```
: background, ambient motion

Review Mode

Run the HIG scanner from

design/scanner/

/erne-hig review ./src/screens/
/erne-hig review ./src/components/Button.tsx

Output: violations grouped by severity (critical → low), HIG score (0-100), grade (A-F), and fix suggestions.

Integrate with

/erne-quality-gate

— scanner runs automatically alongside code-reviewer and performance-profiler.

Animate Mode

Load

craft.md

animation.md

rules. Key patterns:

Enter/Exit:
```
FadeIn.duration(300).springify()
```
— never abrupt appear/disappear
Gesture-driven: Pan +
```
withDecay
```
for momentum, snap points with
```
withSpring
```

Scroll-linked:

useAnimatedScrollHandler

interpolate

with

Extrapolation.CLAMP

Choreography: parent first, children staggered 50ms, simultaneous for related

Analyze Mode

Process reference video through

design/video/

/erne-hig video ./reference.mp4

Auto-detects project stack, generates Reanimated/Gesture Handler code matching the video's motion patterns.

Tokens Mode

Generate typed design tokens from

design/tokens/

/erne-hig tokens

Creates

theme/hig-tokens.ts

with colors, typography, spacing, shadows — ready for

useColorScheme

and

StyleSheet.create