#364
Issues/vercel-labs/agent-skills/#364

react-native-skills: SKILL.md priorities contradict _sections.md and omit three rules

OpenJacobTRNDopened 3d ago

At 1a2c79d, skills/react-native-skills/SKILL.md gives category priorities that disagree with rules/_sections.md and the compiled AGENTS.md. It also leaves three rules out.

Priorities. The "Rule Categories by Priority" table in SKILL.md ranks the categories as follows:

  • List Performance: 1, CRITICAL
  • Rendering: 6, MEDIUM

rules/_sections.md and AGENTS.md both put Core Rendering first and mark it CRITICAL:

  • AGENTS.md:78 gives the section impact.
  • AGENTS.md:85 and AGENTS.md:160 mark both rules "CRITICAL (prevents production crash)" and "CRITICAL (prevents runtime crash)".

rendering-no-falsy-and and rendering-text-in-text-component prevent crashes. An agent that loads only SKILL.md, as the "How to Use" section suggests, ranks them below list and animation tuning.

Missing rules. The Quick Reference in SKILL.md lists no entry for three rule files that ship in rules/ and appear in AGENTS.md:

  • design-system-compound-components
  • scroll-position-no-state
  • state-ground-truth

The categories that _sections.md defines for them (Scroll Performance, State Architecture, Design System) are also absent from the table.

Suggested change: regenerate the SKILL.md table and Quick Reference from rules/_sections.md. That gives the 14 sections with their declared impacts, plus the three missing rules.

Activity

1
JacobTRND3d ago

Proposed patch for this issue. It is the complete change and can be applied with git apply.

--- a/skills/react-native-skills/SKILL.md	2026-11-09 01:20:07
+++ b/skills/react-native-skills/SKILL.md	2026-11-09 01:21:12
@@ -30,21 +30,34 @@
 
 ## 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-` |
+Sections, order and impact follow `rules/_sections.md` and the compiled `AGENTS.md`.
 
+| Priority | Category                 | Impact   | Prefix               |
+| -------- | ------------------------ | -------- | -------------------- |
+| 1        | Core Rendering           | CRITICAL | `rendering-`         |
+| 2        | List Performance         | HIGH     | `list-performance-`  |
+| 3        | Animation                | HIGH     | `animation-`         |
+| 4        | Scroll Performance       | HIGH     | `scroll-`            |
+| 5        | Navigation               | HIGH     | `navigation-`        |
+| 6        | React State              | MEDIUM   | `react-state-`       |
+| 7        | State Architecture       | MEDIUM   | `state-`             |
+| 8        | React Compiler           | MEDIUM   | `react-compiler-`    |
+| 9        | User Interface           | MEDIUM   | `ui-`                |
+| 10       | Design System            | MEDIUM   | `design-system-`     |
+| 11       | Monorepo                 | LOW      | `monorepo-`          |
+| 12       | Third-Party Dependencies | LOW      | `imports-`           |
+| 13       | JavaScript               | LOW      | `js-`                |
+| 14       | Fonts                    | LOW      | `fonts-`             |
+
 ## Quick Reference
 
-### 1. List Performance (CRITICAL)
+### 1. Core Rendering (CRITICAL)
 
+- `rendering-text-in-text-component` - Wrap text in Text components
+- `rendering-no-falsy-and` - Avoid falsy && for conditional rendering
+
+### 2. List Performance (HIGH)
+
 - `list-performance-virtualize` - Use FlashList for large lists
 - `list-performance-item-memo` - Memoize list item components
 - `list-performance-callbacks` - Stabilize callback references
@@ -54,18 +67,37 @@
 - `list-performance-item-expensive` - Move expensive work outside items
 - `list-performance-item-types` - Use item types for heterogeneous lists
 
-### 2. Animation (HIGH)
+### 3. 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)
+### 4. Scroll Performance (HIGH)
 
+- `scroll-position-no-state` - Never track scroll position in useState
+
+### 5. Navigation (HIGH)
+
 - `navigation-native-navigators` - Use native stack and native tabs over JS navigators
 
-### 4. UI Patterns (HIGH)
+### 6. React State (MEDIUM)
 
+- `react-state-minimize` - Minimize state subscriptions
+- `react-state-dispatcher` - Use dispatcher pattern for callbacks
+- `react-state-fallback` - Show fallback on first render
+
+### 7. State Architecture (MEDIUM)
+
+- `state-ground-truth` - State must represent ground truth
+
+### 8. React Compiler (MEDIUM)
+
+- `react-compiler-destructure-functions` - Destructure for React Compiler
+- `react-compiler-reanimated-shared-values` - Handle shared values with compiler
+
+### 9. User Interface (MEDIUM)
+
 - `ui-expo-image` - Use expo-image for all images
 - `ui-image-gallery` - Use Galeria for image lightboxes
 - `ui-pressable` - Use Pressable over TouchableOpacity
@@ -76,30 +108,27 @@
 - `ui-measure-views` - Use onLayout, not measure()
 - `ui-styling` - Use StyleSheet.create or Nativewind
 
-### 5. State Management (MEDIUM)
+### 10. Design System (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
+- `design-system-compound-components` - Use compound components over polymorphic children
 
-### 6. Rendering (MEDIUM)
+### 11. Monorepo (LOW)
 
-- `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)
+### 12. Third-Party Dependencies (LOW)
 
-- `fonts-config-plugin` - Use config plugins for custom fonts
 - `imports-design-system-folder` - Organize design system imports
+
+### 13. JavaScript (LOW)
+
 - `js-hoist-intl` - Hoist Intl object creation
 
+### 14. Fonts (LOW)
+
+- `fonts-config-plugin` - Use config plugins for custom fonts
+
 ## How to Use
 
 Read individual rule files for detailed explanations and code examples: