4 ms·
Show HN: Refactor Vue/React Components with Label Propagation and Claude Code
I built Vue-Hook-Optimizer (VHO) to solve a pain point: refactoring "mega-components" where logic is so tangled that it's hard to see where one Hook ends and another begins.
- huali 9mo agoThe Secret Sauce:Instead of simple heuristic parsing, I used the Label Propagation Algorithm (LPA). It treats variables and methods as nodes in a dependency graph and detects "communities." These communities are the natural boundaries for a Composable or Hook. Now Integrated with Claude Code:I’ve implemented this as a Claude Code Skill. This allows the AI to not just "guess" how to refactor, but to follow a mathematically-backed community analysis to extract logic sustainably. Stack: - Core: Graph-based dependency analysis. - Delivery: VS Code Ext, MCP Server, and Claude Code Skill. - Supports: Vue 3 (Script Setup) and React. I’m curious—do you trust AI to define your refactoring boundaries, or do you prefer a visualization tool to guide you? Repo: https://github.com/zcf0508/vue-hook-optimizer https://github.com/zcf0508/vue-hook-optimizer Playground: https://vue-hook-optimizer.vercel.app https://vue-hook-optimizer.vercel.app