AI 应用媒体生成前端AI AgentAI 技能【免费下载链接】infinite-canvas面向 AI 创作的开源无限画布工作台集成 AI 生图、参考图编辑、视频生成、Agent 智能助手、画布编排、对话创作、提示词库与素材管理等能力支持可视化创作流程与多 Agent 协同工作。兼容 OpenAI 接口生态支持 chatgpt2api、grok2api、flow2api、newapi 等渠道接入。项目地址https://gitcode.com/gh_mirrors/infinit/infinite-canvas点击查看免费下载本文围绕开源仓库.agents/skills/vercel-react-best-practices中的规则模板文件 rules/_template.md 展开系统讲解如何基于该模板编写一条结构规范、示例清晰、可被自动构建与校验的性能优化规则。读者将掌握模板的 frontmatter 字段语义、八类规则分区与文件名前缀体系、六档 impact 级别、Incorrect/Correct 示例的写作规范以及pnpm build/pnpm validate等构建管线的工作方式可直接在本仓库或其他 React/Next.js 项目中实践规则作者工作流。一、这套规则体系的定位为 Agent 而生的性能规范库vercel-react-best-practices是一套由 Vercel Engineering 维护、面向 AI Agent 与 LLM 的 React/Next.js 性能优化指南。从 SKILL.md 的描述看它在编写、审查或重构 React/Next.js 代码时应被使用共包含 70 条规则、8 个分类按影响程度impact排序以指导自动化重构与代码生成。其元数据metadata.json记录了版本 1.0.0、组织为 Vercel Engineering、日期 2026 年 1 月并声明每一条规则都包含详细解释、对比错误与正确实现的真实示例以及具体的影响指标用于指导自动化重构和代码生成。该技能在仓库中的文件布局如下rules/单条规则文件每条一个文件其中_sections.md保存分区元数据标题、影响、描述_template.md是创建新规则用的模板_开头的文件不参与构建metadata.json文档元数据版本、组织、摘要AGENTS.md构建生成的完整编译输出所有规则展开后的总文档共 3800 余行README.md使用说明与规则作者指南。其中_template.md是整个规则库的写作骨架——所有规则文件都从它复制而来。理解这个模板就等于理解了整个规则库的创作规范。二、模板整体结构四段式规则文件模板全文仅 28 行却定义了规则文件的标准形态可概括为frontmatter 元数据 四段正文--- title: Rule Title Here impact: MEDIUM impactDescription: Optional description of impact (e.g., 20-50% improvement) tags: tag1, tag2 --- ## Rule Title Here **Impact: MEDIUM (optional impact description)** Brief explanation of the rule and why it matters. This should be clear and concise, explaining the performance implications. **Incorrect (description of whats wrong):** typescript // Bad code example here const bad example()Correct (description of whats right):// Good code example here const good example()Reference: Link to documentation or resource其中 frontmatter 是 YAML 格式的元数据头正文则固定包含 Impact 声明、规则说明、错误示例、正确示例、参考链接五个组成部分。下面逐一拆解每个字段的写法与取值规范。 ## 三、frontmatter 字段详解 frontmatter 是机器可读的规则元数据构建脚本会依据它生成目录、排序和汇总。四个字段分别承担不同职责 ### 1. title 规则标题要求用动作 对象的祈使句式概括规则核心便于在目录中快速检索。仓库内真实规则标题示例 - [async-parallel.md](https://link.gitcode.com/i/2e20992c963495700463b38dc70bae84)Promise.all() for Independent Operations - [rerender-memo.md](https://link.gitcode.com/i/5c8bb1c66dcfb9912400564e430a2c1a)Extract to Memoized Components - [bundle-barrel-imports.md](https://link.gitcode.com/i/d0a6087acfc4d77bf6c10e2b7ef9617a)Avoid Barrel File Imports 标题应同时出现在 frontmatter 和正文 H2 中两者保持一致见模板第 2 行与第 8 行。 ### 2. impact 规则的影响等级取值限定在六个级别之一CRITICAL、HIGH、MEDIUM-HIGH、MEDIUM、LOW-MEDIUM、LOW。它决定规则在优先级排序中的位置是构建与检索的关键字段。级别语义在 [README.md](https://link.gitcode.com/i/3c3a1675c4c334bb09cc7564f846a939) 中定义如下 | 级别 | 语义 | |------|------| | CRITICAL | 最高优先级带来主要性能收益 | | HIGH | 显著的性能提升 | | MEDIUM-HIGH | 中高收益 | | MEDIUM | 中等性能改进 | | LOW-MEDIUM | 中低收益 | | LOW | 渐进式改进 | 值得注意的是同一分类内的规则 impact 也可以不同。例如同属 async- 分区的规则中[async-parallel.md](https://link.gitcode.com/i/2e20992c963495700463b38dc70bae84) 标记为 CRITICAL影响描述为 2-10 倍提升而 [async-cheap-condition-before-await.md](https://link.gitcode.com/i/cc425044fb568693808eac08b5d5b11a) 标记为 HIGH影响描述为当同步守卫已失败时避免不必要的异步工作。这说明 impact 描述的是**该条规则单独实施时**的收益量级而非所属分类的整体权重。 ### 3. impactDescription 对影响的可选量化说明建议给出可验证的收益描述如 20-50% improvement、2-10× improvement。仓库内真实取值包括 - [bundle-barrel-imports.md](https://link.gitcode.com/i/d0a6087acfc4d77bf6c10e2b7ef9617a)200-800ms import cost, slow builds - [async-parallel.md](https://link.gitcode.com/i/2e20992c963495700463b38dc70bae84)2-10× improvement - [rerender-memo.md](https://link.gitcode.com/i/5c8bb1c66dcfb9912400564e430a2c1a)enables early returns 它随 impact 一起展示在正文第一行帮助读者快速判断这条规则值不值得投入改造。 ### 4. tags 逗号分隔的标签列表用于跨分类检索与语义归类。示例[async-parallel.md](https://link.gitcode.com/i/2e20992c963495700463b38dc70bae84) 使用 async, parallelization, promises, waterfalls[rerender-memo.md](https://link.gitcode.com/i/5c8bb1c66dcfb9912400564e430a2c1a) 使用 rerender, memo, useMemo, optimization。标签应覆盖规则所属分类、核心 API 与关键概念词便于 Agent 按关键词命中。 ## 四、正文五要素从 Impact 到 Reference ### 1. Impact 声明行 正文第一行以 **加粗的 Impact 声明** 开头格式为 **Impact: 级别 (影响描述)**与 frontmatter 中的 impact / impactDescription 保持同步。它既是给人类读者的速览也是构建脚本进行排序的依据。 ### 2. 规则说明 模板要求清晰简洁地解释规则及其重要性说明性能影响。仓库内规则的说明普遍采用问题背景 反例危害 正例收益的三段式写法。例如 [async-cheap-condition-before-await.md](https://link.gitcode.com/i/cc425044fb568693808eac08b5d5b11a) 先定义适用场景分支中同时使用 await 获取 flag 和**廉价的同步条件**时应先评估同步条件再解释原因否则即使复合条件永远不可能成立你也要为异步调用付费最后补充边界如果同步条件本身昂贵、依赖 flag或必须按固定顺序执行副作用则保持原有顺序。 ### 3. Incorrect / Correct 双示例 模板的核心约束是**每条规则必须同时提供错误与正确两份代码示例**这是整库规则的统一写作范式。示例要求 - **Incorrect**给出看起来合理但存在性能问题的代码并附一句问题描述 - **Correct**给出改造后的代码并附一句正确做法说明 - 两份示例应形成同场景下的直接对比让 Agent 能识别出可自动化的改写模式。 以 [async-parallel.md](https://link.gitcode.com/i/2e20992c963495700463b38dc70bae84) 为例它用3 次串行网络往返对比1 次并行往返来说明 Promise.all() 的价值 typescript // Incorrect串行执行3 次往返 const user await fetchUser() const posts await fetchPosts() const comments await fetchComments() // Correct并行执行1 次往返 const [user, posts, comments] await Promise.all([ fetchUser(), fetchPosts(), fetchComments() ])rerender-memo.md 则展示了组件级重构的对比错误写法在loading时仍用useMemo计算头像正确写法把头像提取为memo包裹的UserAvatar子组件从而在 loading 分支提前返回、跳过计算。该文件末尾还附带了适用性说明若项目已启用 React Compiler手写memo()/useMemo()就不再必要——这体现了规则作者对何时不适用的边界意识。4. Reference 参考链接模板最后要求给出参考文档或资源链接。仓库内规则引用过 Next.js 官方博客的包导入优化文章、react.dev、nextjs.org、SWR 官网等权威资料见 metadata.json 的 references 列表。在编写规则时建议将参考链接放在示例之后便于读者和 Agent 回溯原始依据。五、创建一条新规则的完整工作流README.md 给出了创建新规则的六步流程与本仓库内 70 条规则的生成方式完全一致复制模板将rules/_template.md复制为rules/分区-描述.md如async-parallel.md选择分区前缀根据规则所属分类选用八种前缀之一见下表填写 frontmatter 与正文按第三、四节所述规则补全四个元数据字段和正文五要素确保示例清晰且带解释Incorrect/Correct 各一份并说明对错原因运行pnpm build重新生成编译输出AGENTS.md与test-cases.json运行pnpm validate校验所有规则文件格式合规。八类分区与文件名前缀规则按性能主题划分为 8 个分类每个分类有固定的文件名前缀与优先级权重数据来自 SKILL.md 与 _sections.md优先级分类权重前缀1Eliminating Waterfalls消除瀑布请求CRITICALasync-2Bundle Size Optimization包体积优化CRITICALbundle-3Server-Side Performance服务端性能HIGHserver-4Client-Side Data Fetching客户端数据获取MEDIUM-HIGHclient-5Re-render Optimization重渲染优化MEDIUMrerender-6Rendering Performance渲染性能MEDIUMrendering-7JavaScript PerformanceJS 微优化LOW-MEDIUMjs-8Advanced Patterns进阶模式LOWadvanced-_sections.md对每个分类都给出了一句为什么重要的说明例如第 1 类Waterfall 是第一大性能杀手每次串行 await 都会叠加完整的网络延迟消除它们收益最大第 2 类减小初始包体积可以改善 TTI可交互时间与 LCP最大内容绘制。六、文件名规范与自动构建管线模板所在的规则库对文件名有严格约束理解这些约束才能写出可被构建系统正确收录的规则_开头的文件是特殊文件不参与构建_template.md和_sections.md即属此类——模板不会被当成规则编入AGENTS.md规则文件命名分区前缀-描述.md如async-parallel.md、bundle-barrel-imports.md分类由文件名前缀自动推断无需在 frontmatter 中重复声明排序与编号构建时每个分区内的规则按标题字母排序编号如 1.1、1.2在构建过程中自动生成作者不需要手动管理序号构建产物pnpm build将全部规则编译为完整的 AGENTS.md即文首所述 3800 余行的总文档并生成test-cases.json用于 LLM 评估的测试用例pnpm validate校验全部规则文件pnpm extract-tests抽取测试用例pnpm dev等价于 build validate。仓库内编译产物 AGENTS.md 展示了这套管线的实际输出形态包含目录按 8 个分区编号 1.18.4、每条规则的影响声明、以及规则间相互引用的链接如async-cheap-condition-before-await自述为async-defer-await针对flag cheapCondition场景的特化。这证明模板结构完全能支撑大规模、机器可读的规则文档组织。七、模板在实际项目中的落地本仓库的前端实践这套规则技能被引入本仓库服务于 web/ 目录下基于 Vite React TypeScript Ant Design Tailwind Zustand 构建的前端画布应用。从根目录 AGENTS.md 的前端规范可以看到模板所代表的性能理念已经渗透到项目编码规范中包体积规则bundle-barrel-imports的对应实践项目规范明确UI 图标优先使用lucide-react或项目已经使用的 Ant Design 图标。而 bundle-barrel-imports.md 恰好指出lucide-react等图标库的 barrel 入口可能包含上万个 re-export直接import { Check } from lucide-react会产生数百毫秒的导入成本——两者结合意味着在仓库前端开发中选用图标时应留意从库入口导入 vs 从深路径导入的取舍或在构建层启用包导入优化渲染与重渲染规则的应用场景画布页面web/src/pages/canvas/、web/src/components/canvas/存在大量高频更新的节点组件rerender-与rendering-分区中关于memo、useMemo、避免组件内定义组件、条件渲染用三元表达式等规则正是这类交互密集界面的优化依据数据获取规则的应用场景项目规范规定外部服务请求统一放在web/src/services/api/由浏览器前端直连async-分区关于Promise.all()并行化、Suspense 边界、先检查廉价条件再 await 的规则可直接指导这些 API 调用层的并发编排。也就是说_template.md不只是仓库内一个孤立的模板文件——它是整个前端性能规范体系的生产工具仓库中的 70 条规则全部经由它产出并反向约束着 web/ 前端的编码质量。八、编写高质量规则的四条准则综合模板要求与仓库内真实规则的写法可以提炼出四条作者准则示例必须成对且同场景Incorrect 与 Correct 应改写同一段代码差异点只在于性能关键改动方便 Agent 学习自动化的前后差异说明要讲清为什么模板要求的brief explanation不是复述代码而是解释性能机理如每次串行 await 都会叠加完整网络延迟并尽量给出可量化的影响描述标注适用边界与例外如async-cheap-condition-before-await提示若同步条件昂贵、依赖 flag 或需固定副作用顺序则保持原序rerender-memo提示 React Compiler 启用时无需手写 memo——边界说明让规则在自动化应用中不易误伤元数据与正文保持同步frontmatter 的 title 与正文 H2 一致、impact 与 Impact 声明行一致、标签覆盖检索关键词这是构建与检索可靠性的前提。结语rules/_template.md以最精简的 28 行定义了 Vercel React Best Practices 规则库的完整写作契约frontmatter 承载机器可读的元数据四段正文承载人可读的讲解与示例双示例结构则让性能优化模式可以被 Agent 直接识别和自动改写。理解并善用这个模板意味着你既能产出符合规范的新规则也能借助pnpm build/pnpm validate管线将其纳入自动化的性能治理闭环——无论是本仓库的画布前端还是任何 React/Next.js 项目这套模板 分区 级别 构建的规则工程方法论都值得直接复用。赞分享AI 应用媒体生成前端AI AgentAI 技能【免费下载链接】infinite-canvas面向 AI 创作的开源无限画布工作台集成 AI 生图、参考图编辑、视频生成、Agent 智能助手、画布编排、对话创作、提示词库与素材管理等能力支持可视化创作流程与多 Agent 协同工作。兼容 OpenAI 接口生态支持 chatgpt2api、grok2api、flow2api、newapi 等渠道接入。项目地址https://gitcode.com/gh_mirrors/infinit/infinite-canvas点击查看免费下载相关推荐为 Agent 编写 React/Next.js 性能优化规则Vercel React Best Practices 规则模板与工作流深度指南为 Agent 编写 React/Next.js 性能优化规则Vercel React Best Practices 规则模板与工作流深度指南 本文围绕 opVercel React Best Practices 实战指南面向 Agent 与 LLM 的 React/Next.js 性能优化规则体系Vercel React Best Practices 实战指南面向 Agent 与 LLM 的 React/Next.js 性能优化规则体系 本文围绕 me音视频桌面应用后端3分钟搞定电子课本批量下载免代码操作存下智慧平台教材PDF3分钟搞定电子课本批量下载免代码操作存下智慧平台教材PDF 上完课想让学生预习你只能在网页里一页页翻找 PDF 入口翻三本教材就过去十分钟。tchMate网页爬虫教育上一篇终极AI视频插帧指南3分钟让普通视频变身丝滑大片下一篇华硕笔记本性能调校终极指南G-Helper轻量控制工具完整教程创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Vercel React Best Practices 规则模板解析：为 Agent 与 LLM 编写可复用的 React/Next.js 性能优化规则
AI 应用媒体生成前端AI AgentAI 技能【免费下载链接】infinite-canvas面向 AI 创作的开源无限画布工作台集成 AI 生图、参考图编辑、视频生成、Agent 智能助手、画布编排、对话创作、提示词库与素材管理等能力支持可视化创作流程与多 Agent 协同工作。兼容 OpenAI 接口生态支持 chatgpt2api、grok2api、flow2api、newapi 等渠道接入。项目地址https://gitcode.com/gh_mirrors/infinit/infinite-canvas点击查看免费下载本文围绕开源仓库.agents/skills/vercel-react-best-practices中的规则模板文件 rules/_template.md 展开系统讲解如何基于该模板编写一条结构规范、示例清晰、可被自动构建与校验的性能优化规则。读者将掌握模板的 frontmatter 字段语义、八类规则分区与文件名前缀体系、六档 impact 级别、Incorrect/Correct 示例的写作规范以及pnpm build/pnpm validate等构建管线的工作方式可直接在本仓库或其他 React/Next.js 项目中实践规则作者工作流。一、这套规则体系的定位为 Agent 而生的性能规范库vercel-react-best-practices是一套由 Vercel Engineering 维护、面向 AI Agent 与 LLM 的 React/Next.js 性能优化指南。从 SKILL.md 的描述看它在编写、审查或重构 React/Next.js 代码时应被使用共包含 70 条规则、8 个分类按影响程度impact排序以指导自动化重构与代码生成。其元数据metadata.json记录了版本 1.0.0、组织为 Vercel Engineering、日期 2026 年 1 月并声明每一条规则都包含详细解释、对比错误与正确实现的真实示例以及具体的影响指标用于指导自动化重构和代码生成。该技能在仓库中的文件布局如下rules/单条规则文件每条一个文件其中_sections.md保存分区元数据标题、影响、描述_template.md是创建新规则用的模板_开头的文件不参与构建metadata.json文档元数据版本、组织、摘要AGENTS.md构建生成的完整编译输出所有规则展开后的总文档共 3800 余行README.md使用说明与规则作者指南。其中_template.md是整个规则库的写作骨架——所有规则文件都从它复制而来。理解这个模板就等于理解了整个规则库的创作规范。二、模板整体结构四段式规则文件模板全文仅 28 行却定义了规则文件的标准形态可概括为frontmatter 元数据 四段正文--- title: Rule Title Here impact: MEDIUM impactDescription: Optional description of impact (e.g., 20-50% improvement) tags: tag1, tag2 --- ## Rule Title Here **Impact: MEDIUM (optional impact description)** Brief explanation of the rule and why it matters. This should be clear and concise, explaining the performance implications. **Incorrect (description of whats wrong):** typescript // Bad code example here const bad example()Correct (description of whats right):// Good code example here const good example()Reference: Link to documentation or resource其中 frontmatter 是 YAML 格式的元数据头正文则固定包含 Impact 声明、规则说明、错误示例、正确示例、参考链接五个组成部分。下面逐一拆解每个字段的写法与取值规范。 ## 三、frontmatter 字段详解 frontmatter 是机器可读的规则元数据构建脚本会依据它生成目录、排序和汇总。四个字段分别承担不同职责 ### 1. title 规则标题要求用动作 对象的祈使句式概括规则核心便于在目录中快速检索。仓库内真实规则标题示例 - [async-parallel.md](https://link.gitcode.com/i/2e20992c963495700463b38dc70bae84)Promise.all() for Independent Operations - [rerender-memo.md](https://link.gitcode.com/i/5c8bb1c66dcfb9912400564e430a2c1a)Extract to Memoized Components - [bundle-barrel-imports.md](https://link.gitcode.com/i/d0a6087acfc4d77bf6c10e2b7ef9617a)Avoid Barrel File Imports 标题应同时出现在 frontmatter 和正文 H2 中两者保持一致见模板第 2 行与第 8 行。 ### 2. impact 规则的影响等级取值限定在六个级别之一CRITICAL、HIGH、MEDIUM-HIGH、MEDIUM、LOW-MEDIUM、LOW。它决定规则在优先级排序中的位置是构建与检索的关键字段。级别语义在 [README.md](https://link.gitcode.com/i/3c3a1675c4c334bb09cc7564f846a939) 中定义如下 | 级别 | 语义 | |------|------| | CRITICAL | 最高优先级带来主要性能收益 | | HIGH | 显著的性能提升 | | MEDIUM-HIGH | 中高收益 | | MEDIUM | 中等性能改进 | | LOW-MEDIUM | 中低收益 | | LOW | 渐进式改进 | 值得注意的是同一分类内的规则 impact 也可以不同。例如同属 async- 分区的规则中[async-parallel.md](https://link.gitcode.com/i/2e20992c963495700463b38dc70bae84) 标记为 CRITICAL影响描述为 2-10 倍提升而 [async-cheap-condition-before-await.md](https://link.gitcode.com/i/cc425044fb568693808eac08b5d5b11a) 标记为 HIGH影响描述为当同步守卫已失败时避免不必要的异步工作。这说明 impact 描述的是**该条规则单独实施时**的收益量级而非所属分类的整体权重。 ### 3. impactDescription 对影响的可选量化说明建议给出可验证的收益描述如 20-50% improvement、2-10× improvement。仓库内真实取值包括 - [bundle-barrel-imports.md](https://link.gitcode.com/i/d0a6087acfc4d77bf6c10e2b7ef9617a)200-800ms import cost, slow builds - [async-parallel.md](https://link.gitcode.com/i/2e20992c963495700463b38dc70bae84)2-10× improvement - [rerender-memo.md](https://link.gitcode.com/i/5c8bb1c66dcfb9912400564e430a2c1a)enables early returns 它随 impact 一起展示在正文第一行帮助读者快速判断这条规则值不值得投入改造。 ### 4. tags 逗号分隔的标签列表用于跨分类检索与语义归类。示例[async-parallel.md](https://link.gitcode.com/i/2e20992c963495700463b38dc70bae84) 使用 async, parallelization, promises, waterfalls[rerender-memo.md](https://link.gitcode.com/i/5c8bb1c66dcfb9912400564e430a2c1a) 使用 rerender, memo, useMemo, optimization。标签应覆盖规则所属分类、核心 API 与关键概念词便于 Agent 按关键词命中。 ## 四、正文五要素从 Impact 到 Reference ### 1. Impact 声明行 正文第一行以 **加粗的 Impact 声明** 开头格式为 **Impact: 级别 (影响描述)**与 frontmatter 中的 impact / impactDescription 保持同步。它既是给人类读者的速览也是构建脚本进行排序的依据。 ### 2. 规则说明 模板要求清晰简洁地解释规则及其重要性说明性能影响。仓库内规则的说明普遍采用问题背景 反例危害 正例收益的三段式写法。例如 [async-cheap-condition-before-await.md](https://link.gitcode.com/i/cc425044fb568693808eac08b5d5b11a) 先定义适用场景分支中同时使用 await 获取 flag 和**廉价的同步条件**时应先评估同步条件再解释原因否则即使复合条件永远不可能成立你也要为异步调用付费最后补充边界如果同步条件本身昂贵、依赖 flag或必须按固定顺序执行副作用则保持原有顺序。 ### 3. Incorrect / Correct 双示例 模板的核心约束是**每条规则必须同时提供错误与正确两份代码示例**这是整库规则的统一写作范式。示例要求 - **Incorrect**给出看起来合理但存在性能问题的代码并附一句问题描述 - **Correct**给出改造后的代码并附一句正确做法说明 - 两份示例应形成同场景下的直接对比让 Agent 能识别出可自动化的改写模式。 以 [async-parallel.md](https://link.gitcode.com/i/2e20992c963495700463b38dc70bae84) 为例它用3 次串行网络往返对比1 次并行往返来说明 Promise.all() 的价值 typescript // Incorrect串行执行3 次往返 const user await fetchUser() const posts await fetchPosts() const comments await fetchComments() // Correct并行执行1 次往返 const [user, posts, comments] await Promise.all([ fetchUser(), fetchPosts(), fetchComments() ])rerender-memo.md 则展示了组件级重构的对比错误写法在loading时仍用useMemo计算头像正确写法把头像提取为memo包裹的UserAvatar子组件从而在 loading 分支提前返回、跳过计算。该文件末尾还附带了适用性说明若项目已启用 React Compiler手写memo()/useMemo()就不再必要——这体现了规则作者对何时不适用的边界意识。4. Reference 参考链接模板最后要求给出参考文档或资源链接。仓库内规则引用过 Next.js 官方博客的包导入优化文章、react.dev、nextjs.org、SWR 官网等权威资料见 metadata.json 的 references 列表。在编写规则时建议将参考链接放在示例之后便于读者和 Agent 回溯原始依据。五、创建一条新规则的完整工作流README.md 给出了创建新规则的六步流程与本仓库内 70 条规则的生成方式完全一致复制模板将rules/_template.md复制为rules/分区-描述.md如async-parallel.md选择分区前缀根据规则所属分类选用八种前缀之一见下表填写 frontmatter 与正文按第三、四节所述规则补全四个元数据字段和正文五要素确保示例清晰且带解释Incorrect/Correct 各一份并说明对错原因运行pnpm build重新生成编译输出AGENTS.md与test-cases.json运行pnpm validate校验所有规则文件格式合规。八类分区与文件名前缀规则按性能主题划分为 8 个分类每个分类有固定的文件名前缀与优先级权重数据来自 SKILL.md 与 _sections.md优先级分类权重前缀1Eliminating Waterfalls消除瀑布请求CRITICALasync-2Bundle Size Optimization包体积优化CRITICALbundle-3Server-Side Performance服务端性能HIGHserver-4Client-Side Data Fetching客户端数据获取MEDIUM-HIGHclient-5Re-render Optimization重渲染优化MEDIUMrerender-6Rendering Performance渲染性能MEDIUMrendering-7JavaScript PerformanceJS 微优化LOW-MEDIUMjs-8Advanced Patterns进阶模式LOWadvanced-_sections.md对每个分类都给出了一句为什么重要的说明例如第 1 类Waterfall 是第一大性能杀手每次串行 await 都会叠加完整的网络延迟消除它们收益最大第 2 类减小初始包体积可以改善 TTI可交互时间与 LCP最大内容绘制。六、文件名规范与自动构建管线模板所在的规则库对文件名有严格约束理解这些约束才能写出可被构建系统正确收录的规则_开头的文件是特殊文件不参与构建_template.md和_sections.md即属此类——模板不会被当成规则编入AGENTS.md规则文件命名分区前缀-描述.md如async-parallel.md、bundle-barrel-imports.md分类由文件名前缀自动推断无需在 frontmatter 中重复声明排序与编号构建时每个分区内的规则按标题字母排序编号如 1.1、1.2在构建过程中自动生成作者不需要手动管理序号构建产物pnpm build将全部规则编译为完整的 AGENTS.md即文首所述 3800 余行的总文档并生成test-cases.json用于 LLM 评估的测试用例pnpm validate校验全部规则文件pnpm extract-tests抽取测试用例pnpm dev等价于 build validate。仓库内编译产物 AGENTS.md 展示了这套管线的实际输出形态包含目录按 8 个分区编号 1.18.4、每条规则的影响声明、以及规则间相互引用的链接如async-cheap-condition-before-await自述为async-defer-await针对flag cheapCondition场景的特化。这证明模板结构完全能支撑大规模、机器可读的规则文档组织。七、模板在实际项目中的落地本仓库的前端实践这套规则技能被引入本仓库服务于 web/ 目录下基于 Vite React TypeScript Ant Design Tailwind Zustand 构建的前端画布应用。从根目录 AGENTS.md 的前端规范可以看到模板所代表的性能理念已经渗透到项目编码规范中包体积规则bundle-barrel-imports的对应实践项目规范明确UI 图标优先使用lucide-react或项目已经使用的 Ant Design 图标。而 bundle-barrel-imports.md 恰好指出lucide-react等图标库的 barrel 入口可能包含上万个 re-export直接import { Check } from lucide-react会产生数百毫秒的导入成本——两者结合意味着在仓库前端开发中选用图标时应留意从库入口导入 vs 从深路径导入的取舍或在构建层启用包导入优化渲染与重渲染规则的应用场景画布页面web/src/pages/canvas/、web/src/components/canvas/存在大量高频更新的节点组件rerender-与rendering-分区中关于memo、useMemo、避免组件内定义组件、条件渲染用三元表达式等规则正是这类交互密集界面的优化依据数据获取规则的应用场景项目规范规定外部服务请求统一放在web/src/services/api/由浏览器前端直连async-分区关于Promise.all()并行化、Suspense 边界、先检查廉价条件再 await 的规则可直接指导这些 API 调用层的并发编排。也就是说_template.md不只是仓库内一个孤立的模板文件——它是整个前端性能规范体系的生产工具仓库中的 70 条规则全部经由它产出并反向约束着 web/ 前端的编码质量。八、编写高质量规则的四条准则综合模板要求与仓库内真实规则的写法可以提炼出四条作者准则示例必须成对且同场景Incorrect 与 Correct 应改写同一段代码差异点只在于性能关键改动方便 Agent 学习自动化的前后差异说明要讲清为什么模板要求的brief explanation不是复述代码而是解释性能机理如每次串行 await 都会叠加完整网络延迟并尽量给出可量化的影响描述标注适用边界与例外如async-cheap-condition-before-await提示若同步条件昂贵、依赖 flag 或需固定副作用顺序则保持原序rerender-memo提示 React Compiler 启用时无需手写 memo——边界说明让规则在自动化应用中不易误伤元数据与正文保持同步frontmatter 的 title 与正文 H2 一致、impact 与 Impact 声明行一致、标签覆盖检索关键词这是构建与检索可靠性的前提。结语rules/_template.md以最精简的 28 行定义了 Vercel React Best Practices 规则库的完整写作契约frontmatter 承载机器可读的元数据四段正文承载人可读的讲解与示例双示例结构则让性能优化模式可以被 Agent 直接识别和自动改写。理解并善用这个模板意味着你既能产出符合规范的新规则也能借助pnpm build/pnpm validate管线将其纳入自动化的性能治理闭环——无论是本仓库的画布前端还是任何 React/Next.js 项目这套模板 分区 级别 构建的规则工程方法论都值得直接复用。赞分享AI 应用媒体生成前端AI AgentAI 技能【免费下载链接】infinite-canvas面向 AI 创作的开源无限画布工作台集成 AI 生图、参考图编辑、视频生成、Agent 智能助手、画布编排、对话创作、提示词库与素材管理等能力支持可视化创作流程与多 Agent 协同工作。兼容 OpenAI 接口生态支持 chatgpt2api、grok2api、flow2api、newapi 等渠道接入。项目地址https://gitcode.com/gh_mirrors/infinit/infinite-canvas点击查看免费下载相关推荐为 Agent 编写 React/Next.js 性能优化规则Vercel React Best Practices 规则模板与工作流深度指南为 Agent 编写 React/Next.js 性能优化规则Vercel React Best Practices 规则模板与工作流深度指南 本文围绕 opVercel React Best Practices 实战指南面向 Agent 与 LLM 的 React/Next.js 性能优化规则体系Vercel React Best Practices 实战指南面向 Agent 与 LLM 的 React/Next.js 性能优化规则体系 本文围绕 me音视频桌面应用后端3分钟搞定电子课本批量下载免代码操作存下智慧平台教材PDF3分钟搞定电子课本批量下载免代码操作存下智慧平台教材PDF 上完课想让学生预习你只能在网页里一页页翻找 PDF 入口翻三本教材就过去十分钟。tchMate网页爬虫教育上一篇终极AI视频插帧指南3分钟让普通视频变身丝滑大片下一篇华硕笔记本性能调校终极指南G-Helper轻量控制工具完整教程创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考