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

# 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/`:

1. **Always**: `design-system.md` (typography, colors, spacing, corners)
2. **If animation involved**: `animation.md` + `craft.md` (spring physics)
3. **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`.