Show HN: Refactor Vue/React Components with Label Propagation and Claude Code

vue-hook-optimizer.vercel.app

1 pointhuali1 comment

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.

Open articleView on HN

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

Reply on news.ycombinator.com