Show HN: Refactor Vue/React Components with Label Propagation and Claude Code(vue-hook-optimizer.vercel.app)
vue-hook-optimizer.vercel.app
Show HN: Refactor Vue/React Components with Label Propagation and Claude Code
https://vue-hook-optimizer.vercel.app/
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.
1 comments
The 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
Playground: https://vue-hook-optimizer.vercel.app
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
Playground: https://vue-hook-optimizer.vercel.app