技能 vercel-react-best-practices
📦
vercel-react-best-practices
內容修訂 r1 安全 ⚡ 包含腳本⚙️ 外部命令🌐 網路存取
最佳化 React 與 Next.js 效能
React 與 Next.js 應用程式常因瀑布式請求、大型 bundle，以及可避免的重新渲染而變慢。此 skill 提供代理程式一套聚焦規則，用於審查並改善對效能敏感的程式碼。
支援: Claude Codex Code(CC)
使用我的智慧代理安裝
將此請求複製給你的智慧代理，其中包含權威 Skill 頁面和清單。
智能體請求
Review the Skillstore skill "vercel-react-best-practices" from https://skillstore.io/skills/sickn33-vercel-react-best-practices.md and its manifest at https://skillstore.io/api/skills/sickn33-vercel-react-best-practices/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.你的智慧代理仍應顯示其計畫，並依安全政策請求必要確認。
Agent 可讀資源
當 AI Agent、爬蟲或腳本需要乾淨脈絡、而不是讀取完整頁面時，請使用這些連結。
測試它
正在使用「vercel-react-best-practices」。 某個頁面依序 fetch 使用者資料、設定與側邊欄項目。
預期結果:
- 更早開始獨立請求，讓設定與側邊欄工作不必等待使用者資料。
- 將相依工作移到真正需要的精確值之後，而不是阻塞整個頁面。
- 當只有一個區域需要緩慢資料時，使用 Suspense 邊界。
正在使用「vercel-react-best-practices」。 某個 client component 從 package root entries 匯入大型 editor 和多個 icons。
預期結果:
- 只在使用者開啟編輯工作流程時載入 editor。
- 使用 direct icon imports 或 package import optimization，以降低開發與 cold-start 成本。
- 在使用者可能採取動作時，於 hover 或 focus 時 preload editor。
正在使用「vercel-react-best-practices」。 某個 dashboard 會在使用者調整瀏覽器大小並輸入搜尋時重新渲染。
預期結果:
- 訂閱 media query boolean，而不是原始 width values。
- 對依賴目前狀態的 callbacks 使用 functional state updates。
- 將 effect dependencies 縮小到 effect 使用的 primitive values。
安全審計
安全v4 • 2026/7/7 開啟版本化報告
All 166 static alerts were adjudicated as false positives after reviewing the surrounding documentation. The flagged patterns are markdown examples, reference URLs, rule identifiers, browser event keys, or prose; no executable skill code, prompt injection, credential access, or exfiltration behavior was found.
51
已掃描檔案
4,901
分析行數
0
複核項目
0
已忽略的誤報
風險因素
⚡ 包含腳本 (12)
⚙️ 外部命令 (76)
AGENTS.md:1475-1481 AGENTS.md:1597-1599 AGENTS.md:1964-1968 AGENTS.md:1977-1983 README.md:88-89 README.md:89 README.md:96-97 README.md:97-98 README.md:98-99 README.md:99-100 README.md:100-101 README.md:101-105 README.md:105-106 README.md:106-107 README.md:107-108 README.md:108-115 README.md:115-118 rules/js-batch-dom-css.md:50-52 rules/js-hoist-regexp.md:16-20 rules/js-hoist-regexp.md:29-35 rules/rendering-hydration-no-flicker.md:72-78 SKILL.md:23 SKILL.md:24 SKILL.md:25 SKILL.md:26 SKILL.md:27 SKILL.md:28 SKILL.md:29 SKILL.md:30 SKILL.md:36 SKILL.md:37 SKILL.md:38 SKILL.md:39 SKILL.md:40 SKILL.md:44 SKILL.md:45 SKILL.md:46 SKILL.md:47 SKILL.md:48 SKILL.md:52 SKILL.md:53 SKILL.md:54 SKILL.md:55 SKILL.md:56 SKILL.md:60 SKILL.md:61 SKILL.md:65 SKILL.md:66 SKILL.md:67 SKILL.md:68 SKILL.md:69 SKILL.md:70 SKILL.md:71 SKILL.md:75 SKILL.md:76 SKILL.md:77 SKILL.md:78 SKILL.md:79 SKILL.md:80 SKILL.md:81 SKILL.md:85 SKILL.md:86 SKILL.md:87 SKILL.md:88 SKILL.md:89 SKILL.md:90 SKILL.md:91 SKILL.md:92 SKILL.md:93 SKILL.md:94 SKILL.md:95 SKILL.md:96 SKILL.md:100 SKILL.md:101 SKILL.md:107-111 SKILL.md:111-121
最近一次完成的靜態與語意稽核未偵測到已確認的安全發現。這並不能證明該 Skill 沒有副作用。
審計單位: codex 檢視審計紀錄 →
分享與引用此報告
分享版本化評估報告、中性徽章、嵌入卡片與引用。Skillstore 只報告證據，不判斷該 Skill 是否安全。
複製報告連結
https://skillstore.io/skills/sickn33-vercel-react-best-practices/audits/4?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdown 徽章
[](https://skillstore.io/skills/sickn33-vercel-react-best-practices?utm_source=security_passport_badge)HTML 徽章
<a href="https://skillstore.io/skills/sickn33-vercel-react-best-practices?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/sickn33-vercel-react-best-practices/security.svg" alt="Skillstore security assessment" loading="lazy"></a>嵌入卡片
<iframe src="https://skillstore.io/embed/skills/sickn33-vercel-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 引用
sickn33. (2026). vercel-react-best-practices security audit report (audit version 4) [Author version unspecified]. Skillstore. https://skillstore.io/skills/sickn33-vercel-react-best-practices/audits/4BibTeX 引用
@techreport{sickn33-sickn33-vercel-react-best-practices-2026,
author = {sickn33},
title = {vercel-react-best-practices security audit report (audit version 4)},
institution = {Skillstore},
year = {2026},
number = {4},
url = {https://skillstore.io/skills/sickn33-vercel-react-best-practices/audits/4},
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: "vercel-react-best-practices security audit report (audit version 4)"
version: "unspecified"
type: report
authors:
- name: "sickn33"
date-released: "2026-07-07"
url: "https://skillstore.io/skills/sickn33-vercel-react-best-practices/audits/4"
identifiers:
- type: other
value: "skillstore:sickn33-vercel-react-best-practices:audit:4"
description: "Skillstore immutable audit report identifier"
比較變體
4 個可安裝變體每位作者的技能都保留為獨立的可安裝項目。推薦變體依 Skillstore 證據排序。
為何此變體排名第一
Skillstore 評分最高
作者 / 來源 Skillstore 評分 證據置信度 Skillstore 使用量 已更新
vercel-labs 推薦
vercel-labs-vercel-react-best-practices
Skillstore 評分 80
證據置信度 高
Skillstore 使用量 38
已更新
2026-09-09
am-will-vercel-react-best-practices
Skillstore 評分 79
證據置信度 高
Skillstore 使用量 33
已更新
2026-10-23
sickn33 目前
sickn33-vercel-react-best-practices
Skillstore 評分 78
證據置信度 高
Skillstore 使用量 16
已更新
2026-09-09
zhanlincui-vercel-react-best-practices
Skillstore 評分 72
證據置信度 高
Skillstore 使用量 109
已更新
2026-09-09
Skillstore 評分
評分依據 證據置信度: 高 55
架構
85
可維護性
87
內容
70
社群
83
規範符合度
你可以打造什麼
審查 Pull Request
在 React 或 Next.js 變更發布前，找出瀑布式請求、過大的 imports，以及重新渲染風險。
重構緩慢頁面
套用 Suspense、平行 fetching、caching 和 bundle splitting，以改善緩慢的使用者工作流程。
規劃效能工作
將廣泛的效能目標轉化為跨資料 fetching、bundles、渲染和 client state 的優先任務。
試試這些提示
檢查元件
Review this React component using the Vercel React best practices skill. List the highest impact performance issues first.
改善 Next.js Route
Analyze this Next.js route or Server Component for waterfalls, serialization size, caching, and non-blocking background work.
降低 Bundle Size
Audit these imports and client components for bundle size. Recommend direct imports, dynamic imports, and intent-based preloading where useful.
建立重構計畫
Use the React best practices rules to create a prioritized refactor plan. Include expected impact, affected files, and validation steps.
最佳實務
- 優先移除瀑布式請求並降低 bundle size，再處理較小的 JavaScript 微最佳化。
- 將每條規則對應到專案 runtime、framework version 和使用者可見的工作流程。
- 重構後，透過 profiling、build output 或聚焦的 regression tests 驗證變更。
避免
- 未確認 code path 是否對效能關鍵，就機械式套用每條規則。
- 在沒有明確 invalidation rules 或可衡量效益的情況下加入 memoization 或 caching。
- 只最佳化範例，卻忽略無障礙、安全性或正確性需求。
常見問題
此 skill 會自動變更我的程式碼嗎？
不會。它會引導在你環境中審查或編輯程式碼的代理程式。
它只適用於 Vercel deployments 嗎？
不是。多數 React 和 Next.js patterns 都廣泛適用，但託管細節可能會改變 caching 選擇。
它能取代 performance profiling 嗎？
不能。它有助於找出可能的問題，但重要變更仍應透過 profiling 確認。
它涵蓋 React Server Components 嗎？
有。它包含 server data fetching、serialization、Suspense 和 caching 的指引。
它包含安全性指引嗎？
只間接涵蓋。資料處理、scripts 和 dependency risks 請使用獨立的安全性審查。
哪些工具可以使用此 skill？
報告標示其相容於 Claude、Codex 和 Claude Code。
開發者詳細資訊
作者
sickn33授權
MIT
Skillstore 修訂
r1
版本提示
作者未聲明版本。
引用
f93e9bb0daca99badb6a7e574b97737155d57cb3
維護新鮮度
2026/7/18
使用量
8 次下載 · 186 次瀏覽