技能 react-best-practices
📦
react-best-practices
內容修訂 r1 安全 ⚡ 包含腳本⚙️ 外部命令🌐 網路存取
最佳化 React 和 Next.js 效能
React 和 Next.js 團隊經常在資料擷取、渲染和 bundle 載入方面重複緩慢的模式。這項技能為 Claude、Codex 和 Claude Code 提供具體規則，以加快程式碼產生、審查和重構。
支援: Claude Codex Code(CC)
使用我的智慧代理安裝
將此請求複製給你的智慧代理，其中包含權威 Skill 頁面和清單。
智能體請求
Review the Skillstore skill "react-best-practices" from https://skillstore.io/skills/vercel-labs-react-best-practices.md and its manifest at https://skillstore.io/api/skills/vercel-labs-react-best-practices/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.你的智慧代理仍應顯示其計畫，並依安全政策請求必要確認。
Agent 可讀資源
當 AI Agent、爬蟲或腳本需要乾淨脈絡、而不是讀取完整頁面時，請使用這些連結。
測試它
正在使用「react-best-practices」。 伺服器渲染頁面依序擷取 user、billing 和 project data。
預期結果:
- 識別高影響的 waterfall。
- 建議在 await results 前先啟動獨立 requests。
- 建議只有在某個結果確實依賴另一個結果時，才保留 dependency order。
正在使用「react-best-practices」。 dashboard 在 root layout 中匯入 chart library 和 analytics component。
預期結果:
- 標記可避免的初始 bundle 成本。
- 建議對 heavy UI 使用 dynamic loading，並對非關鍵 analytics 使用 deferred loading。
- 加入關於變更後驗證 LCP 和 interaction timing 的注意事項。
正在使用「react-best-practices」。 component 在每次 render 時讀取 localStorage 並建立 index。
預期結果:
- 強調重複的同步工作。
- 建議在安全的情況下使用 lazy state initialization 和 in-memory caching。
- 指出 browser storage 可由外部變更時的 cache invalidation 問題。
安全審計
安全v7 • 2026/7/7 開啟版本化報告
All 98 static findings were adjudicated as false positives after reviewing the surrounding Markdown context. The hits are documentation examples, inline code formatting, or prose about React performance. No executable skill scripts, secret material, prompt injection, or unauthorized network behavior were found.
47
已掃描檔案
4,232
分析行數
0
複核項目
0
已忽略的誤報
風險因素
⚡ 包含腳本 (11)
references/react-performance-guidelines.md:375 references/react-performance-guidelines.md:415 references/react-performance-guidelines.md:451 references/react-performance-guidelines.md:470 references/react-performance-guidelines.md:492 references/rules/bundle-conditional.md:20 references/rules/bundle-defer-third-party.md:35 references/rules/bundle-dynamic-imports.md:28 references/rules/bundle-preload.md:18 references/rules/bundle-preload.md:40 references/rules/js-tosorted-immutable.md:57
⚙️ 外部命令 (27)
references/react-performance-guidelines.md:1224-1230 references/react-performance-guidelines.md:1340-1342 references/react-performance-guidelines.md:1688-1692 references/rules/js-batch-dom-css.md:50-52 references/rules/js-hoist-regexp.md:16-20 references/rules/js-hoist-regexp.md:29-35 references/rules/rendering-hydration-no-flicker.md:72-78 SKILL.md:42 SKILL.md:44 SKILL.md:49 SKILL.md:55 SKILL.md:66 SKILL.md:71 SKILL.md:73 SKILL.md:80 SKILL.md:87 SKILL.md:88 SKILL.md:91-95 SKILL.md:95-97 SKILL.md:97-99 SKILL.md:99-100 SKILL.md:100-101 SKILL.md:101-102 SKILL.md:102-103 SKILL.md:103-104 SKILL.md:104-105 SKILL.md:105-106
最近一次完成的靜態與語意稽核未偵測到已確認的安全發現。這並不能證明該 Skill 沒有副作用。
審計單位: codex 檢視審計紀錄 →
分享與引用此報告
分享版本化評估報告、中性徽章、嵌入卡片與引用。Skillstore 只報告證據，不判斷該 Skill 是否安全。
複製報告連結
https://skillstore.io/skills/vercel-labs-react-best-practices/audits/7?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdown 徽章
[](https://skillstore.io/skills/vercel-labs-react-best-practices?utm_source=security_passport_badge)HTML 徽章
<a href="https://skillstore.io/skills/vercel-labs-react-best-practices?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/vercel-labs-react-best-practices/security.svg" alt="Skillstore security assessment" loading="lazy"></a>嵌入卡片
<iframe src="https://skillstore.io/embed/skills/vercel-labs-react-best-practices.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>學術引用 (APA · BibTeX · CFF)
APA 引用
vercel-labs. (2026). react-best-practices security audit report (audit version 7) [Author version unspecified]. Skillstore. https://skillstore.io/skills/vercel-labs-react-best-practices/audits/7BibTeX 引用
@techreport{vercel-labs-vercel-labs-react-best-practices-2026,
author = {vercel-labs},
title = {react-best-practices security audit report (audit version 7)},
institution = {Skillstore},
year = {2026},
number = {7},
url = {https://skillstore.io/skills/vercel-labs-react-best-practices/audits/7},
note = {Author version unspecified}
}CITATION.cff
cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "react-best-practices security audit report (audit version 7)"
version: "unspecified"
type: report
authors:
- name: "vercel-labs"
date-released: "2026-07-07"
url: "https://skillstore.io/skills/vercel-labs-react-best-practices/audits/7"
identifiers:
- type: other
value: "skillstore:vercel-labs-react-best-practices:audit:7"
description: "Skillstore immutable audit report identifier"
比較變體
4 個可安裝變體每位作者的技能都保留為獨立的可安裝項目。推薦變體依 Skillstore 證據排序。
為何此變體排名第一
Skillstore 評分最高
作者 / 來源 Skillstore 評分 證據置信度 Skillstore 使用量 已更新
vercel-labs 目前
vercel-labs-react-best-practices
Skillstore 評分 77
證據置信度 高
Skillstore 使用量 16
已更新
2026-09-09
shreyam1008-react-best-practices
Skillstore 評分 75
證據置信度 中
Skillstore 使用量 6
已更新
2026-10-04
Skillstore 評分
評分依據 證據置信度: 高 50
架構
85
可維護性
87
內容
76
社群
83
規範符合度
你可以打造什麼
審查 Next.js Pull Request
在合併前找出資料擷取、bundle 大小和渲染方面的效能退化。
重構緩慢的 React 元件
套用 memoization、lazy initialization 和 derived state 模式，以減少不必要的工作。
產生更快的功能程式碼
在建立新頁面、server components、hooks 和 client components 時使用效能規則。
試試這些提示
檢查基本元件效能
審查這個 React component 是否有明顯的效能問題。著重於不必要的 renders、昂貴的初始化，以及可避免的 storage 或 DOM reads。
改善資料擷取流程
分析這段 Next.js data fetching code 是否存在 waterfalls。視情況建議使用 parallel fetching、early promise starts、Suspense 或 SWR 進行修改。
降低 Bundle 成本
審查這個頁面是否有 bundle size 問題。找出 heavy imports、barrel imports、third-party libraries，以及適合 dynamic loading 或 preloading 的候選項目。
規劃效能重構
為這些檔案建立按優先順序排列的 React 和 Next.js 效能重構計畫。依影響程度分組 findings、說明 tradeoffs，並列出 verification steps。
最佳實務
- 從高影響規則開始：waterfalls、bundle size 和 server-side data fetching。
- 透過 profiling、bundle analysis 或 user timing metrics 驗證效能變更。
- 在套用大範圍重構前，讓範例與專案架構保持一致。
避免
- 在修正 network waterfalls 或大型 bundles 之前先套用微型最佳化。
- 未檢查 server rendering requirements 就複製 dynamic import patterns。
- 在沒有明確 invalidation strategy 的情況下快取 browser storage 或 cookies。
常見問題
這項技能會自動修改程式碼嗎？
不會。它提供 AI coding agent 在撰寫、審查或重構程式碼時可使用的指引。
它只適用於 Next.js 專案嗎？
不是。許多 React 規則可廣泛適用，但有幾個伺服器和路由範例是 Next.js 專用的。
它可以取代效能 profiling 嗎？
不能。它有助於識別可能的問題，但重要變更仍應透過 profiling 和 measurement 確認。
它涵蓋無障礙嗎？
不直接涵蓋。此技能著重於 React 和 Next.js 效能模式。
為什麼稽核會提到 script 和 network risk factors？
文件包含帶有 imports、fetch calls 和 browser APIs 的 code examples。這些會被視為不可執行的範例進行審查。
哪些 agents 可以使用這項技能？
報告列出 Claude、Codex 和 Claude Code 為支援的工具。
開發者詳細資訊
作者
vercel-labs授權
MIT
Skillstore 修訂
r1
版本提示
作者未聲明版本。
儲存庫
https://github.com/vercel-labs/agent-skills/tree/react-best-practices/skills/react-best-practices/引用
36e07d5e13068e5be64447e8f20b427cf2cbd21a
維護新鮮度
2026/7/18
使用量
9 次下載 · 618 次瀏覽