菜单
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.
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/vercel/vercel-plugin --skill react-best-practices命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
基于 SOC 职业分类
正在显示 SKILL.md
| 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. |
| metadata | {"priority":4,"docs":["https://react.dev/reference/react","https://react.dev/learn"],"pathPatterns":["src/components/**/*.tsx","src/components/**/*.jsx","app/components/**/*.tsx","app/components/**/*.jsx","components/**/*.tsx","components/**/*.jsx","src/ui/**/*.tsx","lib/components/**/*.tsx"],"bashPatterns":[],"importPatterns":["react","react-dom"]} |
| validate | [{"pattern":"from\\s+['\"](styled-components|@emotion/styled|@emotion/react|@mui/material|@chakra-ui/react)['\"]|styled\\.","message":"Legacy CSS-in-JS or component library detected. Consider shadcn/ui + Tailwind for modern Vercel-native UI.","severity":"warn","upgradeToSkill":"shadcn","upgradeWhy":"Migrate from CSS-in-JS/MUI/Chakra to shadcn/ui + Tailwind CSS for better SSR performance and Vercel ecosystem alignment.","skipIfFileContains":"@/components/ui|shadcn|tailwindcss"}] |
| retrieval | {"aliases":["react review","component quality","tsx linter","react patterns"],"intents":["review react code","improve component quality","check accessibility","optimize react"],"entities":["hooks","accessibility","React","TSX","component"]} |
| chainTo | [{"pattern":"from\\s+['\\\"](styled-components|@emotion/styled|@emotion/react|@mui/material|@chakra-ui/react)['\"]|styled\\.","targetSkill":"shadcn","message":"Legacy CSS-in-JS or component library detected — loading shadcn/ui guidance for modern Vercel-native UI."}] |
Comprehensive 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.
Reference these guidelines when:
| Priority | Category | Impact | Prefix |
|---|---|---|---|
| 1 | Eliminating Waterfalls | CRITICAL | async- |
| 2 | Bundle Size Optimization | CRITICAL | bundle- |
| 3 | Server-Side Performance | HIGH | server- |
| 4 | Client-Side Data Fetching | MEDIUM-HIGH | client- |
| 5 | Re-render Optimization | MEDIUM | rerender- |
| 6 | Rendering Performance | MEDIUM | rendering- |
| 7 | JavaScript Performance | LOW-MEDIUM | js- |
| 8 | Advanced Patterns | LOW | advanced- |
async-defer-await - Move await into branches where actually usedasync-parallel - Use Promise.all() for independent operationsasync-dependencies - Use better-all for partial dependenciesasync-api-routes - Start promises early, await late in API routesasync-suspense-boundaries - Use Suspense to stream contentbundle-barrel-imports - Import directly, avoid barrel filesbundle-dynamic-imports - Use next/dynamic for heavy componentsbundle-defer-third-party - Load analytics/logging after hydrationbundle-conditional - Load modules only when feature is activatedbundle-preload - Preload on hover/focus for perceived speedserver-auth-actions - Authenticate server actions like API routesserver-cache-react - Use React.cache() for per-request deduplicationserver-cache-lru - Use LRU cache for cross-request cachingserver-dedup-props - Avoid duplicate serialization in RSC propsserver-hoist-static-io - Hoist static I/O (fonts, logos) to module levelserver-serialization - Minimize data passed to client componentsserver-parallel-fetching - Restructure components to parallelize fetchesserver-after-nonblocking - Use after() for non-blocking operationsclient-swr-dedup - Use SWR for automatic request deduplicationclient-event-listeners - Deduplicate global event listenersclient-passive-event-listeners - Use passive listeners for scrollclient-localstorage-schema - Version and minimize localStorage datarerender-defer-reads - Don't subscribe to state only used in callbacksrerender-memo - Extract expensive work into memoized componentsrerender-memo-with-default-value - Hoist default non-primitive propsrerender-dependencies - Use primitive dependencies in effectsrerender-derived-state - Subscribe to derived booleans, not raw valuesrerender-derived-state-no-effect - Derive state during render, not effectsrerender-functional-setstate - Use functional setState for stable callbacksrerender-lazy-state-init - Pass function to useState for expensive valuesrerender-simple-expression-in-memo - Avoid memo for simple primitivesrerender-split-combined-hooks - Split hooks with independent dependenciesrerender-move-effect-to-event - Put interaction logic in event handlersrerender-transitions - Use startTransition for non-urgent updatesrerender-use-deferred-value - Defer expensive renders to keep input responsivererender-use-ref-transient-values - Use refs for transient frequent valuesrerender-no-inline-components - Don't define components inside componentsrendering-animate-svg-wrapper - Animate div wrapper, not SVG elementrendering-content-visibility - Use content-visibility for long listsrendering-hoist-jsx - Extract static JSX outside componentsrendering-svg-precision - Reduce SVG coordinate precisionrendering-hydration-no-flicker - Use inline script for client-only datarendering-hydration-suppress-warning - Suppress expected mismatchesrendering-activity - Use Activity component for show/hiderendering-conditional-render - Use ternary, not && for conditionalsrendering-usetransition-loading - Prefer useTransition for loading staterendering-resource-hints - Use React DOM resource hints for preloadingrendering-script-defer-async - Use defer or async on script tagsjs-batch-dom-css - Group CSS changes via classes or cssTextjs-index-maps - Build Map for repeated lookupsjs-cache-property-access - Cache object properties in loopsjs-cache-function-results - Cache function results in module-level Mapjs-cache-storage - Cache localStorage/sessionStorage readsjs-combine-iterations - Combine multiple filter/map into one loopjs-length-check-first - Check array length before expensive comparisonjs-early-exit - Return early from functionsjs-hoist-regexp - Hoist RegExp creation outside loopsjs-min-max-loop - Use loop for min/max instead of sortjs-set-map-lookups - Use Set/Map for O(1) lookupsjs-tosorted-immutable - Use toSorted() for immutabilityjs-flatmap-filter - Use flatMap to map and filter in one passadvanced-event-handler-refs - Store event handlers in refsadvanced-init-once - Initialize app once per app loadadvanced-use-latest - useLatest for stable callback refsRead individual rule files for detailed explanations and code examples:
rules/async-parallel.md
rules/bundle-barrel-imports.md
Each rule file contains:
For the complete guide with all rules expanded: AGENTS.md