@adonis0123/react-best-practices 1.0.0 → 1.0.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Agent Skill NPM Contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,123 +1,111 @@
-# React Best Practices
-
-A structured repository for creating and maintaining React Best Practices optimized for agents and LLMs.
-
-## Structure
-
-- `rules/` - Individual rule files (one per rule)
-  - `_sections.md` - Section metadata (titles, impacts, descriptions)
-  - `_template.md` - Template for creating new rules
-  - `area-description.md` - Individual rule files
-- `src/` - Build scripts and utilities
-- `metadata.json` - Document metadata (version, organization, abstract)
-- __`AGENTS.md`__ - Compiled output (generated)
-- __`test-cases.json`__ - Test cases for LLM evaluation (generated)
-
-## Getting Started
-
-1. Install dependencies:
-   ```bash
-   pnpm install
-   ```
-
-2. Build AGENTS.md from rules:
-   ```bash
-   pnpm build
-   ```
-
-3. Validate rule files:
-   ```bash
-   pnpm validate
-   ```
-
-4. Extract test cases:
-   ```bash
-   pnpm extract-tests
-   ```
-
-## Creating a New Rule
-
-1. Copy `rules/_template.md` to `rules/area-description.md`
-2. Choose the appropriate area prefix:
-   - `async-` for Eliminating Waterfalls (Section 1)
-   - `bundle-` for Bundle Size Optimization (Section 2)
-   - `server-` for Server-Side Performance (Section 3)
-   - `client-` for Client-Side Data Fetching (Section 4)
-   - `rerender-` for Re-render Optimization (Section 5)
-   - `rendering-` for Rendering Performance (Section 6)
-   - `js-` for JavaScript Performance (Section 7)
-   - `advanced-` for Advanced Patterns (Section 8)
-3. Fill in the frontmatter and content
-4. Ensure you have clear examples with explanations
-5. Run `pnpm build` to regenerate AGENTS.md and test-cases.json
-
-## Rule File Structure
-
-Each rule file should follow this structure:
-
-```markdown
----
-title: Rule Title Here
-impact: MEDIUM
-impactDescription: Optional description
-tags: tag1, tag2, tag3
----
+# @adonis0123/react-best-practices
 
-## Rule Title Here
+> Claude Code 技能 - React 和 Next.js 性能优化最佳实践（来自 Vercel Engineering）
 
-Brief explanation of the rule and why it matters.
+[![npm version](https://img.shields.io/npm/v/@adonis0123/react-best-practices.svg)](https://www.npmjs.com/package/@adonis0123/react-best-practices)
 
-**Incorrect (description of what's wrong):**
+**原始项目**: [vercel-labs/agent-skills/react-best-practices](https://github.com/vercel-labs/agent-skills/tree/main/skills/react-best-practices)
 
-```typescript
-// Bad code example
-```
+## 安装
 
-**Correct (description of what's right):**
-
-```typescript
-// Good code example
+```bash
+npm install -g @adonis0123/react-best-practices
 ```
 
-Optional explanatory text after examples.
+## 使用
 
