Vue Hook Optimizer MCP Server

Node.js server implementing Model Context Protocol (MCP) for analyzing and optimizing Vue component hooks.

Features

- Generate Mermaid diagrams for analyze Vue component hooks and their relationships
- Provide optimization suggestions
- Support for vue and react

API

$3

- analyze
- Analyze Vue component hooks and provide optimization suggestions
- Input:
- filepath (string): Path to component file
- framework (string): vue or react
- Returns:
- Mermaid diagram showing hook relationships
- List of optimization suggestions

Usage with Claude Desktop

Add this to your claude_desktop_config.json:

``json
{
"mcpServers": {
"vho": {
"command": "npx",
"args": [
"-y",
"mcp-server-vue-hook-optimizer"
]
}
}
}
`

Using the Refactor Skills

- Files:
- packages/mcp/refactor_prompt_zh.md (Chinese Skill)
- packages/mcp/refactor_prompt_en.md (English Skill)
- Both files already include valid Skill YAML frontmatter (name, description) and detailed instructions.
- Setup (choose one):
- Personal Skills: copy each file’s content to ~/.claude/skills//SKILL.md
- Project Skills: copy to .claude/skills//SKILL.md within your project
- Example:
- ~/.claude/skills/vho-refactor-zh/SKILL.md → content from refactor_prompt_zh.md
- ~/.claude/skills/vho-refactor-en/SKILL.md → content from refactor_prompt_en.md
- Workflow:
- Ensure the vue-hook-optimizer MCP server is connected (as above)
- Invoke the Skill; it will instruct the agent to call the MCP tool analyze:
- Input:
- absolutePath: absolute path to the component file
- framework: vue or react (default vue)
- Output:
- mermaid diagram (dependency graph)
- Optimization suggestions (articulation points, isolated groups, chain calls, cycles)
- Follow the Skill’s decision framework to refactor
- Re-run analyze after changes to validate (structure/design/quality/business checks)

Add MCP to Claude Code (CLI)

- macOS/Linux:
- Add server:
- claude mcp add --transport stdio vho -- npx -y mcp-server-vue-hook-optimizer
- Verify:
- claude mcp list
- Remove:
- claude mcp remove vho
- Windows (native, not WSL):
- Use cmd /c wrapper:
- claude mcp add --transport stdio vho -- cmd /c npx -y mcp-server-vue-hook-optimizer`
- Then verify/remove as above

License

MIT