技能 react-best-practices
📦

react-best-practices

内容修订 r1 安全 ⚡ 包含脚本⚙️ 外部命令🌐 网络访问

优化 React 和 Next.js 代码

React 和 Next.js 应用常常受困于数据获取缓慢、包体积过大以及可避免的重新渲染。此技能为智能体提供面向性能的代码生成和代码审查的具体规则与示例。

支持: Claude Codex Code(CC)
🥉 79 青铜

使用我的智能体安装

将此请求复制给你的智能体，其中包含权威 Skill 页面和清单。

智能体请求
Review the Skillstore skill "react-best-practices" from https://skillstore.io/skills/sickn33-react-best-practices.md and its manifest at https://skillstore.io/api/skills/sickn33-react-best-practices/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.

你的智能体仍应展示其计划，并按安全策略请求必要确认。

Agent 可读资源

当 AI Agent、爬虫或脚本需要干净上下文，而不是读取完整页面时，请使用这些链接。

Markdown 详情 GET /skills/sickn33-react-best-practices.md 已签名 manifest GET /api/skills/sickn33-react-best-practices/manifest 已签名 lockfile GET /api/skills/sickn33-react-best-practices/lockfile

测试它

正在使用“react-best-practices”。 审查一个依次等待 user、config 和 metrics 的仪表板页面。

预期结果:

  • 审查会识别出异步瀑布流，因为独立请求是按顺序运行的。
  • 它建议尽早启动独立 promise，并在需要值时一起等待它们。
  • 它指出在哪里使用 Suspense 边界，可以在 metrics 完成加载前先显示周围布局。

正在使用“react-best-practices”。 询问一个导入图标库 barrel 和重型编辑器的组件的包体积指导。

预期结果:

  • 响应会标记宽泛导入和重型初始组件依赖。
  • 它建议对图标使用直接包导入或 Next.js 优化包导入。
  • 它建议对编辑器进行动态加载，并在 hover 或 focus 时预加载。

正在使用“react-best-practices”。 询问如何减少带有变化回调和派生状态的表单中的重新渲染。

预期结果:

  • 响应建议对依赖当前状态的回调使用函数式状态更新。
  • 它建议在可能时订阅派生布尔状态，而不是连续变化的值。
  • 它将 effect 依赖缩小到 effect 实际使用的原始值。

安全审计

安全
v4 • 2026/7/7 打开版本化报告

All static findings were reviewed against the referenced Markdown context and adjudicated as false positives. The flagged dynamic imports, fetches, URLs, keyboard key variables, and backticks are documentation examples or references, and no prompt-injection text or malicious intent was found.

51
已扫描文件
4,906
分析行数
0
复核项
0
已忽略误报

风险因素

