trove-react-native

Files (39)

• SKILL.md
• _sections.md · references/
• _template.md · references/
• animation-derived-value.md · references/
• animation-gesture-detector-press.md · references/
• animation-gpu-properties.md · references/
• design-system-compound-components.md · references/
• fonts-config-plugin.md · references/
• imports-design-system-folder.md · references/
• js-hoist-intl.md · references/
• list-performance-callbacks.md · references/
• list-performance-function-references.md · references/
• list-performance-images.md · references/
• list-performance-inline-objects.md · references/
• list-performance-item-expensive.md · references/
• list-performance-item-memo.md · references/
• list-performance-item-types.md · references/
• list-performance-virtualize.md · references/
• monorepo-native-deps-in-app.md · references/
• monorepo-single-dependency-versions.md · references/
• navigation-native-navigators.md · references/
• react-compiler-destructure-functions.md · references/
• react-compiler-reanimated-shared-values.md · references/
• react-state-dispatcher.md · references/
• react-state-fallback.md · references/
• react-state-minimize.md · references/
• rendering-no-falsy-and.md · references/
• rendering-text-in-text-component.md · references/
• scroll-position-no-state.md · references/
• state-ground-truth.md · references/
• ui-expo-image.md · references/
• ui-image-gallery.md · references/
• ui-measure-views.md · references/
• ui-menus.md · references/
• ui-native-modals.md · references/
• ui-pressable.md · references/
• ui-safe-area-scroll.md · references/
• ui-scrollview-content-inset.md · references/
• ui-styling.md · references/

SKILL.md (first lines)

<!-- AUTO-GENERATED from SKILL.md.tmpl — do not edit directly -->
<!-- Regenerate: bun run build:skills -->

## Session Init

This skill ships Trove conventions. Prefer existing project patterns over generic best practices when they conflict.

# React Native Skills

Best practices for React Native and Expo applications, organized by impact. Each rule has a detailed reference file under `references/` with incorrect/correct code examples.

## When to Apply

- Building React Native or Expo apps
- Optimizing list and scroll performance (FlashList, virtualization)
- Implementing animations with Reanimated and Gesture Handler
- Working with images and media (expo-image, Galeria)
- Configuring native modules, custom fonts, or platform integrations
- Structuring monorepo projects with native dependencies

> **Note:** This skill is user-invocable rather than glob-auto-attached, since React Native projects are less common than web React ones — invoke it explicitly for ad-hoc RN work or new projects.

## Rule Categories by Priority

| Priority | Category         | Impact   | Prefix               |
| -------- | ---------------- | -------- | -------------------- |
| 1        | List Performance | CRITICAL | `list-performance-`  |
| 2        | Animation        | HIGH     | `animation-`         |
| 3        | Navigation       | HIGH     | `navigation-`        |
| 4        | UI Patterns      | HIGH     | `ui-`                |
| 5        | State Management | MEDIUM   | `react-state-`       |
| 6        | Rendering        | MEDIUM   | `rendering-`         |
| 7        | Monorepo         | MEDIUM   | `monorepo-`          |
| 8        | Configuration    | LOW      | `fonts-`, `imports-` |

## Quick Reference

### 1. List Performance (CRITICAL)

- `list-performance-virtualize` — Use FlashList for large lists
- `list-performance-item-memo` — Memoize list item components
- `list-performance-callbacks` — Stabilize callback references
- `list-performance-inline-objects` — Avoid inline style objects
- `list-performance-function-references` — Extract functions outside render
- `list-performance-images` — Optimize images in lists
- `list-performance-item-expensive` — Move expensive work outside items
- `list-performance-item-types` — Use item types for heterogeneous lists

### 2. Animation (HIGH)

- `animation-gpu-properties` — Animate only transform and opacity
- `animation-derived-value` — Use `useDerivedValue` for computed animations
- `animation-gesture-detector-press` — Use `Gesture.Tap` instead of `Pressable`

### 3. Navigation (HIGH)

- `navigation-native-navigators` — Use native stack and native tabs over JS navigators

### 4. UI Patterns (HIGH)

- `ui-expo-image` — Use expo-image for all images
- `ui-image-gallery` — Use Galeria for image lightboxes
- `ui-pressable` — Use Pressable over TouchableOpacity
- `ui-safe-area-scroll` — Handle safe areas in ScrollViews
- `ui-scrollview-content-inset` — Use contentInset for headers
- `ui-menus` — Use native context menus
- `ui-native-modals` — Use native modals when possible
- `ui-measure-views` — Use onLayout, not measure()
- `ui-styling` — Use `StyleSheet.create` or Nativewind

### 5. State Management (MEDIUM)

- `react-state-minimize` — Minimize state subscriptions
- `react-state-dispatcher` — Use dispatcher pattern for callbacks
- `react-state-fallback` — Show fallback on first render
- `react-compiler-destructure-functions` — Destructure for React Compiler
- `react-compiler-reanimated-shared-values` — Handle shared values with compiler

### 6. Rendering (MEDIUM)

- `rendering-text-in-text-component` — Wrap text in `Text` components
- `rendering-no-falsy-and` — Avoid falsy `&&` for conditional rendering

### 7. Monorepo (MEDIUM)

- `monorepo-native-deps-in-app` — Keep native dependencies in app package
- `monorepo-single-dependency-versions` — Use single versions across packages

### 8. Configuration (LOW)

- `fonts-config-plugin` — Use config plugins for custom fonts
- `imports-design-system-folder` — Organize design system imports
- `js-hoist-intl` — Hoist `Intl` object creation

## How to Use

Read individual rule files for detailed explanations and code examples:

```
references/list-performance-virtualize.md
references/animation-gpu-properties.md
references/ui-expo-image.md
```

Each rule contains: brief explanation, incorrect example, correct example, references.

## Source

Upstream: [vercel-labs/agent-skills · react-native-skills](https://github.com/vercel-labs/agent-skills) (MIT). Adapted for the Trove marketplace.

From bravew/trove, MIT.

More from bravew/trove