jubakitiashvili/everything-react-native-expo/hig

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:

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.