[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6JFCGD0M6CEATY01W7YN6DB":3,"skill-same:01M6JFCGD0M6CEATY01W7YN6DB":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":65,"commitSha":66,"skillDirectory":67,"forksCount":68,"repositoryHtmlUrl":69,"repositoryHomepageUrl":70,"ownerHtmlUrl":71,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":72,"install":73,"resources":86},"01M6JFCGD0M6CEATY01W7YN6DB","react-component-refactoring",null,"Safely refactor large React components into smaller, maintainable pieces using proven patterns","S3YED\u002Fappie-kit","S3YED","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F62743867?v=4","01M6JBKBRRVP6KMS0VWZ27T3R6","01M6JBKBX0KG30284PW1DBYJT1",14,"MIT","https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fsoftware-development\u002Freact-component-refactoring\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 component refactoring","react component","component refactoring","react","refactoring","component","modular","test-driven-development","patterns","simplify","refactor","code","frontend","windows","react components","components","typescript","safe","macos","writing","2026-11-10 10:12:30",false,"---\nname: react-component-refactoring\ndescription: \"Safely refactor large React components into smaller, maintainable pieces using proven patterns\"\nversion: 1.0.0\nauthor: Hermes Agent (refactoring CZA\u002FWAI patterns)\nlicense: MIT\nplatforms: [linux, macos, windows]\nmetadata:\n  hermes:\n    tags: [react, refactor, components, typescript, frontend, modular, safe-refactoring]\n    related_skills: [simplify-code, test-driven-development, writing-plans]\n---\n\n# React Component Refactoring — Safe Large Component Splitting\n\nRefactor large React components (>500 lines) into smaller, maintainable pieces without breaking functionality. This skill captures patterns observed between CZA (3331 lines across 4 components) and WAI (965 lines) implementations.\n\n## When to Use\n\nUse this skill when:\n- A React component exceeds 400-500 lines\n- Component contains multiple distinct UI sections or logical concerns\n- Code becomes difficult to test or maintain\n- You need to follow WAI-style modular architecture\n\n## Refactoring Patterns\n\n### 1. UI Component Isolation (Highest Priority)\n\nExtract reusable UI components from the main component:\n\n```typescript\n\u002F\u002F BEFORE: Inline components in main file\nconst NavIcon: React.FC\u003CNavIconProps> = ({ active, icon: Icon, onClick, label }) => (\n  \u003Cbutton onClick={onClick} className={`...`}>\n    \u003CIcon className=\"h-5 w-5\" \u002F>\n    \u003Cspan className=\"...\">{label}\u003C\u002Fspan>\n  \u003C\u002Fbutton>\n);\n\n\u002F\u002F AFTER: Separate component file\nexport interface NavIconProps {\n  active: boolean;\n  icon: LucideIcon;\n  onClick: () => void;\n  label: string;\n  accentColor?: string;\n}\n\nexport const NavIcon: React.FC\u003CNavIconProps> = ({ active, icon: Icon, onClick, label, accentColor }) => (\n  \u003Cbutton onClick={onClick} className={`...`}>\n    \u003CIcon className=\"h-5 w-5\" \u002F>\n    \u003Cspan className=\"...\">{label}\u003C\u002Fspan>\n  \u003C\u002Fbutton>\n);\n```\n\n**Safety Check:** Verify all props are properly exported and imported\n\n### 2. Hook Extraction (Logic Separation)\n\nMove complex logic and state management into custom hooks:\n\n```typescript\n\u002F\u002F BEFORE: Logic inline in component\nconst [conversations, setConversations] = useState\u003CConversation[]>([]);\nconst [loading, setLoading] = useState(true);\n\nuseEffect(() => {\n  fetchConversations();\n}, []);\n\n\u002F\u002F AFTER: Custom hook\nconst useConversations = () => {\n  const [conversations, setConversations] = useState\u003CConversation[]>([]);\n  const [loading, setLoading] = useState(true);\n\n  useEffect(() => {\n    fetchConversations();\n  }, []);\n\n  return { conversations, loading };\n};\n```\n\n### 3. Repository Pattern (WAI Style)\n\nExtract data access logic into repository files:\n\n```typescript\n\u002F\u002F lib\u002Frepositories\u002FconversationRepository.ts\nexport const conversationRepository = {\n  fetchAll: async (): Promise\u003CConversation[]> => {\n    \u002F\u002F Supabase\u002FAPI calls here\n  },\n  updateStatus: async (conversationId: string, status: string) => {\n    \u002F\u002F Update logic\n  }\n};\n```\n\n### 4. Lazy Loading Pattern\n\nUse React.lazy() for code splitting:\n\n```typescript\nconst LazyAnalytics = lazy(() => import('.\u002FAnalyticsView'));\nconst LazyChatView = lazy(() => import('.\u002FChatView'));\n```\n\n## Safety Protocol\n\n### Pre-Refactor Checklist\n1. ✅ Run existing tests: `npm test`\n2. ✅ Build verification: `npm run build`\n3. ✅ Create backup: `git commit -am \"pre-refactor backup\"`\n4. ✅ Verify live site functionality\n\n### Post-Refactor Verification\n1. ✅ TypeScript compilation: `npx tsc --noEmit`\n2. ✅ Build success: `npm run build`\n3. ✅ Tests pass: `npm test`\n4. ✅ Live deploy check (Netlify\u002FVercel)\n5. ✅ Manual smoke test critical flows\n\n### Risk Mitigation\n- **Never** refactor without tests\n- **Always** verify build before pushing\n- **Preserve** all existing props and interfaces\n- **Maintain** backward compatibility\n- **Test** each extracted component individually\n\n## WAI vs CZA Comparison Patterns\n\n| Pattern | WAI Implementation | CZA Implementation |\n|---------|-------------------|-------------------|\n| Component Size | ~200-400 lines | ~500-1200 lines |\n| Hook Usage | Extensive custom hooks | Mixed inline logic |\n| Repository Pattern | ✅ Used extensively | ❌ Minimal usage |\n| Lazy Loading | ✅ Standard practice | ✅ Implemented |\n| File Organization | 19+ focused components | 4 monolithic components |\n\n## Common Pitfalls & Fixes\n\n### Pitfall: Missing Default Export\n```typescript\n\u002F\u002F ❌ Missing export\nexport default Dashboard;\n```\n\n### Pitfall: Prop Interface Mismatch\n```typescript\n\u002F\u002F ✅ Ensure all optional props are marked with ?\nexport interface NavIconProps {\n  active: boolean;\n  icon: LucideIcon;\n  onClick: () => void;\n  label: string;\n  accentColor?: string;  \u002F\u002F Optional prop\n}\n```\n\n### Pitfall: CSS Class Consistency\n```typescript\n\u002F\u002F ✅ Preserve all existing class names exactly\nclassName=\"flex flex-col items-center justify-center gap-1 min-w-[64px] py-2 px-3 rounded-xl transition-all active:scale-95 select-none touch-manipulation\"\n```\n\n## Implementation Workflow\n\n1. **Analyze**: Identify logical component boundaries\n2. **Extract UI**: Move reusable components to separate files\n3. **Create Hooks**: Extract complex logic into custom hooks\n4. **Add Repositories**: Move data access to repository files\n5. **Verify**: Run full test\u002Fbuild\u002Fdeploy cycle\n6. **Commit**: Small, focused commits for each extraction\n\nAdopted from successful WAI patterns: Dashboard.tsx (377 lines), ChatView.tsx (209 lines), AnalyticsView.tsx (299 lines), SettingsView.tsx (80 lines).","# React Component Refactoring — Safe Large Component Splitting\n\nRefactor large React components (>500 lines) into smaller, maintainable pieces without breaking functionality. This skill captures patterns observed between CZA (3331 lines across 4 components) and WAI (965 lines) implementations.\n\n## When to Use\n\nUse this skill when:\n- A React component exceeds 400-500 lines\n- Component contains multiple distinct UI sections or logical concerns\n- Code becomes difficult to test or maintain\n- You need to follow WAI-style modular architecture\n\n## Refactoring Patterns\n\n### 1. UI Component Isolation (Highest Priority)\n\nExtract reusable UI components from the main component:\n\n```typescript\n\u002F\u002F BEFORE: Inline components in main file\nconst NavIcon: React.FC\u003CNavIconProps> = ({ active, icon: Icon, onClick, label }) => (\n  \u003Cbutton onClick={onClick} className={`...`}>\n    \u003CIcon className=\"h-5 w-5\" \u002F>\n    \u003Cspan className=\"...\">{label}\u003C\u002Fspan>\n  \u003C\u002Fbutton>\n);\n\n\u002F\u002F AFTER: Separate component file\nexport interface NavIconProps {\n  active: boolean;\n  icon: LucideIcon;\n  onClick: () => void;\n  label: string;\n  accentColor?: string;\n}\n\nexport const NavIcon: React.FC\u003CNavIconProps> = ({ active, icon: Icon, onClick, label, accentColor }) => (\n  \u003Cbutton onClick={onClick} className={`...`}>\n    \u003CIcon className=\"h-5 w-5\" \u002F>\n    \u003Cspan className=\"...\">{label}\u003C\u002Fspan>\n  \u003C\u002Fbutton>\n);\n```\n\n**Safety Check:** Verify all props are properly exported and imported\n\n### 2. Hook Extraction (Logic Separation)\n\nMove complex logic and state management into custom hooks:\n\n```typescript\n\u002F\u002F BEFORE: Logic inline in component\nconst [conversations, setConversations] = useState\u003CConversation[]>([]);\nconst [loading, setLoading] = useState(true);\n\nuseEffect(() => {\n  fetchConversations();\n}, []);\n\n\u002F\u002F AFTER: Custom hook\nconst useConversations = () => {\n  const [conversations, setConversations] = useState\u003CConversation[]>([]);\n  const [loading, setLoading] = useState(true);\n\n  useEffect(() => {\n    fetchConversations();\n  }, []);\n\n  return { conversations, loading };\n};\n```\n\n### 3. Repository Pattern (WAI Style)\n\nExtract data access logic into repository files:\n\n```typescript\n\u002F\u002F lib\u002Frepositories\u002FconversationRepository.ts\nexport const conversationRepository = {\n  fetchAll: async (): Promise\u003CConversation[]> => {\n    \u002F\u002F Supabase\u002FAPI calls here\n  },\n  updateStatus: async (conversationId: string, status: string) => {\n    \u002F\u002F Update logic\n  }\n};\n```\n\n### 4. Lazy Loading Pattern\n\nUse React.lazy() for code splitting:\n\n```typescript\nconst LazyAnalytics = lazy(() => import('.\u002FAnalyticsView'));\nconst LazyChatView = lazy(() => import('.\u002FChatView'));\n```\n\n## Safety Protocol\n\n### Pre-Refactor Checklist\n1. ✅ Run existing tests: `npm test`\n2. ✅ Build verification: `npm run build`\n3. ✅ Create backup: `git commit -am \"pre-refactor backup\"`\n4. ✅ Verify live site functionality\n\n### Post-Refactor Verification\n1. ✅ TypeScript compilation: `npx tsc --noEmit`\n2. ✅ Build success: `npm run build`\n3. ✅ Tests pass: `npm test`\n4. ✅ Live deploy check (Netlify\u002FVercel)\n5. ✅ Manual smoke test critical flows\n\n### Risk Mitigation\n- **Never** refactor without tests\n- **Always** verify build before pushing\n- **Preserve** all existing props and interfaces\n- **Maintain** backward compatibility\n- **Test** each extracted component individually\n\n## WAI vs CZA Comparison Patterns\n\n| Pattern | WAI Implementation | CZA Implementation |\n|---------|-------------------|-------------------|\n| Component Size | ~200-400 lines | ~500-1200 lines |\n| Hook Usage | Extensive custom hooks | Mixed inline logic |\n| Repository Pattern | ✅ Used extensively | ❌ Minimal usage |\n| Lazy Loading | ✅ Standard practice | ✅ Implemented |\n| File Organization | 19+ focused components | 4 monolithic components |\n\n## Common Pitfalls & Fixes\n\n### Pitfall: Missing Default Export\n```typescript\n\u002F\u002F ❌ Missing export\nexport default Dashboard;\n```\n\n### Pitfall: Prop Interface Mismatch\n```typescript\n\u002F\u002F ✅ Ensure all optional props are marked with ?\nexport interface NavIconProps {\n  active: boolean;\n  icon: LucideIcon;\n  onClick: () => void;\n  label: string;\n  accentColor?: string;  \u002F\u002F Optional prop\n}\n```\n\n### Pitfall: CSS Class Consistency\n```typescript\n\u002F\u002F ✅ Preserve all existing class names exactly\nclassName=\"flex flex-col items-center justify-center gap-1 min-w-[64px] py-2 px-3 rounded-xl transition-all active:scale-95 select-none touch-manipulation\"\n```\n\n## Implementation Workflow\n\n1. **Analyze**: Identify logical component boundaries\n2. **Extract UI**: Move reusable components to separate files\n3. **Create Hooks**: Extract complex logic into custom hooks\n4. **Add Repositories**: Move data access to repository files\n5. **Verify**: Run full test\u002Fbuild\u002Fdeploy cycle\n6. **Commit**: Small, focused commits for each extraction\n\nAdopted from successful WAI patterns: Dashboard.tsx (377 lines), ChatView.tsx (209 lines), AnalyticsView.tsx (299 lines), SettingsView.tsx (80 lines).",{"name":5,"author":54,"license":14,"version":55,"metadata":56,"platforms":63,"description":7},"Hermes Agent (refactoring CZA\u002FWAI patterns)","1.0.0",{"hermes":57},{"tags":58,"related_skills":60},[32,39,44,45,41,35,59],"safe-refactoring",[61,36,62],"simplify-code","writing-plans",[64,47,42],"linux","master","8ec37df6d71fb664ea19d32c079e7d3ff931a8e0","skills\u002Fsoftware-development\u002Freact-component-refactoring",3,"https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit","https:\u002F\u002Fweblyfe.ai","https:\u002F\u002Fgithub.com\u002FS3YED","2026-08-27 01:54:02",{"source":8,"skillName":5,"commands":74,"prompt":84,"zipAvailable":85},[75,78,81],{"tool":76,"command":77},"npx","npx skills add S3YED\u002Fappie-kit --skill react-component-refactoring",{"tool":79,"command":80},"bunx","bunx skills add S3YED\u002Fappie-kit --skill react-component-refactoring",{"tool":82,"command":83},"pnpm","pnpm dlx skills add S3YED\u002Fappie-kit --skill react-component-refactoring","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fsoftware-development\u002Freact-component-refactoring\u002FSKILL.md",true,[],[88,120,154,180,208,232],{"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":101,"publishedAt":49},"01M6JFD4M6N4DSGC7TXEJ5R3J2","ai-music","AI music generation and audio tools: HeartMuLa lyrics-to-music generation, songwriting craft (+ Suno prompts), and audio spectrogram\u002Ffeature visualization.","https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fwethlete\u002Fai-music\u002FSKILL.md",[94,97,100],{"categoryNo":95,"categoryName":96,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000013","分析与可视化",{"categoryNo":98,"categoryName":99,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000016","图像与多媒体",{"categoryNo":26,"categoryName":27,"taxonomyType":20,"taxonomyTypeDesc":21},[102,103,104,105,106,107,108,109,110,111,112,113,114,115,116,117,118,119],"music","ai music","humanizer","visualization","Tools","Audio","hermes","hermes agent","songwriting","suno","lyrics","prompts","heartmula","craft","generation","feature","ai music generation","music generation",{"skillNo":121,"name":122,"nameZh":6,"description":123,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":124,"categories":125,"keywords":134,"publishedAt":49},"01M6JFCZE4XNFQFMNZDHKHT5V5","agentic-webdesign-design-system-ingestion","Use v0 Design Systems 2.0, Bolt Design System Agents, or Lovable to generate production UI from a client's real design system components — not generic Tailwind. Use when building a client website where brand consistency matters.","https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fweb-design\u002Fagentic-webdesign-design-system-ingestion\u002FSKILL.md",[126,129],{"categoryNo":127,"categoryName":128,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000015","视觉设计",{"categoryNo":130,"categoryName":131,"taxonomyType":132,"taxonomyTypeDesc":133},"01JBSEEDCAT000000000000032","设计师","PROFESSION","适用职业",[135,136,137,138,139,140,141,44,142,143,144,145,146,147,148,149,150,151,152,153],"design","agentic","design system","system","ingestion","webdesign","agentic webdesign design system ingestion","generate","design systems","website","ui","Tailwind","bolt","lovable","v0","design-system","wed","design system components","appie",{"skillNo":155,"name":156,"nameZh":6,"description":157,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":158,"categories":159,"keywords":162,"publishedAt":49},"01M6JFCVPX3913CFAS6QQJ33ZB","agentic-webdesign-agent-elements","Use 21st.dev Agent Elements — 25 shadcn\u002Fui components purpose-built for AI agent UIs. Tool cards (Bash, Edit, Search, Plan, Subagent, MCP), chat, input, streaming. Open source, shadcn-registry install, no runtime lock-in.","https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fweb-design\u002Fagentic-webdesign-agent-elements\u002FSKILL.md",[160,161],{"categoryNo":26,"categoryName":27,"taxonomyType":20,"taxonomyTypeDesc":21},{"categoryNo":130,"categoryName":131,"taxonomyType":132,"taxonomyTypeDesc":133},[136,163,140,164,165,166,44,167,168,169,170,171,172,173,174,175,176,177,178,179],"elements","agentic webdesign agent elements","MCP","ai agent","registry","search","streaming","open source","open","Bash","plan","subagent","edit","install","input","lock","source",{"skillNo":181,"name":182,"nameZh":6,"description":183,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":184,"categories":185,"keywords":190,"publishedAt":49},"01M6JFCQC7H65M9QJ6TRE71BS1","vercel-deployment","Deploy static sites and frontends to Vercel — handles both CLI and REST API paths, including the CLI token sanitization workaround.","https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fsoftware-development\u002Fvercel-deployment\u002FSKILL.md",[186,189],{"categoryNo":187,"categoryName":188,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000011","运维与部署",{"categoryNo":26,"categoryName":27,"taxonomyType":20,"taxonomyTypeDesc":21},[191,192,193,47,194,64,42,195,196,197,198,199,200,201,202,203,204,205,206,207],"deployment","vercel deployment","vercel","cli","deploy","vercel deploy","REST","api","site","deploy to vercel","token","rest api","host","sites","paths","sanitization","static site",{"skillNo":209,"name":210,"nameZh":6,"description":211,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":212,"categories":213,"keywords":215,"publishedAt":49},"01M6JFCM4SMTXBM5A01BK2YQG1","software-quality-workflows","Umbrella workflow for TDD, debugging, code simplification, spikes, pre-commit review, and debugger-assisted investigation.","https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fsoftware-development\u002Fsoftware-quality-workflows\u002FSKILL.md",[214],{"categoryNo":26,"categoryName":27,"taxonomyType":20,"taxonomyTypeDesc":21},[216,217,218,219,220,221,222,223,224,40,225,226,227,228,229,230,231],"workflows","quality","software","software quality workflows","review","tdd","workflow","commit","debugging","debugger","pre-commit","investigation","code simplification","user","simplification","for",{"skillNo":233,"name":234,"nameZh":6,"description":235,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":236,"categories":237,"keywords":239,"publishedAt":49},"01M6JFCC78QZZNDYKTB3VN7HQQ","hermes-gateway-troubleshooting","Troubleshoot Hermes Agent gateway\u002Fruntime issues: messaging sessions, model\u002Fprovider switches, auth, logs, and state.db consistency.","https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fsoftware-development\u002Fhermes-gateway-troubleshooting\u002FSKILL.md",[238],{"categoryNo":26,"categoryName":27,"taxonomyType":20,"taxonomyTypeDesc":21},[240,241,108,242,47,243,244,42,224,245,246,247,248,249,250,251,252,253,254,153],"gateway","troubleshooting","hermes gateway troubleshooting","troubleshoot","auth","issues","messaging","logs","model","telegram","commands","db","systematic","hermes-agent","systematic-debugging"]