-Reference: [Link](https://example.com)
+安装后，Claude Code 在编写或审查 React/Next.js 代码时会自动应用这些最佳实践。
 
-## File Naming Convention
+## 规则分类
 
-- Files starting with `_` are special (excluded from build)
-- Rule files: `area-description.md` (e.g., `async-parallel.md`)
-- Section is automatically inferred from filename prefix
-- Rules are sorted alphabetically by title within each section
-- IDs (e.g., 1.1, 1.2) are auto-generated during build
+| 优先级 | 分类 | 影响 |
+|--------|------|------|
+| 1 | 消除瀑布流 | 关键 |
+| 2 | 包体积优化 | 关键 |
+| 3 | 服务端性能 | 高 |
+| 4 | 客户端数据获取 | 中高 |
+| 5 | 重渲染优化 | 中 |
+| 6 | 渲染性能 | 中 |
+| 7 | JavaScript 性能 | 低中 |
+| 8 | 高级模式 | 低 |
 
-## Impact Levels
+## 核心规则
 
-- `CRITICAL` - Highest priority, major performance gains
-- `HIGH` - Significant performance improvements
-- `MEDIUM-HIGH` - Moderate-high gains
-- `MEDIUM` - Moderate performance improvements
-- `LOW-MEDIUM` - Low-medium gains
-- `LOW` - Incremental improvements
+### 消除瀑布流（关键）
+- `async-parallel` - 使用 Promise.all() 并行请求
+- `async-suspense-boundaries` - 使用 Suspense 流式传输
 
-## Scripts
+### 包体积优化（关键）
+- `bundle-barrel-imports` - 避免 barrel 文件，直接导入
+- `bundle-dynamic-imports` - 使用 next/dynamic 懒加载
 
-- `pnpm build` - Compile rules into AGENTS.md
-- `pnpm validate` - Validate all rule files
-- `pnpm extract-tests` - Extract test cases for LLM evaluation
-- `pnpm dev` - Build and validate
+### 服务端性能（高）
+- `server-cache-react` - 使用 React.cache() 去重
+- `server-parallel-fetching` - 并行获取数据
 
-## Contributing
+### 重渲染优化（中）
+- `rerender-memo` - 提取昂贵计算到 memo 组件
+- `rerender-functional-setstate` - 使用函数式 setState
 
-When adding or modifying rules:
+## 包含内容
 
-1. Use the correct filename prefix for your section
-2. Follow the `_template.md` structure
-3. Include clear bad/good examples with explanations
-4. Add appropriate tags
-5. Run `pnpm build` to regenerate AGENTS.md and test-cases.json
-6. Rules are automatically sorted by title - no need to manage numbers!
+- 45 条优化规则
+- 每条规则包含错误/正确代码示例
+- 详细的影响说明
 
-## Acknowledgments
+## 致谢
 
 Originally created by [@shuding](https://x.com/shuding) at [Vercel](https://vercel.com).
+
+## 更多技能
+
+- [@adonis0123/weekly-report](https://www.npmjs.com/package/@adonis0123/weekly-report) - 周报生成
+- [@adonis0123/agent-browser](https://www.npmjs.com/package/@adonis0123/agent-browser) - 浏览器自动化
+
+---
+
+## 开发者文档
+
+以下是原始项目的开发文档，供贡献者参考。
+
+### 项目结构
+
+- `rules/` - 独立规则文件（每条规则一个文件）
+  - `_sections.md` - 分类元数据（标题、影响、描述）
+  - `_template.md` - 创建新规则的模板
+  - `area-description.md` - 独立规则文件
+- `AGENTS.md` - 编译输出（自动生成）
+
+### 规则文件命名
+
+- 以 `_` 开头的文件是特殊文件（不参与构建）
+- 规则文件格式：`area-description.md`（如 `async-parallel.md`）
+- 分类根据文件名前缀自动推断
+- 规则按标题字母顺序排序
+- ID（如 1.1, 1.2）在构建时自动生成
+
+### 区域前缀
+
+| 前缀 | 分类 |
+|------|------|
+| `async-` | 消除瀑布流（Section 1）|
+| `bundle-` | 包体积优化（Section 2）|
+| `server-` | 服务端性能（Section 3）|
+| `client-` | 客户端数据获取（Section 4）|
+| `rerender-` | 重渲染优化（Section 5）|
+| `rendering-` | 渲染性能（Section 6）|
+| `js-` | JavaScript 性能（Section 7）|
+| `advanced-` | 高级模式（Section 8）|
+
+### 影响级别
+
+- `CRITICAL` - 最高优先级，重大性能提升
+- `HIGH` - 显著性能改进
+- `MEDIUM-HIGH` - 中高收益
+- `MEDIUM` - 中等性能改进
+- `LOW-MEDIUM` - 低中收益
+- `LOW` - 增量改进
+
+## License
+
+MIT

package/package.json

@@ -1,12 +1,7 @@
 {
   "name": "@adonis0123/react-best-practices",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "Claude Code Skill - React 和 Next.js 性能优化最佳实践指南，来自 Vercel Engineering",
-  "scripts": {
-    "postinstall": "node install-skill.js",
-    "preuninstall": "node uninstall-skill.js",
-    "test": "node install-skill.js && echo 'Installation test completed.'"
-  },
   "files": [
     "SKILL.md",
     "AGENTS.md",
@@ -30,8 +25,13 @@
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/Adonis0123/claude-skills.git",
+    "url": "git+https://github.com/Adonis0123/agent-skill-npm-boilerplate.git",
     "directory": "packages/react-best-practices"
   },
-  "homepage": "https://github.com/Adonis0123/claude-skills/tree/main/packages/react-best-practices"
-}
+  "homepage": "https://github.com/Adonis0123/agent-skill-npm-boilerplate/tree/main/packages/react-best-practices",
+  "scripts": {
+    "postinstall": "node install-skill.js",
+    "preuninstall": "node uninstall-skill.js",
+    "test": "node install-skill.js && echo 'Installation test completed.'"
+  }
+}