⚡ 包含脚本 (12)
AGENTS.md:426 AGENTS.md:468 AGENTS.md:506 AGENTS.md:527 AGENTS.md:549 AGENTS.md:2148 rules/bundle-conditional.md:20 rules/bundle-defer-third-party.md:35 rules/bundle-dynamic-imports.md:28 rules/bundle-preload.md:18 rules/bundle-preload.md:40 rules/js-tosorted-immutable.md:57
⚙️ 外部命令 (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:25 SKILL.md:26 SKILL.md:27 SKILL.md:28 SKILL.md:29 SKILL.md:30 SKILL.md:31 SKILL.md:32 SKILL.md:38 SKILL.md:39 SKILL.md:40 SKILL.md:41 SKILL.md:42 SKILL.md:46 SKILL.md:47 SKILL.md:48 SKILL.md:49 SKILL.md:50 SKILL.md:54 SKILL.md:55 SKILL.md:56 SKILL.md:57 SKILL.md:58 SKILL.md:62 SKILL.md:63 SKILL.md:67 SKILL.md:68 SKILL.md:69 SKILL.md:70 SKILL.md:71 SKILL.md:72 SKILL.md:73 SKILL.md:77 SKILL.md:78 SKILL.md:79 SKILL.md:80 SKILL.md:81 SKILL.md:82 SKILL.md:83 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:97 SKILL.md:98 SKILL.md:102 SKILL.md:103 SKILL.md:109-113 SKILL.md:113-123
🌐 网络访问 (15)
AGENTS.md:901 AGENTS.md:610 AGENTS.md:817 metadata.json:7 metadata.json:8 metadata.json:9 metadata.json:10 metadata.json:11 metadata.json:12 metadata.json:13 README.md:84 README.md:123 rules/_sections.md:26 rules/client-swr-dedup.md:18 rules/server-serialization.md:10
最新一次完成的静态与语义审计未检测到已确认的安全发现。这并不能证明该 Skill 没有副作用。
审计者: codex 查看审计历史 →
分享与引用此报告

分享版本化评估报告、中性徽章、嵌入卡片和引用。Skillstore 只报告证据，不判断该 Skill 是否安全。

打开版本化报告
安全评估

复制报告链接

https://skillstore.io/skills/sickn33-react-best-practices/audits/4?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdown 徽章

[![Skillstore security assessment](https://skillstore.io/badges/skills/sickn33-react-best-practices/security.svg)](https://skillstore.io/skills/sickn33-react-best-practices?utm_source=security_passport_badge)

HTML 徽章

<a href="https://skillstore.io/skills/sickn33-react-best-practices?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/sickn33-react-best-practices/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

嵌入卡片

<iframe src="https://skillstore.io/embed/skills/sickn33-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). react-best-practices security audit report (audit version 4) [Author version unspecified]. Skillstore. https://skillstore.io/skills/sickn33-react-best-practices/audits/4

BibTeX 引用

@techreport{sickn33-sickn33-react-best-practices-2026, author = {sickn33}, title = {react-best-practices security audit report (audit version 4)}, institution = {Skillstore}, year = {2026}, number = {4}, url = {https://skillstore.io/skills/sickn33-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: "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-react-best-practices/audits/4" identifiers: - type: other value: "skillstore:sickn33-react-best-practices:audit:4" description: "Skillstore immutable audit report identifier"

比较变体

4 个可安装变体

每位作者的技能都保持为独立的可安装项。推荐变体按 Skillstore 证据排序。

为什么此变体排名第一

Skillstore 评分最高
sickn33 推荐 当前

sickn33-react-best-practices

Skillstore 评分 79
证据置信度 高
Skillstore 使用量 17
已更新

2026-09-09

0xBigBoss

0xbigboss-react-best-practices

Skillstore 评分 78
证据置信度 高
Skillstore 使用量 70
已更新

2026-10-11

vercel-labs

vercel-labs-react-best-practices

Skillstore 评分 77
证据置信度 高
Skillstore 使用量 13
已更新

2026-09-09

shreyam1008

shreyam1008-react-best-practices

Skillstore 评分 75
证据置信度 中
Skillstore 使用量 3
已更新

2026-10-04

Skillstore 评分

评分依据 证据置信度: 高
55
架构
85
可维护性
87
内容
69
社区
91
规范符合性

你能构建什么

审查 Pull Request

在合并 React 改动之前，使用这些规则识别瀑布流、宽泛导入、过度序列化和渲染抖动。

重构缓慢页面

应用影响最高的异步、包体积和服务器渲染指导，以改进缓慢的 Next.js 路由。

生成高性能组件

让智能体从一开始就创建使用稳定状态更新、精确 effect 和适当延迟加载的 React 组件。

试试这些提示

检查组件 
使用 React 最佳实践技能审查这个 React 组件。重点关注可避免的重新渲染、effect 依赖、状态更新和高开销工作。
查找数据瀑布流 
分析这个 Next.js 页面中的数据获取瀑布流。建议哪些 await 可以并行运行，以及在哪里使用 Suspense 边界可以改善初始渲染。
降低包体积成本 
审查这些导入和客户端组件是否存在包体积问题。推荐直接导入、动态导入、延迟加载第三方代码以及预加载点。
确定性能重构优先级 
使用此技能规则审计这个 React 或 Next.js 功能。按预期影响对发现的问题排序，解释权衡，并提出聚焦的代码改动和测试。

最佳实践

  • 优先应用关键规则，特别是异步并行化和包体积减少。
  • 将示例用作审查指导，然后根据项目框架和版本调整改动。
  • 尽可能通过性能分析、测试或包分析来验证性能敏感型改动。

避免

  • 不要在处理明显的数据瀑布流或包体积膨胀之前应用每一个微优化。
  • 不要在未检查依赖正确性和失效需求的情况下添加 memoization 或 caching。
  • 当项目约束、版本或用户数据处理方式不同时，不要盲目复制示例。

常见问题

此技能会自行运行代码或修改文件吗？
不会。它提供可由 AI 智能体或开发者在代码生成和审查期间应用的指导。
它面向哪些框架？
它面向 React 和 Next.js，其中多条规则专门针对 React Server Components 和 Next.js 路由模式。
它能替代性能分析吗？
不能。它有助于识别可能的问题，但真实应用仍然需要性能分析和测量。
它涵盖安全最佳实践吗？
只能间接覆盖。内容以性能为重点，应与单独的安全审查配合使用。
Claude、Codex 和 Claude Code 可以使用它吗？
可以。报告标明支持 Claude、Codex 和 Claude Code 工作流。
团队应如何采用这些规则？
先从关键的数据获取和包体积规则开始，然后在性能分析显示存在问题的地方应用渲染和 JavaScript 规则。

开发者详情

作者

sickn33

许可证

MIT

Skillstore 修订

r1

版本提示

作者未声明版本。

仓库

https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/react-best-practices

引用

9f814fc6a43fd99946f2da5e0df231c65a38bc76

维护新鲜度

2026/7/18

使用量

10 次下载 · 150 次浏览

文件结构

📁 rules/

📄 _sections.md

📄 _template.md

📄 advanced-event-handler-refs.md

📄 advanced-use-latest.md

📄 async-api-routes.md

📄 async-defer-await.md

📄 async-dependencies.md

📄 async-parallel.md

📄 async-suspense-boundaries.md

📄 bundle-barrel-imports.md

📄 bundle-conditional.md

📄 bundle-defer-third-party.md

📄 bundle-dynamic-imports.md

📄 bundle-preload.md

📄 client-event-listeners.md

📄 client-swr-dedup.md

📄 js-batch-dom-css.md

📄 js-cache-function-results.md

📄 js-cache-property-access.md

📄 js-cache-storage.md

📄 js-combine-iterations.md

📄 js-early-exit.md

📄 js-hoist-regexp.md

📄 js-index-maps.md

📄 js-length-check-first.md

📄 js-min-max-loop.md

📄 js-set-map-lookups.md

📄 js-tosorted-immutable.md

📄 rendering-activity.md

📄 rendering-animate-svg-wrapper.md

📄 rendering-conditional-render.md

📄 rendering-content-visibility.md

📄 rendering-hoist-jsx.md

📄 rendering-hydration-no-flicker.md

📄 rendering-svg-precision.md

📄 rerender-defer-reads.md

📄 rerender-dependencies.md

📄 rerender-derived-state.md

📄 rerender-functional-setstate.md

📄 rerender-lazy-state-init.md

📄 rerender-memo.md

📄 rerender-transitions.md

📄 server-after-nonblocking.md

📄 server-cache-lru.md

📄 server-cache-react.md

📄 server-parallel-fetching.md

📄 server-serialization.md

📄 AGENTS.md

📄 metadata.json

📄 README.md

📄 SKILL.md

sickn33 的更多技能

查看全部

相关技能

查看全部