)
1. Eliminating Waterfalls (async)【免费下载链接】plateRich-text editor with AI and shadcn/ui项目地址: https://gitcode.com/GitHub_Trending/pl/plateImpact:CRITICALDescription:Waterfalls are the #1 performance killer. Each sequential await adds full network latency. Eliminating them yields the largest gains.文件顶部还有一行关键的机制说明 The section ID (in parentheses) is the filename prefix used to group rules. 即**括号中的 ID如 async就是规则文件名的前缀**。文件命名即归类async-parallel.md 属于第 1 章bundle-dynamic-imports.md 属于第 2 章。这让构建脚本无需任何额外配置即可从文件名推断章节归属是整个“一规则一文件”方案能低成本聚合的前提。 8 个章节的影响等级递减与 SKILL.md 中的优先级表一一对应见 [SKILL.md 第 25–34 行](https://link.gitcode.com/i/2b6ffd50e9e13134a4ae47f9f21347fc) | 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- | 这种“类别级影响等级”为 Agent 提供了**全局优先级**在修复性能问题时应先处理 async- 与 bundle- 前缀的问题再逐层向下。而每条规则自身还会携带更细粒度的 impact 字段见下一节两层等级共同构成排序依据。 ## 5. 规则文件规范frontmatter 反例/正例双代码块 ### 5.1 模板与文件命名约定 README 的 Rule File Structure 一节规定了每个规则文件必须遵循的结构其权威来源是 [rules/_template.md](https://link.gitcode.com/i/bcea1d74dbd25828cdf87afc305c5661)完整内容仅 28 行 markdown --- 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模板要素拆解 1. **frontmatter 四字段**title规则标题、impact影响等级、impactDescription可选量化描述收益如 20-50% improvement、tags逗号分隔的检索标签 2. **正文四段**## 标题 → 规则动机简述 → **Incorrect (...)** 反例代码块附括号内错误说明→ **Correct (...)** 正例代码块附括号内正确说明 3. **可选尾注**示例之后的补充解释与 Reference 引用。 配套的命名约定README “File Naming Convention” 一节同样重要 - 以 _ 开头的文件是特殊文件_sections.md、_template.md**被构建过程排除** - 规则文件命名为 area-description.md如 async-parallel.md - 章节由文件名前缀**自动推断**无需在文件内声明 - 规则在各自章节内**按 title 字母序排序** - 编号1.1、1.2 …在构建时**自动生成**——贡献者永远不需要手工维护序号。 这五条约定合起来意味着新增一条规则的全部工作就是“新建一个带正确前缀的文件”顺序、编号、目录、章节归属全部由构建过程推导这是该技能被 LLM 高效维护的根本原因。 ### 5.2 影响等级体系 README 定义了六级影响等级用于标注单条规则的预期收益 | 等级 | 含义 | |------|------| | CRITICAL | 最高优先级带来主要性能收益 | | HIGH | 显著的性能改进 | | MEDIUM-HIGH | 中高收益 | | MEDIUM | 中等性能改进 | | LOW-MEDIUM | 低中收益 | | LOW | 增量式改进 | 实际规则文件中等级与量化说明成对出现。例如 [async-parallel.md](https://link.gitcode.com/i/8d018b6ece9802e62505792435715918) yaml --- title: Promise.all() for Independent Operations impact: CRITICAL impactDescription: 2-10× improvement tags: async, parallelization, promises, waterfalls ---而 rerender-no-inline-components.md 的等级是HIGH说明为 prevents remount on every render。可以推断impactDescription中的量化措辞倍数、毫秒区间正是编译进AGENTS.md后 Agent 判断修复价值时的直接依据也是validate脚本可能校验的结构字段之一。6. 从规则文件到编译产物两个真实样例6.1async-parallelCRITICAL 级的最简形态async-parallel.md 是结构最简洁的规则之一正文仅有一组对照// 错误写法顺序执行3 次往返 const user await fetchUser() const posts await fetchPosts() const comments await fetchComments() // 正确写法并行执行1 次往返 const [user, posts, comments] await Promise.all([ fetchUser(), fetchPosts(), fetchComments() ])它在AGENTS.md中成为第 1 章编号1.5的条目标题 “Promise.all() for Independent Operations” 来自 frontmatter 的title而非文件名——这是“按 title 排序、编号自动生成”约定的直接证据。6.2bundle-barrel-imports带工程落地建议的完整形态bundle-barrel-imports.md 展示了规则文件可以承载的深度问题定义barrel 文件是重新导出多个模块的入口如export * from ./module的index.js流行的图标/组件库入口文件可能包含多达 10,000 个再导出仅 import 就需要 200-800ms同时拖慢开发与生产冷启动为什么 tree-shaking 不解决问题当库被标记为 external不参与打包时bundler 无法优化它若为了 tree-shaking 将其纳入打包构建本身会因分析完整模块图而显著变慢两条正确路径// 路径一Next.js 13.5 推荐做法构建期自动改写 barrel 导入 // next.config.js module.exports { experimental: { optimizePackageImports: [lucide-react, mui/material] } }// 路径二非 Next.js 项目直接导入具体子路径 import Button from mui/material/Button import TextField from mui/material/TextFieldTypeScript 边界提醒部分库规则中特别点名了lucide-react没有为深层路径提供.d.ts深路径导入会在strict/noImplicitAny下退化为隐式any此时应优先使用optimizePackageImports或先确认库对子路径导出了类型受影响库清单lucide-react、mui/material、mui/icons-material、tabler/icons-react、react-icons、headlessui/react、radix-ui/react-*、lodash、ramda、date-fns、rxjs、react-use等。这种“错误现象 → 原理 → 分场景解法 → 边界条件”的写法正是模板中“Optional explanatory text after examples”所期望的上限水位。6.3 重渲染与服务端类别的代表规则规则库其余类别在rules/目录中各有对应文件SKILL.md 的 Quick ReferenceSKILL.md 第 36–129 行给出了全部 69 条的一句话摘要可举两例rerender-no-inline-components在组件内部定义组件会在每次渲染产生新的组件类型React 会将其视为不同组件而完全重挂载丢失全部状态与 DOM。规则文件列出了该缺陷的典型症状输入框每次击键失焦、动画意外重启、useEffect的 cleanup/setup 随父组件每次渲染重跑、组件内滚动位置重置正确做法永远是提取为独立组件并显式传递 props而不是靠“闭包访问父级变量”来省事。server-cache-react使用React.cache()做请求内去重。规则特别强调一个易错点——cache使用浅相等Object.is判断缓存命中因此以行内对象作为参数时每次调用引用都不同缓存永远不命中// 错误每次调用都是新对象必然 cache miss const getUser cache(async (params: { uid: number }) { return await db.user.findUnique({ where: { id: params.uid } }) }) getUser({ uid: 1 }) getUser({ uid: 1 }) // Cache miss, runs query again // 正确原始参数走值相等命中缓存 getUser(1) getUser(1) // Cache hit, returns cached result【免费下载链接】plateRich-text editor with AI and shadcn/ui项目地址: https://gitcode.com/GitHub_Trending/pl/plate创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 1. Eliminating Waterfalls (async)
1. Eliminating Waterfalls (async)【免费下载链接】plateRich-text editor with AI and shadcn/ui项目地址: https://gitcode.com/GitHub_Trending/pl/plateImpact:CRITICALDescription:Waterfalls are the #1 performance killer. Each sequential await adds full network latency. Eliminating them yields the largest gains.文件顶部还有一行关键的机制说明 The section ID (in parentheses) is the filename prefix used to group rules. 即**括号中的 ID如 async就是规则文件名的前缀**。文件命名即归类async-parallel.md 属于第 1 章bundle-dynamic-imports.md 属于第 2 章。这让构建脚本无需任何额外配置即可从文件名推断章节归属是整个“一规则一文件”方案能低成本聚合的前提。 8 个章节的影响等级递减与 SKILL.md 中的优先级表一一对应见 [SKILL.md 第 25–34 行](https://link.gitcode.com/i/2b6ffd50e9e13134a4ae47f9f21347fc) | 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- | 这种“类别级影响等级”为 Agent 提供了**全局优先级**在修复性能问题时应先处理 async- 与 bundle- 前缀的问题再逐层向下。而每条规则自身还会携带更细粒度的 impact 字段见下一节两层等级共同构成排序依据。 ## 5. 规则文件规范frontmatter 反例/正例双代码块 ### 5.1 模板与文件命名约定 README 的 Rule File Structure 一节规定了每个规则文件必须遵循的结构其权威来源是 [rules/_template.md](https://link.gitcode.com/i/bcea1d74dbd25828cdf87afc305c5661)完整内容仅 28 行 markdown --- 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模板要素拆解 1. **frontmatter 四字段**title规则标题、impact影响等级、impactDescription可选量化描述收益如 20-50% improvement、tags逗号分隔的检索标签 2. **正文四段**## 标题 → 规则动机简述 → **Incorrect (...)** 反例代码块附括号内错误说明→ **Correct (...)** 正例代码块附括号内正确说明 3. **可选尾注**示例之后的补充解释与 Reference 引用。 配套的命名约定README “File Naming Convention” 一节同样重要 - 以 _ 开头的文件是特殊文件_sections.md、_template.md**被构建过程排除** - 规则文件命名为 area-description.md如 async-parallel.md - 章节由文件名前缀**自动推断**无需在文件内声明 - 规则在各自章节内**按 title 字母序排序** - 编号1.1、1.2 …在构建时**自动生成**——贡献者永远不需要手工维护序号。 这五条约定合起来意味着新增一条规则的全部工作就是“新建一个带正确前缀的文件”顺序、编号、目录、章节归属全部由构建过程推导这是该技能被 LLM 高效维护的根本原因。 ### 5.2 影响等级体系 README 定义了六级影响等级用于标注单条规则的预期收益 | 等级 | 含义 | |------|------| | CRITICAL | 最高优先级带来主要性能收益 | | HIGH | 显著的性能改进 | | MEDIUM-HIGH | 中高收益 | | MEDIUM | 中等性能改进 | | LOW-MEDIUM | 低中收益 | | LOW | 增量式改进 | 实际规则文件中等级与量化说明成对出现。例如 [async-parallel.md](https://link.gitcode.com/i/8d018b6ece9802e62505792435715918) yaml --- title: Promise.all() for Independent Operations impact: CRITICAL impactDescription: 2-10× improvement tags: async, parallelization, promises, waterfalls ---而 rerender-no-inline-components.md 的等级是HIGH说明为 prevents remount on every render。可以推断impactDescription中的量化措辞倍数、毫秒区间正是编译进AGENTS.md后 Agent 判断修复价值时的直接依据也是validate脚本可能校验的结构字段之一。6. 从规则文件到编译产物两个真实样例6.1async-parallelCRITICAL 级的最简形态async-parallel.md 是结构最简洁的规则之一正文仅有一组对照// 错误写法顺序执行3 次往返 const user await fetchUser() const posts await fetchPosts() const comments await fetchComments() // 正确写法并行执行1 次往返 const [user, posts, comments] await Promise.all([ fetchUser(), fetchPosts(), fetchComments() ])它在AGENTS.md中成为第 1 章编号1.5的条目标题 “Promise.all() for Independent Operations” 来自 frontmatter 的title而非文件名——这是“按 title 排序、编号自动生成”约定的直接证据。6.2bundle-barrel-imports带工程落地建议的完整形态bundle-barrel-imports.md 展示了规则文件可以承载的深度问题定义barrel 文件是重新导出多个模块的入口如export * from ./module的index.js流行的图标/组件库入口文件可能包含多达 10,000 个再导出仅 import 就需要 200-800ms同时拖慢开发与生产冷启动为什么 tree-shaking 不解决问题当库被标记为 external不参与打包时bundler 无法优化它若为了 tree-shaking 将其纳入打包构建本身会因分析完整模块图而显著变慢两条正确路径// 路径一Next.js 13.5 推荐做法构建期自动改写 barrel 导入 // next.config.js module.exports { experimental: { optimizePackageImports: [lucide-react, mui/material] } }// 路径二非 Next.js 项目直接导入具体子路径 import Button from mui/material/Button import TextField from mui/material/TextFieldTypeScript 边界提醒部分库规则中特别点名了lucide-react没有为深层路径提供.d.ts深路径导入会在strict/noImplicitAny下退化为隐式any此时应优先使用optimizePackageImports或先确认库对子路径导出了类型受影响库清单lucide-react、mui/material、mui/icons-material、tabler/icons-react、react-icons、headlessui/react、radix-ui/react-*、lodash、ramda、date-fns、rxjs、react-use等。这种“错误现象 → 原理 → 分场景解法 → 边界条件”的写法正是模板中“Optional explanatory text after examples”所期望的上限水位。6.3 重渲染与服务端类别的代表规则规则库其余类别在rules/目录中各有对应文件SKILL.md 的 Quick ReferenceSKILL.md 第 36–129 行给出了全部 69 条的一句话摘要可举两例rerender-no-inline-components在组件内部定义组件会在每次渲染产生新的组件类型React 会将其视为不同组件而完全重挂载丢失全部状态与 DOM。规则文件列出了该缺陷的典型症状输入框每次击键失焦、动画意外重启、useEffect的 cleanup/setup 随父组件每次渲染重跑、组件内滚动位置重置正确做法永远是提取为独立组件并显式传递 props而不是靠“闭包访问父级变量”来省事。server-cache-react使用React.cache()做请求内去重。规则特别强调一个易错点——cache使用浅相等Object.is判断缓存命中因此以行内对象作为参数时每次调用引用都不同缓存永远不命中// 错误每次调用都是新对象必然 cache miss const getUser cache(async (params: { uid: number }) { return await db.user.findUnique({ where: { id: params.uid } }) }) getUser({ uid: 1 }) getUser({ uid: 1 }) // Cache miss, runs query again // 正确原始参数走值相等命中缓存 getUser(1) getUser(1) // Cache hit, returns cached result【免费下载链接】plateRich-text editor with AI and shadcn/ui项目地址: https://gitcode.com/GitHub_Trending/pl/plate创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考