[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M71C52SRGP2FHEJ5CT5XWW4B":3,"skill-same:01M71C52SRGP2FHEJ5CT5XWW4B":119},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":23,"publishedAt":44,"linkOnly":45,"markdownContent":46,"markdownBody":47,"frontMatter":48,"refName":50,"commitSha":51,"skillDirectory":52,"forksCount":14,"repositoryHtmlUrl":53,"repositoryHomepageUrl":6,"ownerHtmlUrl":54,"ownerBlogUrl":6,"ownerDescription":55,"updatedAt":56,"install":57,"resources":70},"01M71C52SRGP2FHEJ5CT5XWW4B","react-best-practices",null,"React and Next.js performance optimization from Vercel Engineering. Use when building React components, optimizing performance, eliminating waterfalls, reducing bundle size, reviewing code for performance issues, or implementing server\u002Fclient-side optimizations.","yqecea\u002Fgem-swarm","yqecea","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F196189405?v=4","01M71C12KWH5QPTE12J69335KF","Yusuf","01M71C12MFS3BRGNE5SSHB4DY9",1,"Apache-2.0","https:\u002F\u002Fgithub.com\u002Fyqecea\u002Fgem-swarm\u002Fblob\u002Fmain\u002Fsrc\u002Fskills\u002Fdomain\u002Fnextjs-react-expert\u002FSKILL.md",[18],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000009","前端开发","SCENARIO","使用场景",[24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43],"react best practices","best practices","react","Optimization","for","optimizing performance","edit","write","read","bundle size","next","server","react components","components","code","Bash","when","implementing","issues","performance","2026-11-10 10:12:30",false,"---\nname: react-best-practices\ndescription: React and Next.js performance optimization from Vercel Engineering. Use when building React components, optimizing performance, eliminating waterfalls, reducing bundle size, reviewing code for performance issues, or implementing server\u002Fclient-side optimizations.\nallowed-tools: Read, Write, Edit, Glob, Grep, Bash\n---\n\n# Next.js & React Performance Expert\n\n> **From Vercel Engineering** - 57 optimization rules prioritized by impact\n> **Philosophy:** Eliminate waterfalls first, optimize bundles second, then micro-optimize.\n\n---\n\n## 🎯 Selective Reading Rule (MANDATORY)\n\n**Read ONLY sections relevant to your task!** Check the content map below and load what you need.\n\n> 🔴 **For performance reviews: Start with CRITICAL sections (1-2), then move to HIGH\u002FMEDIUM.**\n\n---\n\n## 📑 Content Map\n\n| File                                    | Impact             | Rules    | When to Read                                                    |\n| --------------------------------------- | ------------------ | -------- | --------------------------------------------------------------- |\n| `1-async-eliminating-waterfalls.md`     | 🔴 **CRITICAL**    | 5 rules  | Slow page loads, sequential API calls, data fetching waterfalls |\n| `2-bundle-bundle-size-optimization.md`  | 🔴 **CRITICAL**    | 5 rules  | Large bundle size, slow Time to Interactive, First Load issues  |\n| `3-server-server-side-performance.md`   | 🟠 **HIGH**        | 7 rules  | Slow SSR, API route optimization, server-side waterfalls        |\n| `4-client-client-side-data-fetching.md` | 🟡 **MEDIUM-HIGH** | 4 rules  | Client data management, SWR patterns, deduplication             |\n| `5-rerender-re-render-optimization.md`  | 🟡 **MEDIUM**      | 12 rules | Excessive re-renders, React performance, memoization            |\n| `6-rendering-rendering-performance.md`  | 🟡 **MEDIUM**      | 9 rules  | Rendering bottlenecks, virtualization, image optimization       |\n| `7-js-javascript-performance.md`        | ⚪ **LOW-MEDIUM**  | 12 rules | Micro-optimizations, caching, loop performance                  |\n| `8-advanced-advanced-patterns.md`       | 🔵 **VARIABLE**    | 3 rules  | Advanced React patterns, useLatest, init-once                   |\n| `9-cache-components.md`                | 🔴 **CRITICAL**    | 4 sections | **Next.js 16+ Only**: `use cache`, `cacheLife`, PPR, `cacheTag` |\n\n**Total: 57 rules across 8 categories**\n\n---\n\n## 🚀 Quick Decision Tree\n\n**What's your performance issue?**\n\n```\n🐌 Slow page loads \u002F Long Time to Interactive\n  → Read Section 1: Eliminating Waterfalls\n  → Read Section 2: Bundle Size Optimization\n\n📦 Large bundle size (> 200KB)\n  → Read Section 2: Bundle Size Optimization\n  → Check: Dynamic imports, barrel imports, tree-shaking\n\n🖥️ Slow Server-Side Rendering\n  → Read Section 3: Server-Side Performance\n  → Check: Parallel data fetching, streaming\n\n🔄 Too many re-renders \u002F UI lag\n  → Read Section 5: Re-render Optimization\n  → Check: React.memo, useMemo, useCallback\n\n🎨 Rendering performance issues\n  → Read Section 6: Rendering Performance\n  → Check: Virtualization, layout thrashing\n\n🌐 Client-side data fetching problems\n  → Read Section 4: Client-Side Data Fetching\n  → Check: SWR deduplication, localStorage\n\n✨ Need advanced patterns\n  → Read Section 8: Advanced Patterns\n\n🚀 **Next.js 16+ Performance (Caching & PPR)**\n  → Read Section 9: Cache Components\n```\n\n---\n\n## 📊 Impact Priority Guide\n\n**Use this order when doing comprehensive optimization:**\n\n```\n1️⃣ CRITICAL (Biggest Gains - Do First):\n   ├─ Section 1: Eliminating Waterfalls\n   │  └─ Each waterfall adds full network latency (100-500ms+)\n   └─ Section 2: Bundle Size Optimization\n      └─ Affects Time to Interactive and Largest Contentful Paint\n\n2️⃣ HIGH (Significant Impact - Do Second):\n   └─ Section 3: Server-Side Performance\n      └─ Eliminates server-side waterfalls, faster response times\n\n3️⃣ MEDIUM (Moderate Gains - Do Third):\n   ├─ Section 4: Client-Side Data Fetching\n   ├─ Section 5: Re-render Optimization\n   └─ Section 6: Rendering Performance\n\n4️⃣ LOW (Polish - Do Last):\n   ├─ Section 7: JavaScript Performance\n   └─ Section 8: Advanced Patterns\n\n🔥 **MODERN (Next.js 16+):**\n   └─ Section 9: Cache Components (Replaces most traditional revalidation)\n```\n\n---\n\n## 🔗 Related Skills\n\n| Need                    | Skill                             |\n| ----------------------- | --------------------------------- |\n| API design patterns     | `@[skills\u002Fapi-patterns]`          |\n| Database optimization   | `@[skills\u002Fdatabase-design]`       |\n| Testing strategies      | `@[skills\u002Ftesting-patterns]`      |\n| UI\u002FUX design principles | `@[skills\u002Ffrontend-design]`       |\n| TypeScript patterns     | `@[skills\u002Ftypescript-expert]`     |\n| Deployment & DevOps     | `@[skills\u002Fdeployment-procedures]` |\n\n---\n\n## ✅ Performance Review Checklist\n\nBefore shipping to production:\n\n**Critical (Must Fix):**\n\n- [ ] No sequential data fetching (waterfalls eliminated)\n- [ ] Bundle size \u003C 200KB for main bundle\n- [ ] No barrel imports in app code\n- [ ] Dynamic imports used for large components\n- [ ] Parallel data fetching where possible\n\n**High Priority:**\n\n- [ ] Server components used where appropriate\n- [ ] API routes optimized (no N+1 queries)\n- [ ] Suspense boundaries for data fetching\n- [ ] Static generation used where possible\n\n**Medium Priority:**\n\n- [ ] Expensive computations memoized\n- [ ] List rendering virtualized (if > 100 items)\n- [ ] Images optimized with next\u002Fimage\n- [ ] No unnecessary re-renders\n\n**Low Priority (Polish):**\n\n- [ ] Hot path loops optimized\n- [ ] RegExp patterns hoisted\n- [ ] Property access cached in loops\n\n---\n\n## ❌ Anti-Patterns (Common Mistakes)\n\n**DON'T:**\n\n- ❌ Use sequential `await` for independent operations\n- ❌ Import entire libraries when you need one function\n- ❌ Use barrel exports (`index.ts` re-exports) in app code\n- ❌ Skip dynamic imports for large components\u002Flibraries\n- ❌ Fetch data in useEffect without deduplication\n- ❌ Forget to memoize expensive computations\n- ❌ Use client components when server components work\n\n**DO:**\n\n- ✅ Fetch data in parallel with `Promise.all()`\n- ✅ Use dynamic imports: `const Comp = dynamic(() => import('.\u002FHeavy'))`\n- ✅ Import directly: `import { specific } from 'library\u002Fspecific'`\n- ✅ Use Suspense boundaries for better UX\n- ✅ Leverage React Server Components\n- ✅ Measure performance before optimizing\n- ✅ Use Next.js built-in optimizations (next\u002Fimage, next\u002Ffont)\n\n---\n\n## 🎯 How to Use This Skill\n\n### For New Features:\n\n1. Check **Section 1 & 2** while building (prevent waterfalls, keep bundle small)\n2. Use server components by default (Section 3)\n3. Apply memoization for expensive operations (Section 5)\n\n### For Performance Reviews:\n\n1. Start with **Section 1** (waterfalls = biggest impact)\n2. Then **Section 2** (bundle size)\n3. Then **Section 3** (server-side)\n4. Finally other sections as needed\n\n### For Debugging Slow Performance:\n\n1. Identify the symptom (slow load, lag, etc.)\n2. Use Quick Decision Tree above\n3. Read relevant section\n4. Apply fixes in priority order\n\n---\n\n## 📚 Learning Path\n\n**Beginner (Focus on Critical):**\n→ Section 1: Eliminating Waterfalls\n→ Section 2: Bundle Size Optimization\n\n**Intermediate (Add High Priority):**\n→ Section 3: Server-Side Performance\n→ Section 5: Re-render Optimization\n\n**Advanced (Full Optimization):**\n→ All sections + Section 8: Advanced Patterns\n\n---\n\n## 🔍 Validation Script\n\n| Script                                 | Purpose                     | Command                                                      |\n| -------------------------------------- | --------------------------- | ------------------------------------------------------------ |\n| `scripts\u002Freact_performance_checker.py` | Automated performance audit | `python scripts\u002Freact_performance_checker.py \u003Cproject_path>` |\n\n---\n\n## 📖 Section Details\n\n### Section 1: Eliminating Waterfalls (CRITICAL)\n\n**Impact:** Each waterfall adds 100-500ms+ latency\n**Key Concepts:** Parallel fetching, Promise.all(), Suspense boundaries, preloading\n\n### Section 2: Bundle Size Optimization (CRITICAL)\n\n**Impact:** Directly affects Time to Interactive, Largest Contentful Paint\n**Key Concepts:** Dynamic imports, tree-shaking, barrel import avoidance\n\n### Section 3: Server-Side Performance (HIGH)\n\n**Impact:** Faster server responses, better SEO\n**Key Concepts:** Parallel server fetching, streaming, API route optimization\n\n### Section 4: Client-Side Data Fetching (MEDIUM-HIGH)\n\n**Impact:** Reduces redundant requests, better UX\n**Key Concepts:** SWR deduplication, localStorage caching, event listeners\n\n### Section 5: Re-render Optimization (MEDIUM)\n\n**Impact:** Smoother UI, less wasted computation\n**Key Concepts:** React.memo, useMemo, useCallback, component structure\n\n### Section 6: Rendering Performance (MEDIUM)\n\n**Impact:** Better rendering efficiency\n**Key Concepts:** Virtualization, image optimization, layout thrashing\n\n### Section 7: JavaScript Performance (LOW-MEDIUM)\n\n**Impact:** Incremental improvements in hot paths\n**Key Concepts:** Loop optimization, caching, RegExp hoisting\n\n### Section 8: Advanced Patterns (VARIABLE)\n\n**Impact:** Specific use cases\n**Key Concepts:** useLatest hook, init-once patterns, event handler refs\n\n---\n\n## 🎓 Best Practices Summary\n\n**Golden Rules:**\n\n1. **Measure first** - Use React DevTools Profiler, Chrome DevTools\n2. **Biggest impact first** - Waterfalls → Bundle → Server → Micro\n3. **Don't over-optimize** - Focus on real bottlenecks\n4. **Use platform features** - Next.js has optimizations built-in\n5. **Think about users** - Real-world conditions matter\n\n**Performance Mindset:**\n\n- Every `await` in sequence = potential waterfall\n- Every `import` = potential bundle bloat\n- Every re-render = wasted computation (if unnecessary)\n- Server components = less JavaScript to ship\n- Measure, don't guess\n\n---\n\n**Source:** Vercel Engineering\n**Date:** January 2026\n**Version:** 1.0.0\n**Total Rules:** 57 across 8 categories\n","# Next.js & React Performance Expert\n\n> **From Vercel Engineering** - 57 optimization rules prioritized by impact\n> **Philosophy:** Eliminate waterfalls first, optimize bundles second, then micro-optimize.\n\n---\n\n## 🎯 Selective Reading Rule (MANDATORY)\n\n**Read ONLY sections relevant to your task!** Check the content map below and load what you need.\n\n> 🔴 **For performance reviews: Start with CRITICAL sections (1-2), then move to HIGH\u002FMEDIUM.**\n\n---\n\n## 📑 Content Map\n\n| File                                    | Impact             | Rules    | When to Read                                                    |\n| --------------------------------------- | ------------------ | -------- | --------------------------------------------------------------- |\n| `1-async-eliminating-waterfalls.md`     | 🔴 **CRITICAL**    | 5 rules  | Slow page loads, sequential API calls, data fetching waterfalls |\n| `2-bundle-bundle-size-optimization.md`  | 🔴 **CRITICAL**    | 5 rules  | Large bundle size, slow Time to Interactive, First Load issues  |\n| `3-server-server-side-performance.md`   | 🟠 **HIGH**        | 7 rules  | Slow SSR, API route optimization, server-side waterfalls        |\n| `4-client-client-side-data-fetching.md` | 🟡 **MEDIUM-HIGH** | 4 rules  | Client data management, SWR patterns, deduplication             |\n| `5-rerender-re-render-optimization.md`  | 🟡 **MEDIUM**      | 12 rules | Excessive re-renders, React performance, memoization            |\n| `6-rendering-rendering-performance.md`  | 🟡 **MEDIUM**      | 9 rules  | Rendering bottlenecks, virtualization, image optimization       |\n| `7-js-javascript-performance.md`        | ⚪ **LOW-MEDIUM**  | 12 rules | Micro-optimizations, caching, loop performance                  |\n| `8-advanced-advanced-patterns.md`       | 🔵 **VARIABLE**    | 3 rules  | Advanced React patterns, useLatest, init-once                   |\n| `9-cache-components.md`                | 🔴 **CRITICAL**    | 4 sections | **Next.js 16+ Only**: `use cache`, `cacheLife`, PPR, `cacheTag` |\n\n**Total: 57 rules across 8 categories**\n\n---\n\n## 🚀 Quick Decision Tree\n\n**What's your performance issue?**\n\n```\n🐌 Slow page loads \u002F Long Time to Interactive\n  → Read Section 1: Eliminating Waterfalls\n  → Read Section 2: Bundle Size Optimization\n\n📦 Large bundle size (> 200KB)\n  → Read Section 2: Bundle Size Optimization\n  → Check: Dynamic imports, barrel imports, tree-shaking\n\n🖥️ Slow Server-Side Rendering\n  → Read Section 3: Server-Side Performance\n  → Check: Parallel data fetching, streaming\n\n🔄 Too many re-renders \u002F UI lag\n  → Read Section 5: Re-render Optimization\n  → Check: React.memo, useMemo, useCallback\n\n🎨 Rendering performance issues\n  → Read Section 6: Rendering Performance\n  → Check: Virtualization, layout thrashing\n\n🌐 Client-side data fetching problems\n  → Read Section 4: Client-Side Data Fetching\n  → Check: SWR deduplication, localStorage\n\n✨ Need advanced patterns\n  → Read Section 8: Advanced Patterns\n\n🚀 **Next.js 16+ Performance (Caching & PPR)**\n  → Read Section 9: Cache Components\n```\n\n---\n\n## 📊 Impact Priority Guide\n\n**Use this order when doing comprehensive optimization:**\n\n```\n1️⃣ CRITICAL (Biggest Gains - Do First):\n   ├─ Section 1: Eliminating Waterfalls\n   │  └─ Each waterfall adds full network latency (100-500ms+)\n   └─ Section 2: Bundle Size Optimization\n      └─ Affects Time to Interactive and Largest Contentful Paint\n\n2️⃣ HIGH (Significant Impact - Do Second):\n   └─ Section 3: Server-Side Performance\n      └─ Eliminates server-side waterfalls, faster response times\n\n3️⃣ MEDIUM (Moderate Gains - Do Third):\n   ├─ Section 4: Client-Side Data Fetching\n   ├─ Section 5: Re-render Optimization\n   └─ Section 6: Rendering Performance\n\n4️⃣ LOW (Polish - Do Last):\n   ├─ Section 7: JavaScript Performance\n   └─ Section 8: Advanced Patterns\n\n🔥 **MODERN (Next.js 16+):**\n   └─ Section 9: Cache Components (Replaces most traditional revalidation)\n```\n\n---\n\n## 🔗 Related Skills\n\n| Need                    | Skill                             |\n| ----------------------- | --------------------------------- |\n| API design patterns     | `@[skills\u002Fapi-patterns]`          |\n| Database optimization   | `@[skills\u002Fdatabase-design]`       |\n| Testing strategies      | `@[skills\u002Ftesting-patterns]`      |\n| UI\u002FUX design principles | `@[skills\u002Ffrontend-design]`       |\n| TypeScript patterns     | `@[skills\u002Ftypescript-expert]`     |\n| Deployment & DevOps     | `@[skills\u002Fdeployment-procedures]` |\n\n---\n\n## ✅ Performance Review Checklist\n\nBefore shipping to production:\n\n**Critical (Must Fix):**\n\n- [ ] No sequential data fetching (waterfalls eliminated)\n- [ ] Bundle size \u003C 200KB for main bundle\n- [ ] No barrel imports in app code\n- [ ] Dynamic imports used for large components\n- [ ] Parallel data fetching where possible\n\n**High Priority:**\n\n- [ ] Server components used where appropriate\n- [ ] API routes optimized (no N+1 queries)\n- [ ] Suspense boundaries for data fetching\n- [ ] Static generation used where possible\n\n**Medium Priority:**\n\n- [ ] Expensive computations memoized\n- [ ] List rendering virtualized (if > 100 items)\n- [ ] Images optimized with next\u002Fimage\n- [ ] No unnecessary re-renders\n\n**Low Priority (Polish):**\n\n- [ ] Hot path loops optimized\n- [ ] RegExp patterns hoisted\n- [ ] Property access cached in loops\n\n---\n\n## ❌ Anti-Patterns (Common Mistakes)\n\n**DON'T:**\n\n- ❌ Use sequential `await` for independent operations\n- ❌ Import entire libraries when you need one function\n- ❌ Use barrel exports (`index.ts` re-exports) in app code\n- ❌ Skip dynamic imports for large components\u002Flibraries\n- ❌ Fetch data in useEffect without deduplication\n- ❌ Forget to memoize expensive computations\n- ❌ Use client components when server components work\n\n**DO:**\n\n- ✅ Fetch data in parallel with `Promise.all()`\n- ✅ Use dynamic imports: `const Comp = dynamic(() => import('.\u002FHeavy'))`\n- ✅ Import directly: `import { specific } from 'library\u002Fspecific'`\n- ✅ Use Suspense boundaries for better UX\n- ✅ Leverage React Server Components\n- ✅ Measure performance before optimizing\n- ✅ Use Next.js built-in optimizations (next\u002Fimage, next\u002Ffont)\n\n---\n\n## 🎯 How to Use This Skill\n\n### For New Features:\n\n1. Check **Section 1 & 2** while building (prevent waterfalls, keep bundle small)\n2. Use server components by default (Section 3)\n3. Apply memoization for expensive operations (Section 5)\n\n### For Performance Reviews:\n\n1. Start with **Section 1** (waterfalls = biggest impact)\n2. Then **Section 2** (bundle size)\n3. Then **Section 3** (server-side)\n4. Finally other sections as needed\n\n### For Debugging Slow Performance:\n\n1. Identify the symptom (slow load, lag, etc.)\n2. Use Quick Decision Tree above\n3. Read relevant section\n4. Apply fixes in priority order\n\n---\n\n## 📚 Learning Path\n\n**Beginner (Focus on Critical):**\n→ Section 1: Eliminating Waterfalls\n→ Section 2: Bundle Size Optimization\n\n**Intermediate (Add High Priority):**\n→ Section 3: Server-Side Performance\n→ Section 5: Re-render Optimization\n\n**Advanced (Full Optimization):**\n→ All sections + Section 8: Advanced Patterns\n\n---\n\n## 🔍 Validation Script\n\n| Script                                 | Purpose                     | Command                                                      |\n| -------------------------------------- | --------------------------- | ------------------------------------------------------------ |\n| `scripts\u002Freact_performance_checker.py` | Automated performance audit | `python scripts\u002Freact_performance_checker.py \u003Cproject_path>` |\n\n---\n\n## 📖 Section Details\n\n### Section 1: Eliminating Waterfalls (CRITICAL)\n\n**Impact:** Each waterfall adds 100-500ms+ latency\n**Key Concepts:** Parallel fetching, Promise.all(), Suspense boundaries, preloading\n\n### Section 2: Bundle Size Optimization (CRITICAL)\n\n**Impact:** Directly affects Time to Interactive, Largest Contentful Paint\n**Key Concepts:** Dynamic imports, tree-shaking, barrel import avoidance\n\n### Section 3: Server-Side Performance (HIGH)\n\n**Impact:** Faster server responses, better SEO\n**Key Concepts:** Parallel server fetching, streaming, API route optimization\n\n### Section 4: Client-Side Data Fetching (MEDIUM-HIGH)\n\n**Impact:** Reduces redundant requests, better UX\n**Key Concepts:** SWR deduplication, localStorage caching, event listeners\n\n### Section 5: Re-render Optimization (MEDIUM)\n\n**Impact:** Smoother UI, less wasted computation\n**Key Concepts:** React.memo, useMemo, useCallback, component structure\n\n### Section 6: Rendering Performance (MEDIUM)\n\n**Impact:** Better rendering efficiency\n**Key Concepts:** Virtualization, image optimization, layout thrashing\n\n### Section 7: JavaScript Performance (LOW-MEDIUM)\n\n**Impact:** Incremental improvements in hot paths\n**Key Concepts:** Loop optimization, caching, RegExp hoisting\n\n### Section 8: Advanced Patterns (VARIABLE)\n\n**Impact:** Specific use cases\n**Key Concepts:** useLatest hook, init-once patterns, event handler refs\n\n---\n\n## 🎓 Best Practices Summary\n\n**Golden Rules:**\n\n1. **Measure first** - Use React DevTools Profiler, Chrome DevTools\n2. **Biggest impact first** - Waterfalls → Bundle → Server → Micro\n3. **Don't over-optimize** - Focus on real bottlenecks\n4. **Use platform features** - Next.js has optimizations built-in\n5. **Think about users** - Real-world conditions matter\n\n**Performance Mindset:**\n\n- Every `await` in sequence = potential waterfall\n- Every `import` = potential bundle bloat\n- Every re-render = wasted computation (if unnecessary)\n- Server components = less JavaScript to ship\n- Measure, don't guess\n\n---\n\n**Source:** Vercel Engineering\n**Date:** January 2026\n**Version:** 1.0.0\n**Total Rules:** 57 across 8 categories\n",{"name":5,"description":7,"allowed-tools":49},"Read, Write, Edit, Glob, Grep, Bash","main","923c514d4d5e15bbfd65ec7eaf949a997679aa3e","src\u002Fskills\u002Fdomain\u002Fnextjs-react-expert","https:\u002F\u002Fgithub.com\u002Fyqecea\u002Fgem-swarm","https:\u002F\u002Fgithub.com\u002Fyqecea","15 y.o Data Science,Student","2026-04-26 20:00:27",{"source":8,"skillName":5,"commands":58,"prompt":68,"zipAvailable":69},[59,62,65],{"tool":60,"command":61},"npx","npx skills add yqecea\u002Fgem-swarm --skill react-best-practices",{"tool":63,"command":64},"bunx","bunx skills add yqecea\u002Fgem-swarm --skill react-best-practices",{"tool":66,"command":67},"pnpm","pnpm dlx skills add yqecea\u002Fgem-swarm --skill react-best-practices","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fyqecea\u002Fgem-swarm\u002Fblob\u002Fmain\u002Fsrc\u002Fskills\u002Fdomain\u002Fnextjs-react-expert\u002FSKILL.md",true,[71,77,81,85,89,93,97,101,105,109,115],{"path":72,"resourceType":73,"resourceTypeDesc":74,"sizeBytes":75,"sourceHtmlUrl":76},"1-async-eliminating-waterfalls.md","REFERENCE","参考文档",8823,"https:\u002F\u002Fgithub.com\u002Fyqecea\u002Fgem-swarm\u002Fblob\u002Fmain\u002Fsrc\u002Fskills\u002Fdomain\u002Fnextjs-react-expert\u002F1-async-eliminating-waterfalls.md",{"path":78,"resourceType":73,"resourceTypeDesc":74,"sizeBytes":79,"sourceHtmlUrl":80},"2-bundle-bundle-size-optimization.md",6269,"https:\u002F\u002Fgithub.com\u002Fyqecea\u002Fgem-swarm\u002Fblob\u002Fmain\u002Fsrc\u002Fskills\u002Fdomain\u002Fnextjs-react-expert\u002F2-bundle-bundle-size-optimization.md",{"path":82,"resourceType":73,"resourceTypeDesc":74,"sizeBytes":83,"sourceHtmlUrl":84},"3-server-server-side-performance.md",12860,"https:\u002F\u002Fgithub.com\u002Fyqecea\u002Fgem-swarm\u002Fblob\u002Fmain\u002Fsrc\u002Fskills\u002Fdomain\u002Fnextjs-react-expert\u002F3-server-server-side-performance.md",{"path":86,"resourceType":73,"resourceTypeDesc":74,"sizeBytes":87,"sourceHtmlUrl":88},"4-client-client-side-data-fetching.md",6818,"https:\u002F\u002Fgithub.com\u002Fyqecea\u002Fgem-swarm\u002Fblob\u002Fmain\u002Fsrc\u002Fskills\u002Fdomain\u002Fnextjs-react-expert\u002F4-client-client-side-data-fetching.md",{"path":90,"resourceType":73,"resourceTypeDesc":74,"sizeBytes":91,"sourceHtmlUrl":92},"5-rerender-re-render-optimization.md",15871,"https:\u002F\u002Fgithub.com\u002Fyqecea\u002Fgem-swarm\u002Fblob\u002Fmain\u002Fsrc\u002Fskills\u002Fdomain\u002Fnextjs-react-expert\u002F5-rerender-re-render-optimization.md",{"path":94,"resourceType":73,"resourceTypeDesc":74,"sizeBytes":95,"sourceHtmlUrl":96},"6-rendering-rendering-performance.md",10353,"https:\u002F\u002Fgithub.com\u002Fyqecea\u002Fgem-swarm\u002Fblob\u002Fmain\u002Fsrc\u002Fskills\u002Fdomain\u002Fnextjs-react-expert\u002F6-rendering-rendering-performance.md",{"path":98,"resourceType":73,"resourceTypeDesc":74,"sizeBytes":99,"sourceHtmlUrl":100},"7-js-javascript-performance.md",17360,"https:\u002F\u002Fgithub.com\u002Fyqecea\u002Fgem-swarm\u002Fblob\u002Fmain\u002Fsrc\u002Fskills\u002Fdomain\u002Fnextjs-react-expert\u002F7-js-javascript-performance.md",{"path":102,"resourceType":73,"resourceTypeDesc":74,"sizeBytes":103,"sourceHtmlUrl":104},"8-advanced-advanced-patterns.md",3643,"https:\u002F\u002Fgithub.com\u002Fyqecea\u002Fgem-swarm\u002Fblob\u002Fmain\u002Fsrc\u002Fskills\u002Fdomain\u002Fnextjs-react-expert\u002F8-advanced-advanced-patterns.md",{"path":106,"resourceType":73,"resourceTypeDesc":74,"sizeBytes":107,"sourceHtmlUrl":108},"9-cache-components.md",2830,"https:\u002F\u002Fgithub.com\u002Fyqecea\u002Fgem-swarm\u002Fblob\u002Fmain\u002Fsrc\u002Fskills\u002Fdomain\u002Fnextjs-react-expert\u002F9-cache-components.md",{"path":110,"resourceType":111,"resourceTypeDesc":112,"sizeBytes":113,"sourceHtmlUrl":114},"scripts\u002Fconvert_rules.py","SCRIPT","脚本",6631,"https:\u002F\u002Fgithub.com\u002Fyqecea\u002Fgem-swarm\u002Fblob\u002Fmain\u002Fsrc\u002Fskills\u002Fdomain\u002Fnextjs-react-expert\u002Fscripts\u002Fconvert_rules.py",{"path":116,"resourceType":111,"resourceTypeDesc":112,"sizeBytes":117,"sourceHtmlUrl":118},"scripts\u002Freact_performance_checker.py",10051,"https:\u002F\u002Fgithub.com\u002Fyqecea\u002Fgem-swarm\u002Fblob\u002Fmain\u002Fsrc\u002Fskills\u002Fdomain\u002Fnextjs-react-expert\u002Fscripts\u002Freact_performance_checker.py",[120,133,147,158,170,193],{"skillNo":121,"name":122,"nameZh":6,"description":123,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":124,"categories":125,"keywords":126,"publishedAt":44},"01M71C74XVPP23ST10E8MYJZA0","validation","Cross-cutting validation methodology for verifying phase outputs and project integrity","https:\u002F\u002Fgithub.com\u002Fyqecea\u002Fgem-swarm\u002Fblob\u002Fmain\u002Fsrc\u002Fskills\u002Fshared\u002Fvalidation\u002FSKILL.md",[],[122,127,28,128,129,130,131,132],"validation methodology","project","outputs","phase","methodology","integrity",{"skillNo":134,"name":135,"nameZh":6,"description":136,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":137,"categories":138,"keywords":139,"publishedAt":44},"01M71C72PTKRV481M975R3QDDE","session-management","Manages orchestration session state, tracking, and resumption","https:\u002F\u002Fgithub.com\u002Fyqecea\u002Fgem-swarm\u002Fblob\u002Fmain\u002Fsrc\u002Fskills\u002Fshared\u002Fsession-management\u002FSKILL.md",[],[140,141,142,143,144,145,146],"session management","session","management","session state","orchestration","state","tracking",{"skillNo":148,"name":149,"nameZh":6,"description":150,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":151,"categories":152,"keywords":153,"publishedAt":44},"01M71C6ZY1EGM4SGVYT4B2HHD7","implementation-planning","Generates detailed implementation plans from finalized designs","https:\u002F\u002Fgithub.com\u002Fyqecea\u002Fgem-swarm\u002Fblob\u002Fmain\u002Fsrc\u002Fskills\u002Fshared\u002Fimplementation-planning\u002FSKILL.md",[],[154,155,156,157],"planning","implementation","implementation planning","plans",{"skillNo":159,"name":160,"nameZh":6,"description":161,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":162,"categories":163,"keywords":164,"publishedAt":44},"01M71C6XQVGMDFJ50BP5SBDS76","execution","Phase execution methodology for orchestration workflows with error handling and completion protocols","https:\u002F\u002Fgithub.com\u002Fyqecea\u002Fgem-swarm\u002Fblob\u002Fmain\u002Fsrc\u002Fskills\u002Fshared\u002Fexecution\u002FSKILL.md",[],[160,28,131,165,166,144,130,167,168,169],"error","workflows","protocols","error handling","with",{"skillNo":171,"name":172,"nameZh":6,"description":173,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":174,"categories":175,"keywords":184,"publishedAt":44},"01M71C6VY8APWMNK1XEJ3WP7A2","design-dialogue","Guides structured design conversations for complex engineering tasks","https:\u002F\u002Fgithub.com\u002Fyqecea\u002Fgem-swarm\u002Fblob\u002Fmain\u002Fsrc\u002Fskills\u002Fshared\u002Fdesign-dialogue\u002FSKILL.md",[176,179],{"categoryNo":177,"categoryName":178,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000015","视觉设计",{"categoryNo":180,"categoryName":181,"taxonomyType":182,"taxonomyTypeDesc":183},"01JBSEEDCAT000000000000032","设计师","PROFESSION","适用职业",[185,186,187,188,189,28,190,191,192],"dialogue","design","design dialogue","guides","conversations","tasks","engineering","structured",{"skillNo":194,"name":195,"nameZh":6,"description":196,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":197,"categories":198,"keywords":205,"publishedAt":44},"01M71C6R4RJWG3S2R26778TPD8","delegation","Agent delegation best practices for constructing effective subagent prompts with proper scoping","https:\u002F\u002Fgithub.com\u002Fyqecea\u002Fgem-swarm\u002Fblob\u002Fmain\u002Fsrc\u002Fskills\u002Fshared\u002Fdelegation\u002FSKILL.md",[199,202],{"categoryNo":200,"categoryName":201,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000010","后端与接口",{"categoryNo":203,"categoryName":204,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000023","Skill与智能体开发",[195,206,207,28,25,169,208],"subagent","scoping","prompts"]