[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6QJ2TK4V8Z62WW7B1WRZVJA":3,"skill-same:01M6QJ2TK4V8Z62WW7B1WRZVJA":79},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":15,"categories":16,"keywords":25,"publishedAt":46,"linkOnly":47,"markdownContent":48,"markdownBody":49,"frontMatter":50,"refName":53,"commitSha":54,"skillDirectory":55,"forksCount":13,"repositoryHtmlUrl":56,"repositoryHomepageUrl":6,"ownerHtmlUrl":57,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":58,"install":59,"resources":72},"01M6QJ2TK4V8Z62WW7B1WRZVJA","react-performance",null,"Reviews and optimizes React component performance and correctness. Covers stale closures, unnecessary re-renders, useEffect cleanup, state design, debounce\u002Fthrottle, and race conditions. Should be used when the user is concerned about React performance — slow renders, stale closure bugs, or optimizing useMemo\u002FuseCallback usage. Distinguished from frontend-code-review which covers general code quality, this skill focuses specifically on React performance and Hook-related issues.","ImaginerLabs\u002Fskill-manager","ImaginerLabs","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F214277308?v=4","01M6QGGDPNF15RMMT1RCFDH9FN","01M6QGGDTH5BY64DQ123NR8M33",0,"MIT","https:\u002F\u002Fgithub.com\u002FImaginerLabs\u002Fskill-manager\u002Fblob\u002Fmain\u002Fskills\u002Fcoding\u002Freact-performance\u002FSKILL.md",[17,22],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000009","前端开发","SCENARIO","使用场景",{"categoryNo":23,"categoryName":24,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000023","Skill与智能体开发",[26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45],"performance","react","react performance","code-review","closure","bugs","which","usage","reviews","re","hook","coding","frontend","issues","code","cleanup","code quality","component","review","design","2026-11-10 10:12:30",false,"---\nname: react-performance\ndescription: >-\n  Reviews and optimizes React component performance and correctness. Covers stale closures, unnecessary re-renders,\n  useEffect cleanup, state design, debounce\u002Fthrottle, and race conditions.\n  Should be used when the user is concerned about React performance — slow renders, stale closure bugs,\n  or optimizing useMemo\u002FuseCallback usage.\n  Distinguished from frontend-code-review which covers general code quality, this skill focuses specifically\n  on React performance and Hook-related issues.\ncategory: coding\nboundary:\n  vs_frontend-code-review: \"frontend-code-review covers general code quality, this skill focuses specifically on React performance and Hook-related issues\"\n---\n\n# React Performance & Common Pitfalls\n\n## Core Capability\n\nAudit React code for performance issues and prevent common runtime pitfalls. The problems this skill catches are subtle — stale closures silently read outdated values, missing cleanup silently leaks memory, and unnecessary re-renders silently degrade performance. They're easy to miss in regular code review but cause real user-facing bugs.\n\n## Workflow\n\n1. **Stale closure check** — Scan all Hook dependency arrays for missing dependencies\n2. **Render analysis** — Identify unnecessary re-renders, add memo \u002F useMemo \u002F useCallback\n3. **Side effect audit** — Confirm all useEffect have corresponding cleanup\n4. **State rationality** — Check for redundant state or direct state mutation\n5. **High-frequency events** — Confirm debounce\u002Fthrottle is correctly applied\n\n---\n\n## 1. Stale Closure\n\n### The Problem\n\nClosures in function components capture a **snapshot** of variables at creation time. If dependencies aren't correctly declared, the closure reads stale values — and the bug is silent: no error, just wrong behavior.\n\n### Rules\n\n- useEffect \u002F useCallback \u002F useMemo dependency arrays must declare all external variables\n- State updates that depend on the current value must use functional updates `setState(prev => ...)`\n- When you need the latest value in a closure without triggering re-renders, use `useRef`\n- Enable ESLint `react-hooks\u002Fexhaustive-deps` — don't casually `\u002F\u002F eslint-disable`\n\n---\n\n## 2. Render Performance\n\n### Avoid Unnecessary Re-renders\n\n- Pure display sub-components should be wrapped in `React.memo`\n- Object and function props passed to child components should be wrapped in `useMemo` \u002F `useCallback`\n- `useMemo` is for **computationally expensive** derived data; `useCallback` is for **callbacks passed to children**\n- Don't overuse useMemo \u002F useCallback — simple values or functions not passed to children don't need wrapping\n\n### List Rendering\n\n- List `key` must use **stable and unique** business identifiers (e.g., `id`), not array `index` (unless the list is static and never changes)\n\n---\n\n## 3. useEffect Standards\n\n### Side Effect Cleanup\n\n- Event listeners, timers, and subscriptions registered in useEffect must be unregistered in the returned cleanup function\n- Async requests must handle component unmount (AbortController or `isMounted` flag)\n- Avoid making the useEffect callback itself `async` — define an async function inside and call it\n\n---\n\n## 4. State Management\n\n- Never directly mutate state objects or arrays — always return new references\n- Data derivable from existing state should not be stored as separate state (use `useMemo` instead)\n- Multiple related state updates should be merged into a single object or use `useReducer`\n\n---\n\n## 5. High-Frequency Events\n\n- Search input, window resize, scroll listeners must use debounce or throttle\n- Debounce\u002Fthrottle function instances must be kept stable via `useMemo` or `useRef` — never create them directly in the render function\n\n---\n\n## 6. Race Conditions\n\n- Async requests that depend on external parameters must handle races: when the component unmounts or parameters change, ignore the old request's result\n\n---\n\n## Output Format\n\n```markdown\n## React Performance & Standards Check Report\n\n### 1. Stale Closure Check\n\n- Status: ✅ PASS \u002F ⚠️ WARN \u002F ❌ FAIL\n- Issue: [filename\u002Fline]: [description] -> [fix suggestion]\n\n### 2. Render Performance\n\n- **Unnecessary re-renders**: [component name] -> [optimization suggestion]\n- **List key**: ✅ PASS \u002F ❌ FAIL\n\n### 3. useEffect Side Effects\n\n- **Cleanup function**: ✅ Cleaned \u002F ❌ Missing cleanup -> [specific location]\n- **Race handling**: ✅ Handled \u002F ❌ At risk\n\n### 4. State Management\n\n- **Direct mutation**: ✅ PASS \u002F ❌ FAIL -> [specific location]\n- **Redundant state**: [derived data suggestion: switch to useMemo]\n\n### 5. High-Frequency Events\n\n- [event name]: ✅ Debounced \u002F ❌ Missing debounce\n\n### Summary\n\n- Score: ? Excellent \u002F ? Good \u002F ? Needs improvement\n- [ ] Safe to commit \u002F [ ] Fix before commit\n```\n","# React Performance & Common Pitfalls\n\n## Core Capability\n\nAudit React code for performance issues and prevent common runtime pitfalls. The problems this skill catches are subtle — stale closures silently read outdated values, missing cleanup silently leaks memory, and unnecessary re-renders silently degrade performance. They're easy to miss in regular code review but cause real user-facing bugs.\n\n## Workflow\n\n1. **Stale closure check** — Scan all Hook dependency arrays for missing dependencies\n2. **Render analysis** — Identify unnecessary re-renders, add memo \u002F useMemo \u002F useCallback\n3. **Side effect audit** — Confirm all useEffect have corresponding cleanup\n4. **State rationality** — Check for redundant state or direct state mutation\n5. **High-frequency events** — Confirm debounce\u002Fthrottle is correctly applied\n\n---\n\n## 1. Stale Closure\n\n### The Problem\n\nClosures in function components capture a **snapshot** of variables at creation time. If dependencies aren't correctly declared, the closure reads stale values — and the bug is silent: no error, just wrong behavior.\n\n### Rules\n\n- useEffect \u002F useCallback \u002F useMemo dependency arrays must declare all external variables\n- State updates that depend on the current value must use functional updates `setState(prev => ...)`\n- When you need the latest value in a closure without triggering re-renders, use `useRef`\n- Enable ESLint `react-hooks\u002Fexhaustive-deps` — don't casually `\u002F\u002F eslint-disable`\n\n---\n\n## 2. Render Performance\n\n### Avoid Unnecessary Re-renders\n\n- Pure display sub-components should be wrapped in `React.memo`\n- Object and function props passed to child components should be wrapped in `useMemo` \u002F `useCallback`\n- `useMemo` is for **computationally expensive** derived data; `useCallback` is for **callbacks passed to children**\n- Don't overuse useMemo \u002F useCallback — simple values or functions not passed to children don't need wrapping\n\n### List Rendering\n\n- List `key` must use **stable and unique** business identifiers (e.g., `id`), not array `index` (unless the list is static and never changes)\n\n---\n\n## 3. useEffect Standards\n\n### Side Effect Cleanup\n\n- Event listeners, timers, and subscriptions registered in useEffect must be unregistered in the returned cleanup function\n- Async requests must handle component unmount (AbortController or `isMounted` flag)\n- Avoid making the useEffect callback itself `async` — define an async function inside and call it\n\n---\n\n## 4. State Management\n\n- Never directly mutate state objects or arrays — always return new references\n- Data derivable from existing state should not be stored as separate state (use `useMemo` instead)\n- Multiple related state updates should be merged into a single object or use `useReducer`\n\n---\n\n## 5. High-Frequency Events\n\n- Search input, window resize, scroll listeners must use debounce or throttle\n- Debounce\u002Fthrottle function instances must be kept stable via `useMemo` or `useRef` — never create them directly in the render function\n\n---\n\n## 6. Race Conditions\n\n- Async requests that depend on external parameters must handle races: when the component unmounts or parameters change, ignore the old request's result\n\n---\n\n## Output Format\n\n```markdown\n## React Performance & Standards Check Report\n\n### 1. Stale Closure Check\n\n- Status: ✅ PASS \u002F ⚠️ WARN \u002F ❌ FAIL\n- Issue: [filename\u002Fline]: [description] -> [fix suggestion]\n\n### 2. Render Performance\n\n- **Unnecessary re-renders**: [component name] -> [optimization suggestion]\n- **List key**: ✅ PASS \u002F ❌ FAIL\n\n### 3. useEffect Side Effects\n\n- **Cleanup function**: ✅ Cleaned \u002F ❌ Missing cleanup -> [specific location]\n- **Race handling**: ✅ Handled \u002F ❌ At risk\n\n### 4. State Management\n\n- **Direct mutation**: ✅ PASS \u002F ❌ FAIL -> [specific location]\n- **Redundant state**: [derived data suggestion: switch to useMemo]\n\n### 5. High-Frequency Events\n\n- [event name]: ✅ Debounced \u002F ❌ Missing debounce\n\n### Summary\n\n- Score: ? Excellent \u002F ? Good \u002F ? Needs improvement\n- [ ] Safe to commit \u002F [ ] Fix before commit\n```\n",{"name":5,"boundary":51,"category":37,"description":7},{"vs_frontend-code-review":52},"frontend-code-review covers general code quality, this skill focuses specifically on React performance and Hook-related issues","main","b9a52d8e27455bdad953d64928696d028223ea1b","skills\u002Fcoding\u002Freact-performance","https:\u002F\u002Fgithub.com\u002FImaginerLabs\u002Fskill-manager","https:\u002F\u002Fgithub.com\u002FImaginerLabs","2026-04-18 16:27:13",{"source":8,"skillName":5,"commands":60,"prompt":70,"zipAvailable":71},[61,64,67],{"tool":62,"command":63},"npx","npx skills add ImaginerLabs\u002Fskill-manager --skill react-performance",{"tool":65,"command":66},"bunx","bunx skills add ImaginerLabs\u002Fskill-manager --skill react-performance",{"tool":68,"command":69},"pnpm","pnpm dlx skills add ImaginerLabs\u002Fskill-manager --skill react-performance","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FImaginerLabs\u002Fskill-manager\u002Fblob\u002Fmain\u002Fskills\u002Fcoding\u002Freact-performance\u002FSKILL.md",true,[73],{"path":74,"resourceType":75,"resourceTypeDesc":76,"sizeBytes":77,"sourceHtmlUrl":78},"references\u002Fcode-examples.md","REFERENCE","参考文档",4847,"https:\u002F\u002Fgithub.com\u002FImaginerLabs\u002Fskill-manager\u002Fblob\u002Fmain\u002Fskills\u002Fcoding\u002Freact-performance\u002Freferences\u002Fcode-examples.md",[80,111,132,160,191,215],{"skillNo":81,"name":82,"nameZh":6,"description":83,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":84,"categories":85,"keywords":92,"publishedAt":46},"01M6QJCB2SD5KHC41ZDQC0GA1T","meeting-minutes","Generate concise, actionable meeting minutes for internal meetings. Includes metadata, attendees, agenda, decisions, action items (owner + due date), and follow-up steps.","https:\u002F\u002Fgithub.com\u002FImaginerLabs\u002Fskill-manager\u002Fblob\u002Fmain\u002Fskills\u002Fwriting\u002Fmeeting-minutes\u002FSKILL.md",[86,87],{"categoryNo":23,"categoryName":24,"taxonomyType":20,"taxonomyTypeDesc":21},{"categoryNo":88,"categoryName":89,"taxonomyType":90,"taxonomyTypeDesc":91},"01JBSEEDCAT000000000000034","行政与办公人员","PROFESSION","适用职业",[93,94,95,96,97,98,99,100,101,102,82,53,103,104,105,106,107,108,109,110],"meeting minutes","meeting","minutes","writing","github","copilot","generate","decisions","meetings","up","agenda","actionable","concise","follow-up","tree","true","action","for",{"skillNo":112,"name":113,"nameZh":6,"description":114,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":115,"categories":116,"keywords":117,"publishedAt":46},"01M6QJC71RRGTGNNFEHJG6S20G","documentation-writer","Diátaxis Documentation Expert. An expert technical writer specializing in creating high-quality software documentation, guided by the principles and structure of the Diátaxis technical documentation authoring framework.","https:\u002F\u002Fgithub.com\u002FImaginerLabs\u002Fskill-manager\u002Fblob\u002Fmain\u002Fskills\u002Fwriting\u002Fdocumentation-writer\u002FSKILL.md",[],[118,119,120,96,97,98,121,122,123,124,125,126,53,127,128,129,130,107,108,131],"documentation","documentation writer","writer","https","quality","technical","technical writer","expert","documentation expert","structure","authoring","software","principles","high",{"skillNo":133,"name":134,"nameZh":6,"description":135,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":136,"categories":137,"keywords":145,"publishedAt":46},"01M6QJC0V3C7C4R9768J1AJYWY","doc-coauthoring","Guide users through a structured workflow for co-authoring documentation. Use when user wants to write documentation, proposals, technical specs, decision docs, or similar structured content. This workflow helps users efficiently transfer context, refine content through iteration, and verify the doc works for readers. Trigger when user mentions writing docs, creating proposals, drafting specs, or similar documentation tasks.","https:\u002F\u002Fgithub.com\u002FImaginerLabs\u002Fskill-manager\u002Fblob\u002Fmain\u002Fskills\u002Fwriting\u002Fdoc-coauthoring\u002FSKILL.md",[138,141,142],{"categoryNo":139,"categoryName":140,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000018","写作与文案",{"categoryNo":23,"categoryName":24,"taxonomyType":20,"taxonomyTypeDesc":21},{"categoryNo":143,"categoryName":144,"taxonomyType":90,"taxonomyTypeDesc":91},"01JBSEEDCAT000000000000036","内容创作者",[146,147,96,148,149,118,150,151,152,153,154,155,53,156,157,128,158,159,107,110],"doc coauthoring","doc","workflow","official","tasks","decision","write","context","proposals","guide","refine","iteration","trigger","co",{"skillNo":161,"name":162,"nameZh":6,"description":163,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":164,"categories":165,"keywords":176,"publishedAt":46},"01M6QJBJ0YPVEWGEXZH3PJRRTT","code-review-workflow","Executes comprehensive 4-phase code review: basic review, quality check, bundle analysis, and test coverage. Should be used when the user mentions comprehensive code review, checking code quality, or reviewing staged changes with multi-phase analysis. This is the comprehensive review workflow, distinct from focused skills like frontend-code-review, staged-code-review, or code-change-test-designer.","https:\u002F\u002Fgithub.com\u002FImaginerLabs\u002Fskill-manager\u002Fblob\u002Fmain\u002Fskills\u002Ftesting\u002Fcode-review-workflow\u002FSKILL.md",[166,169,172,173],{"categoryNo":167,"categoryName":168,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000007","代码审查",{"categoryNo":170,"categoryName":171,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000008","测试与质量",{"categoryNo":23,"categoryName":24,"taxonomyType":20,"taxonomyTypeDesc":21},{"categoryNo":174,"categoryName":175,"taxonomyType":90,"taxonomyTypeDesc":91},"01JBSEEDCAT000000000000030","开发工程师",[177,44,148,40,178,179,38,180,181,42,29,182,183,184,185,186,187,188,189,190],"code review","code review workflow","testing","test","change","analysis","check","coverage","quality check","basic","multi","comprehensive code review","with","phase",{"skillNo":192,"name":193,"nameZh":6,"description":194,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":195,"categories":196,"keywords":206,"publishedAt":46},"01M6QJB7XNHV3VEEQF4W7FMWF6","code-change-test-designer","Analyzes code changes and designs comprehensive test cases. Reads diffs, summarizes capability changes, and designs test cases covering main flows and edge cases. Should be used when the user mentions test coverage, designing tests for code changes, or analyzing diff\u002Fcommit for testing purposes. Distinguished from code-review-workflow which provides comprehensive review, this skill focuses on test case design for code changes.","https:\u002F\u002Fgithub.com\u002FImaginerLabs\u002Fskill-manager\u002Fblob\u002Fmain\u002Fskills\u002Ftesting\u002Fcode-change-test-designer\u002FSKILL.md",[197,198,201,202,203],{"categoryNo":170,"categoryName":171,"taxonomyType":20,"taxonomyTypeDesc":21},{"categoryNo":199,"categoryName":200,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000015","视觉设计",{"categoryNo":23,"categoryName":24,"taxonomyType":20,"taxonomyTypeDesc":21},{"categoryNo":174,"categoryName":175,"taxonomyType":90,"taxonomyTypeDesc":91},{"categoryNo":204,"categoryName":205,"taxonomyType":90,"taxonomyTypeDesc":91},"01JBSEEDCAT000000000000032","设计师",[180,181,40,207,208,179,45,209,148,210,29,211,184,212,53,213,214,32,110,190],"designer","code change test designer","diffs","commit","edge","diff","tests","flows",{"skillNo":216,"name":217,"nameZh":6,"description":218,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":219,"categories":220,"keywords":222,"publishedAt":46},"01M6QJB195WD7DCJWDMKWKB29S","skill-creator","Create new skills, modify and improve existing skills, and measure skill performance. Use when users want to create a skill from scratch, edit, or optimize an existing skill, run evals to test a skill, benchmark skill performance with variance analysis, or optimize a skill's description for better triggering accuracy.","https:\u002F\u002Fgithub.com\u002FImaginerLabs\u002Fskill-manager\u002Fblob\u002Fmain\u002Fskills\u002Fmeta-skills\u002Fskill-creator\u002FSKILL.md",[221],{"categoryNo":23,"categoryName":24,"taxonomyType":20,"taxonomyTypeDesc":21},[223,224,26,225,149,226,227,228,229,230,182,231,232,233,53,234,235,107,110,217],"skill creator","creator","run evals","variance analysis","create","run","benchmark","Meta","improve","edit","evals","optimize","existing skill"]