[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6QJ2AR7BBM68K2FJEWT0X1E":3,"skill-same:01M6QJ2AR7BBM68K2FJEWT0X1E":87},{"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":28,"publishedAt":49,"linkOnly":50,"markdownContent":51,"markdownBody":52,"frontMatter":53,"refName":57,"commitSha":58,"skillDirectory":59,"forksCount":13,"repositoryHtmlUrl":60,"repositoryHomepageUrl":6,"ownerHtmlUrl":61,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":62,"install":63,"resources":76},"01M6QJ2AR7BBM68K2FJEWT0X1E","react-component-extraction",null,"Extracts reusable UI or stateful logic into independent components or custom Hooks. Analyzes context dependencies, evaluates extraction boundaries, and ensures zero breakage for existing callers. Should be used when the user wants to extract, split, or isolate a piece of React code — creating reusable components, custom Hooks, or separating concerns within a large component. Distinguished from react-component-refactor which restructures the entire component, this skill focuses on extracting specific reusable pieces.","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-component-extraction\u002FSKILL.md",[17,22,25],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000007","代码审查","SCENARIO","使用场景",{"categoryNo":23,"categoryName":24,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000009","前端开发",{"categoryNo":26,"categoryName":27,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000023","Skill与智能体开发",[29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48],"react","react component extraction","react component","component extraction","extraction","component","ZeRO","code","hooks","reusable","dependencies","logic","extracting","split","which","for","stateful","Existing","custom","components","2026-11-10 10:12:30",false,"---\nname: react-component-extraction\ndescription: >-\n  Extracts reusable UI or stateful logic into independent components or custom Hooks. Analyzes context\n  dependencies, evaluates extraction boundaries, and ensures zero breakage for existing callers.\n  Should be used when the user wants to extract, split, or isolate a piece of React code — creating\n  reusable components, custom Hooks, or separating concerns within a large component.\n  Distinguished from react-component-refactor which restructures the entire component, this skill\n  focuses on extracting specific reusable pieces.\ncategory: coding\nboundary:\n  vs_react-component-refactor: \"react-component-refactor restructures the entire component, this skill extracts specific reusable pieces\"\n---\n\n# React Component & Logic Extraction\n\n## Core Capability\n\nSystematically analyze a target logic's external dependencies, evaluate extraction boundaries, design sensible component\u002FHook interfaces, and achieve zero-breakage extraction while keeping the code safe and robust.\n\nThe key insight: extraction isn't just moving code around. It's about finding the right boundary — the seam where responsibilities naturally separate — and designing an interface that preserves all existing behavior.\n\n## Workflow\n\n```\n1. Context dependency analysis\n2. Evaluate extraction boundary (minimization principle)\n3. Design interface structure\n4. Confirm file location\n5. Execute extraction\n6. Verify compatibility\n```\n\n---\n\n## 1. Context Dependency Analysis\n\nIdentify every external dependency the target logic relies on:\n\n| Dependency type    | What to check                                                                      |\n| ------------------ | ---------------------------------------------------------------------------------- |\n| Props              | Which parent props does the target logic use?                                      |\n| State              | Which state values are used? Do they need to be lifted or passed in?               |\n| Context            | Does it consume useContext? Will it still be within the Provider after extraction? |\n| Ref                | Does it depend on DOM refs or component refs?                                      |\n| External functions | Does it call parent callbacks, utility functions, or global methods?               |\n| Side effects       | Does it contain useEffect? Are dependencies complete?                              |\n| Styles             | Does it depend on parent CSS classes or style variables?                           |\n\n---\n\n## 2. Minimization Principle\n\nChoose the lightest extraction that solves the problem:\n\n| Scenario                                              | Recommended approach                            |\n| ----------------------------------------------------- | ----------------------------------------------- |\n| Complex logic but simple UI                           | Extract as custom Hook                          |\n| Independent, reusable UI structure                    | Extract as child component                      |\n| Logic + UI tightly coupled, reused in multiple places | Extract as full component (with internal state) |\n| Only used in current component, just too long         | Extract as sub-component within the same file   |\n\n---\n\n## 3. Interface Design\n\n- Props interface must be explicitly defined in TypeScript, with required\u002Foptional clearly distinguished\n- Optional Props must have default values or null guards\n- When a Hook returns more than 2 values, use an object return type for extensibility\n- Don't expose internal implementation details through the interface\n\n---\n\n## 4. File Location Confirmation\n\nSearch the project's existing structure, then **present candidates to the user for confirmation**:\n\n```\nSuggested location for `UserCard` component:\n\n  Option A: src\u002Fcomponents\u002Fbusiness\u002Fuser\u002FUserCard.tsx\n            (Reason: same level as existing UserList, UserAvatar)\n\n  Option B: src\u002Fpages\u002Fprofile\u002Fcomponents\u002FUserCard.tsx\n            (Reason: currently only used by Profile page)\n\nWhere would you like to place it?\n```\n\n---\n\n## 5. Safety & Robustness\n\n- Original callers must not break — extraction preserves existing behavior\n- All optional Props have default values or `?.` guards\n- All useEffect have cleanup functions\n- Components with async operations handle loading\u002Ferror states\n- Context dependencies confirmed to be within Provider subtree\n\n---\n\n## Output Format\n\n```markdown\n## Component Extraction Report\n\n### Extraction Overview\n\n- **Extraction type**: [Child component \u002F Custom Hook \u002F Full component]\n- **File location**: `[confirmed file path]`\n- **Original caller**: `[original file path]` ([modified \u002F unmodified])\n\n### Dependency Analysis\n\n| Dependency type | Item | Handling                        |\n| --------------- | ---- | ------------------------------- |\n| Props           | —    | Passed via props                |\n| State           | —    | Extracted with logic            |\n| Context         | —    | Confirmed within Provider scope |\n\n### Generated Files\n\n`[new file path]` - Complete component\u002FHook code\n\n### Compatibility Verification\n\n- [ ] Original caller interface preserved\n- [ ] Optional Props have default values or null guards\n- [ ] useEffect has cleanup functions\n- [ ] Async operations handle loading\u002Ferror states\n```\n","# React Component & Logic Extraction\n\n## Core Capability\n\nSystematically analyze a target logic's external dependencies, evaluate extraction boundaries, design sensible component\u002FHook interfaces, and achieve zero-breakage extraction while keeping the code safe and robust.\n\nThe key insight: extraction isn't just moving code around. It's about finding the right boundary — the seam where responsibilities naturally separate — and designing an interface that preserves all existing behavior.\n\n## Workflow\n\n```\n1. Context dependency analysis\n2. Evaluate extraction boundary (minimization principle)\n3. Design interface structure\n4. Confirm file location\n5. Execute extraction\n6. Verify compatibility\n```\n\n---\n\n## 1. Context Dependency Analysis\n\nIdentify every external dependency the target logic relies on:\n\n| Dependency type    | What to check                                                                      |\n| ------------------ | ---------------------------------------------------------------------------------- |\n| Props              | Which parent props does the target logic use?                                      |\n| State              | Which state values are used? Do they need to be lifted or passed in?               |\n| Context            | Does it consume useContext? Will it still be within the Provider after extraction? |\n| Ref                | Does it depend on DOM refs or component refs?                                      |\n| External functions | Does it call parent callbacks, utility functions, or global methods?               |\n| Side effects       | Does it contain useEffect? Are dependencies complete?                              |\n| Styles             | Does it depend on parent CSS classes or style variables?                           |\n\n---\n\n## 2. Minimization Principle\n\nChoose the lightest extraction that solves the problem:\n\n| Scenario                                              | Recommended approach                            |\n| ----------------------------------------------------- | ----------------------------------------------- |\n| Complex logic but simple UI                           | Extract as custom Hook                          |\n| Independent, reusable UI structure                    | Extract as child component                      |\n| Logic + UI tightly coupled, reused in multiple places | Extract as full component (with internal state) |\n| Only used in current component, just too long         | Extract as sub-component within the same file   |\n\n---\n\n## 3. Interface Design\n\n- Props interface must be explicitly defined in TypeScript, with required\u002Foptional clearly distinguished\n- Optional Props must have default values or null guards\n- When a Hook returns more than 2 values, use an object return type for extensibility\n- Don't expose internal implementation details through the interface\n\n---\n\n## 4. File Location Confirmation\n\nSearch the project's existing structure, then **present candidates to the user for confirmation**:\n\n```\nSuggested location for `UserCard` component:\n\n  Option A: src\u002Fcomponents\u002Fbusiness\u002Fuser\u002FUserCard.tsx\n            (Reason: same level as existing UserList, UserAvatar)\n\n  Option B: src\u002Fpages\u002Fprofile\u002Fcomponents\u002FUserCard.tsx\n            (Reason: currently only used by Profile page)\n\nWhere would you like to place it?\n```\n\n---\n\n## 5. Safety & Robustness\n\n- Original callers must not break — extraction preserves existing behavior\n- All optional Props have default values or `?.` guards\n- All useEffect have cleanup functions\n- Components with async operations handle loading\u002Ferror states\n- Context dependencies confirmed to be within Provider subtree\n\n---\n\n## Output Format\n\n```markdown\n## Component Extraction Report\n\n### Extraction Overview\n\n- **Extraction type**: [Child component \u002F Custom Hook \u002F Full component]\n- **File location**: `[confirmed file path]`\n- **Original caller**: `[original file path]` ([modified \u002F unmodified])\n\n### Dependency Analysis\n\n| Dependency type | Item | Handling                        |\n| --------------- | ---- | ------------------------------- |\n| Props           | —    | Passed via props                |\n| State           | —    | Extracted with logic            |\n| Context         | —    | Confirmed within Provider scope |\n\n### Generated Files\n\n`[new file path]` - Complete component\u002FHook code\n\n### Compatibility Verification\n\n- [ ] Original caller interface preserved\n- [ ] Optional Props have default values or null guards\n- [ ] useEffect has cleanup functions\n- [ ] Async operations handle loading\u002Ferror states\n```\n",{"name":5,"boundary":54,"category":56,"description":7},{"vs_react-component-refactor":55},"react-component-refactor restructures the entire component, this skill extracts specific reusable pieces","coding","main","b9a52d8e27455bdad953d64928696d028223ea1b","skills\u002Fcoding\u002Freact-component-extraction","https:\u002F\u002Fgithub.com\u002FImaginerLabs\u002Fskill-manager","https:\u002F\u002Fgithub.com\u002FImaginerLabs","2026-04-18 16:27:13",{"source":8,"skillName":5,"commands":64,"prompt":74,"zipAvailable":75},[65,68,71],{"tool":66,"command":67},"npx","npx skills add ImaginerLabs\u002Fskill-manager --skill react-component-extraction",{"tool":69,"command":70},"bunx","bunx skills add ImaginerLabs\u002Fskill-manager --skill react-component-extraction",{"tool":72,"command":73},"pnpm","pnpm dlx skills add ImaginerLabs\u002Fskill-manager --skill react-component-extraction","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FImaginerLabs\u002Fskill-manager\u002Fblob\u002Fmain\u002Fskills\u002Fcoding\u002Freact-component-extraction\u002FSKILL.md",true,[77,83],{"path":78,"resourceType":79,"resourceTypeDesc":80,"sizeBytes":81,"sourceHtmlUrl":82},"references\u002Fexamples.md","REFERENCE","参考文档",2097,"https:\u002F\u002Fgithub.com\u002FImaginerLabs\u002Fskill-manager\u002Fblob\u002Fmain\u002Fskills\u002Fcoding\u002Freact-component-extraction\u002Freferences\u002Fexamples.md",{"path":84,"resourceType":79,"resourceTypeDesc":80,"sizeBytes":85,"sourceHtmlUrl":86},"references\u002Finterface-design.md",1418,"https:\u002F\u002Fgithub.com\u002FImaginerLabs\u002Fskill-manager\u002Fblob\u002Fmain\u002Fskills\u002Fcoding\u002Freact-component-extraction\u002Freferences\u002Finterface-design.md",[88,118,139,167,200,225],{"skillNo":89,"name":90,"nameZh":6,"description":91,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":92,"categories":93,"keywords":100,"publishedAt":49},"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",[94,95],{"categoryNo":26,"categoryName":27,"taxonomyType":20,"taxonomyTypeDesc":21},{"categoryNo":96,"categoryName":97,"taxonomyType":98,"taxonomyTypeDesc":99},"01JBSEEDCAT000000000000034","行政与办公人员","PROFESSION","适用职业",[101,102,103,104,105,106,107,108,109,110,90,57,111,112,113,114,115,116,117,44],"meeting minutes","meeting","minutes","writing","github","copilot","generate","decisions","meetings","up","agenda","actionable","concise","follow-up","tree","true","action",{"skillNo":119,"name":120,"nameZh":6,"description":121,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":122,"categories":123,"keywords":124,"publishedAt":49},"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",[],[125,126,127,104,105,106,128,129,130,131,132,133,57,134,135,136,137,115,116,138],"documentation","documentation writer","writer","https","quality","technical","technical writer","expert","documentation expert","structure","authoring","software","principles","high",{"skillNo":140,"name":141,"nameZh":6,"description":142,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":143,"categories":144,"keywords":152,"publishedAt":49},"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",[145,148,149],{"categoryNo":146,"categoryName":147,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000018","写作与文案",{"categoryNo":26,"categoryName":27,"taxonomyType":20,"taxonomyTypeDesc":21},{"categoryNo":150,"categoryName":151,"taxonomyType":98,"taxonomyTypeDesc":99},"01JBSEEDCAT000000000000036","内容创作者",[153,154,104,155,156,125,157,158,159,160,161,162,57,163,164,135,165,166,115,44],"doc coauthoring","doc","workflow","official","tasks","decision","write","context","proposals","guide","refine","iteration","trigger","co",{"skillNo":168,"name":169,"nameZh":6,"description":170,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":171,"categories":172,"keywords":181,"publishedAt":49},"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",[173,174,177,178],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},{"categoryNo":175,"categoryName":176,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000008","测试与质量",{"categoryNo":26,"categoryName":27,"taxonomyType":20,"taxonomyTypeDesc":21},{"categoryNo":179,"categoryName":180,"taxonomyType":98,"taxonomyTypeDesc":99},"01JBSEEDCAT000000000000030","开发工程师",[182,183,155,36,184,185,186,187,188,189,190,191,192,193,194,195,196,197,198,199],"code review","review","code review workflow","testing","frontend","test","change","code quality","code-review","analysis","check","coverage","quality check","basic","multi","comprehensive code review","with","phase",{"skillNo":201,"name":202,"nameZh":6,"description":203,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":204,"categories":205,"keywords":215,"publishedAt":49},"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",[206,207,210,211,212],{"categoryNo":175,"categoryName":176,"taxonomyType":20,"taxonomyTypeDesc":21},{"categoryNo":208,"categoryName":209,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000015","视觉设计",{"categoryNo":26,"categoryName":27,"taxonomyType":20,"taxonomyTypeDesc":21},{"categoryNo":179,"categoryName":180,"taxonomyType":98,"taxonomyTypeDesc":99},{"categoryNo":213,"categoryName":214,"taxonomyType":98,"taxonomyTypeDesc":99},"01JBSEEDCAT000000000000032","设计师",[187,188,36,216,217,185,218,219,155,220,190,221,193,222,57,223,224,43,44,199],"designer","code change test designer","design","diffs","commit","edge","diff","tests","flows",{"skillNo":226,"name":227,"nameZh":6,"description":228,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":229,"categories":230,"keywords":232,"publishedAt":49},"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",[231],{"categoryNo":26,"categoryName":27,"taxonomyType":20,"taxonomyTypeDesc":21},[233,234,235,236,156,237,238,239,240,241,191,242,243,244,57,245,246,115,44,227],"skill creator","creator","performance","run evals","variance analysis","create","run","benchmark","Meta","improve","edit","evals","optimize","existing skill"]