vercel-react-native-skills

Other Community

Repo stars 27,523
License MIT
Author repo agent-skills

Interpretation is structured for decision-making; original keeps the upstream SKILL.md unchanged.

Decide Fit First

Core job: Comprehensive best practices for React Native and Expo applications. Contains rules across multiple categories covering performa…
Best fit: Use it when the task has reusable inputs, steps, and validation criteria rather than a one-off answer.
Avoid forcing it: If the source lacks commands, platform support, or external-service evidence, keep those fields unknown instead of guessing.

Design Intent

Structure: The skill is organized around “When to Apply”, “Rule Categories by Priority”, “Quick Reference”, “1. List Performance (CRITICAL)”, showing how the author expects the agent to judge fit, collect context, and produce verifiable output.
Trigger evidence: Prioritize the author’s wording around when to use it, what context to collect, and what output shape to produce.
Evidence boundary: Author text states facts, repository files prove commands and paths, and Fluxly only adds fit, limits, and usage judgment.

How To Use It

Inputs: Provide target material, scope, expected result, forbidden changes, and validation method.
Invocation: Name vercel-react-native-skills directly; if the source includes slash commands, start with the command and then add task context.
Validation: Start small and check whether the result follows “When to Apply / Rule Categories by Priority / Quick Reference” before expanding.

Boundaries And Review

Dependencies: It usually needs no extra API key, so start with a small validation task.
Permissions: Declared permissions include read / write; ask the agent to state file, command, and rollback boundaries before acting.
Quality bar: A useful result names the deliverable, evidence, and next action. Generic prose means the task needs tighter context.

React Native Skills

Comprehensive best practices for React Native and Expo applications. Contains rules across multiple categories covering performance, animations, UI patterns, and platform-specific optimizations.

When to Apply

Reference these guidelines when:

Building React Native or Expo apps
Optimizing list and scroll performance
Implementing animations with Reanimated
Working with images and media
Configuring native modules or fonts
Structuring monorepo projects with native dependencies

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

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:

rules/list-performance-virtualize.md
rules/animation-gpu-properties.md

Each rule file contains:

Brief explanation of why it matters
Incorrect code example with explanation
Correct code example with explanation
Additional context and references

Full Compiled Document

For the complete guide with all rules expanded: AGENTS.md

Fluxly profile Author and license come from source; runtime, permissions, and network are Fluxly detections or estimates

Fluxly category: Other
Author-declared agents: No explicit declaration found; this is not inferred or tested compatibility
Static check: 94 / 100 · heuristic scan, not runtime safety proof
Author / version / license: @vercel-labs · MIT
Fluxly token estimate: Lean
Fluxly setup estimate: Plug-and-play
External API key: No requirement detected
Detected OS requirements: Unspecified
Runtime requirements: Unspecified
Detected file/system behavior: Read-only
Write / modify
Detected network behavior: Local-only
Install commands: None (reference only)

Profile is derived at build time from SKILL.md and install vectors. Subject to drift from author intent.

Heads up: 未限定 allowed-tools，默认拥有全部工具权限。

Output preview vercel-react-native-skills.preview

The current SKILL.md does not define a fixed output example.

SKILL.md SKILL.md

# React Native Skills

Comprehensive best practices for React Native and Expo applications. Contains
rules across multiple categories covering performance, animations, UI patterns,
and platform-specific optimizations.

## When to Apply

Reference these guidelines when:

- Building React Native or Expo apps
- Optimizing list and scroll performance
- Implementing animations with Reanimated
- Working with images and media
- Configuring native modules or fonts
- Structuring monorepo projects with native dependencies

## 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

…

Evidence boundary and execution chain

Author text anchors workflow facts; Fluxly only indexes current sections, terms, files, and commands.

sections -> When to Apply → Rule Categories by Priority → Quick Reference → 1. List Performance (CRITICAL) → 2. Animation (HIGH) → 3. Navigation (HIGH)
terms    -> Comprehensive best practices for React Native and Expo applications.
files/cmd -> list-performance- · animation- · navigation- · ui- · react-state- · rendering- · monorepo- · fonts-
body sha256 -> 595bfabe0146