Update to Vercel

{
  "name": "react-best-practices",
  "description": "React best-practices reviewer for TSX files. Triggers after editing multiple TSX components to run a condensed quality checklist covering component structure, hooks usage, accessibility, performance, and TypeScript patterns.",
  "included_files": [
    {
      "relative_path": "AGENTS.md",
      "size_in_bytes": 94496
    },
    {
      "relative_path": "agents/openai.yaml",
      "size_in_bytes": 117
    },
    {
      "relative_path": "rules/_sections.md",
      "size_in_bytes": 1554
    },
    {
      "relative_path": "rules/_template.md",
      "size_in_bytes": 631
    },
    {
      "relative_path": "rules/advanced-event-handler-refs.md",
      "size_in_bytes": 1483
    },
    {
      "relative_path": "rules/advanced-init-once.md",
      "size_in_bytes": 958
    },
    {
      "relative_path": "rules/advanced-use-latest.md",
      "size_in_bytes": 1072
    },
    {
      "relative_path": "rules/async-api-routes.md",
      "size_in_bytes": 1125
    },
    {
      "relative_path": "rules/async-defer-await.md",
      "size_in_bytes": 2028
    },
    {
      "relative_path": "rules/async-dependencies.md",
      "size_in_bytes": 1293
    },
    {
      "relative_path": "rules/async-parallel.md",
      "size_in_bytes": 654
    },
    {
      "relative_path": "rules/async-suspense-boundaries.md",
      "size_in_bytes": 2510
    },
    {
      "relative_path": "rules/bundle-barrel-imports.md",
      "size_in_bytes": 2370
    },
    {
      "relative_path": "rules/bundle-conditional.md",
      "size_in_bytes": 949
    },
    {
      "relative_path": "rules/bundle-defer-third-party.md",
      "size_in_bytes": 920
    },
    {
      "relative_path": "rules/bundle-dynamic-imports.md",
      "size_in_bytes": 791
    },
    {
      "relative_path": "rules/bundle-preload.md",
      "size_in_bytes": 1149
    },
    {
      "relative_path": "rules/client-event-listeners.md",
      "size_in_bytes": 1969
    },
    {
      "relative_path": "rules/client-localstorage-schema.md",
      "size_in_bytes": 1950
    },
    {
      "relative_path": "rules/client-passive-event-listeners.md",
      "size_in_bytes": 1644
    },
    {
      "relative_path": "rules/client-swr-dedup.md",
      "size_in_bytes": 1159
    },
    {
      "relative_path": "rules/js-batch-dom-css.md",
      "size_in_bytes": 3266
    },
    {
      "relative_path": "rules/js-cache-function-results.md",
      "size_in_bytes": 1949
    },
    {
      "relative_path": "rules/js-cache-property-access.md",
      "size_in_bytes": 532
    },
    {
      "relative_path": "rules/js-cache-storage.md",
      "size_in_bytes": 1651
    },
    {
      "relative_path": "rules/js-combine-iterations.md",
      "size_in_bytes": 753
    },
    {
      "relative_path": "rules/js-early-exit.md",
      "size_in_bytes": 1133
    },
    {
      "relative_path": "rules/js-flatmap-filter.md",
      "size_in_bytes": 1411
    },
    {
      "relative_path": "rules/js-hoist-regexp.md",
      "size_in_bytes": 1028
    },
    {
      "relative_path": "rules/js-index-maps.md",
      "size_in_bytes": 837
    },
    {
      "relative_path": "rules/js-length-check-first.md",
      "size_in_bytes": 1747
    },
    {
      "relative_path": "rules/js-min-max-loop.md",
      "size_in_bytes": 2290
    },
    {
      "relative_path": "rules/js-set-map-lookups.md",
      "size_in_bytes": 532
    },
    {
      "relative_path": "rules/js-tosorted-immutable.md",
      "size_in_bytes": 1782
    },
    {
      "relative_path": "rules/rendering-activity.md",
      "size_in_bytes": 564
    },
    {
      "relative_path": "rules/rendering-animate-svg-wrapper.md",
      "size_in_bytes": 1185
    },
    {
      "relative_path": "rules/rendering-conditional-render.md",
      "size_in_bytes": 980
    },
    {
      "relative_path": "rules/rendering-content-visibility.md",
      "size_in_bytes": 815
    },
    {
      "relative_path": "rules/rendering-hoist-jsx.md",
      "size_in_bytes": 1039
    },
    {
      "relative_path": "rules/rendering-hydration-no-flicker.md",
      "size_in_bytes": 2308
    },
    {
      "relative_path": "rules/rendering-hydration-suppress-warning.md",
      "size_in_bytes": 872
    },
    {
      "relative_path": "rules/rendering-resource-hints.md",
      "size_in_bytes": 2549
    },
    {
      "relative_path": "rules/rendering-script-defer-async.md",
      "size_in_bytes": 1868
    },
    {
      "relative_path": "rules/rendering-svg-precision.md",
      "size_in_bytes": 588
    },
    {
      "relative_path": "rules/rendering-usetransition-loading.md",
      "size_in_bytes": 2074
    },
    {
      "relative_path": "rules/rerender-defer-reads.md",
      "size_in_bytes": 973
    },
    {
      "relative_path": "rules/rerender-dependencies.md",
      "size_in_bytes": 824
    },
    {
      "relative_path": "rules/rerender-derived-state-no-effect.md",
      "size_in_bytes": 1201
    },
    {
      "relative_path": "rules/rerender-derived-state.md",
      "size_in_bytes": 728
    },
    {
      "relative_path": "rules/rerender-functional-setstate.md",
      "size_in_bytes": 2968
    },
    {
      "relative_path": "rules/rerender-lazy-state-init.md",
      "size_in_bytes": 2016
    },
    {
      "relative_path": "rules/rerender-memo-with-default-value.md",
      "size_in_bytes": 1173
    },
    {
      "relative_path": "rules/rerender-memo.md",
      "size_in_bytes": 1148
    },
    {
      "relative_path": "rules/rerender-move-effect-to-event.md",
      "size_in_bytes": 1268
    },
    {
      "relative_path": "rules/rerender-no-inline-components.md",
      "size_in_bytes": 2135
    },
    {
      "relative_path": "rules/rerender-simple-expression-in-memo.md",
      "size_in_bytes": 1018
    },
    {
      "relative_path": "rules/rerender-split-combined-hooks.md",
      "size_in_bytes": 1844
    },
    {
      "relative_path": "rules/rerender-transitions.md",
      "size_in_bytes": 1055
    },
    {
      "relative_path": "rules/rerender-use-deferred-value.md",
      "size_in_bytes": 1846
    },
    {
      "relative_path": "rules/rerender-use-ref-transient-values.md",
      "size_in_bytes": 1742
    },
    {
      "relative_path": "rules/server-after-nonblocking.md",
      "size_in_bytes": 2012
    },
    {
      "relative_path": "rules/server-auth-actions.md",
      "size_in_bytes": 2649
    },
    {
      "relative_path": "rules/server-cache-lru.md",
      "size_in_bytes": 1353
    },
    {
      "relative_path": "rules/server-cache-react.md",
      "size_in_bytes": 2228
    },
    {
      "relative_path": "rules/server-dedup-props.md",
      "size_in_bytes": 2060
    },
    {
      "relative_path": "rules/server-hoist-static-io.md",
      "size_in_bytes": 4393
    },
    {
      "relative_path": "rules/server-parallel-fetching.md",
      "size_in_bytes": 1554
    },
    {
      "relative_path": "rules/server-serialization.md",
      "size_in_bytes": 996
    }
  ],
  "skill_md_contents": "---\nname: react-best-practices\ndescription: React best-practices reviewer for TSX files. Triggers after editing multiple TSX components to run a condensed quality checklist covering component structure, hooks usage, accessibility, performance, and TypeScript patterns.\nmetadata:\n  priority: 4\n  docs:\n    - \"https://react.dev/reference/react\"\n    - \"https://react.dev/learn\"\n  pathPatterns:\n    - 'src/components/**/*.tsx'\n    - 'src/components/**/*.jsx'\n    - 'app/components/**/*.tsx'\n    - 'app/components/**/*.jsx'\n    - 'components/**/*.tsx'\n    - 'components/**/*.jsx'\n    - 'src/ui/**/*.tsx'\n    - 'lib/components/**/*.tsx'\n  bashPatterns: []\n  importPatterns:\n    - 'react'\n    - 'react-dom'\n---\n\n# Vercel React Best Practices\n\nComprehensive performance optimization guide for React and Next.js applications, maintained by Vercel. Contains 64 rules across 8 categories, prioritized by impact to guide automated refactoring and code generation.\n\n## When to Apply\n\nReference these guidelines when:\n- Writing new React components or Next.js pages\n- Implementing data fetching (client or server-side)\n- Reviewing code for performance issues\n- Refactoring existing React/Next.js code\n- Optimizing bundle size or load times\n\n## Rule Categories by Priority\n\n| Priority | Category | Impact | Prefix |\n|----------|----------|--------|--------|\n| 1 | Eliminating Waterfalls | CRITICAL | `async-` |\n| 2 | Bundle Size Optimization | CRITICAL | `bundle-` |\n| 3 | Server-Side Performance | HIGH | `server-` |\n| 4 | Client-Side Data Fetching | MEDIUM-HIGH | `client-` |\n| 5 | Re-render Optimization | MEDIUM | `rerender-` |\n| 6 | Rendering Performance | MEDIUM | `rendering-` |\n| 7 | JavaScript Performance | LOW-MEDIUM | `js-` |\n| 8 | Advanced Patterns | LOW | `advanced-` |\n\n## Quick Reference\n\n### 1. Eliminating Waterfalls (CRITICAL)\n\n- `async-defer-await` - Move await into branches where actually used\n- `async-parallel` - Use Promise.all() for independent operations\n- `async-dependencies` - Use better-all for partial dependencies\n- `async-api-routes` - Start promises early, await late in API routes\n- `async-suspense-boundaries` - Use Suspense to stream content\n\n### 2. Bundle Size Optimization (CRITICAL)\n\n- `bundle-barrel-imports` - Import directly, avoid barrel files\n- `bundle-dynamic-imports` - Use next/dynamic for heavy components\n- `bundle-defer-third-party` - Load analytics/logging after hydration\n- `bundle-conditional` - Load modules only when feature is activated\n- `bundle-preload` - Preload on hover/focus for perceived speed\n\n### 3. Server-Side Performance (HIGH)\n\n- `server-auth-actions` - Authenticate server actions like API routes\n- `server-cache-react` - Use React.cache() for per-request deduplication\n- `server-cache-lru` - Use LRU cache for cross-request caching\n- `server-dedup-props` - Avoid duplicate serialization in RSC props\n- `server-hoist-static-io` - Hoist static I/O (fonts, logos) to module level\n- `server-serialization` - Minimize data passed to client components\n- `server-parallel-fetching` - Restructure components to parallelize fetches\n- `server-after-nonblocking` - Use after() for non-blocking operations\n\n### 4. Client-Side Data Fetching (MEDIUM-HIGH)\n\n- `client-swr-dedup` - Use SWR for automatic request deduplication\n- `client-event-listeners` - Deduplicate global event listeners\n- `client-passive-event-listeners` - Use passive listeners for scroll\n- `client-localstorage-schema` - Version and minimize localStorage data\n\n### 5. Re-render Optimization (MEDIUM)\n\n- `rerender-defer-reads` - Don't subscribe to state only used in callbacks\n- `rerender-memo` - Extract expensive work into memoized components\n- `rerender-memo-with-default-value` - Hoist default non-primitive props\n- `rerender-dependencies` - Use primitive dependencies in effects\n- `rerender-derived-state` - Subscribe to derived booleans, not raw values\n- `rerender-derived-state-no-effect` - Derive state during render, not effects\n- `rerender-functional-setstate` - Use functional setState for stable callbacks\n- `rerender-lazy-state-init` - Pass function to useState for expensive values\n- `rerender-simple-expression-in-memo` - Avoid memo for simple primitives\n- `rerender-split-combined-hooks` - Split hooks with independent dependencies\n- `rerender-move-effect-to-event` - Put interaction logic in event handlers\n- `rerender-transitions` - Use startTransition for non-urgent updates\n- `rerender-use-deferred-value` - Defer expensive renders to keep input responsive\n- `rerender-use-ref-transient-values` - Use refs for transient frequent values\n- `rerender-no-inline-components` - Don't define components inside components\n\n### 6. Rendering Performance (MEDIUM)\n\n- `rendering-animate-svg-wrapper` - Animate div wrapper, not SVG element\n- `rendering-content-visibility` - Use content-visibility for long lists\n- `rendering-hoist-jsx` - Extract static JSX outside components\n- `rendering-svg-precision` - Reduce SVG coordinate precision\n- `rendering-hydration-no-flicker` - Use inline script for client-only data\n- `rendering-hydration-suppress-warning` - Suppress expected mismatches\n- `rendering-activity` - Use Activity component for show/hide\n- `rendering-conditional-render` - Use ternary, not && for conditionals\n- `rendering-usetransition-loading` - Prefer useTransition for loading state\n- `rendering-resource-hints` - Use React DOM resource hints for preloading\n- `rendering-script-defer-async` - Use defer or async on script tags\n\n### 7. JavaScript Performance (LOW-MEDIUM)\n\n- `js-batch-dom-css` - Group CSS changes via classes or cssText\n- `js-index-maps` - Build Map for repeated lookups\n- `js-cache-property-access` - Cache object properties in loops\n- `js-cache-function-results` - Cache function results in module-level Map\n- `js-cache-storage` - Cache localStorage/sessionStorage reads\n- `js-combine-iterations` - Combine multiple filter/map into one loop\n- `js-length-check-first` - Check array length before expensive comparison\n- `js-early-exit` - Return early from functions\n- `js-hoist-regexp` - Hoist RegExp creation outside loops\n- `js-min-max-loop` - Use loop for min/max instead of sort\n- `js-set-map-lookups` - Use Set/Map for O(1) lookups\n- `js-tosorted-immutable` - Use toSorted() for immutability\n- `js-flatmap-filter` - Use flatMap to map and filter in one pass\n\n### 8. Advanced Patterns (LOW)\n\n- `advanced-event-handler-refs` - Store event handlers in refs\n- `advanced-init-once` - Initialize app once per app load\n- `advanced-use-latest` - useLatest for stable callback refs\n\n## How to Use\n\nRead individual rule files for detailed explanations and code examples:\n\n```\nrules/async-parallel.md\nrules/bundle-barrel-imports.md\n```\n\nEach rule file contains:\n- Brief explanation of why it matters\n- Incorrect code example with explanation\n- Correct code example with explanation\n- Additional context and references\n\n## Full Compiled Document\n\nFor the complete guide with all rules expanded: `AGENTS.md`\n"
}