Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add xiaou66/vite-plugin-vue-mcp-next --skill vite-mcp-nextgit clone --depth 1 https://github.com/xiaou66/vite-plugin-vue-mcp-nextWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/xiaou66/vite-plugin-vue-mcp-next/vite-mcp-next)<a href="https://agentmods.dev/skills/xiaou66/vite-plugin-vue-mcp-next/vite-mcp-next"><img src="https://agentmods.dev/badge/skills/xiaou66/vite-plugin-vue-mcp-next/vite-mcp-next/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/xiaou66/vite-plugin-vue-mcp-next/vite-mcp-next"><img src="https://agentmods.dev/badge/skills/xiaou66/vite-plugin-vue-mcp-next/vite-mcp-next.svg" alt="Reviewed on agentmods" width="80" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00045 | $0.01078 |
| Opus 5 | $0.00023 | $0.00539 |
| Sonnet 5 | $0.00009 | $0.00216 |
| Haiku 4.5 | $0.00005 | $0.00108 |
Grade A, and why
vite-mcp-next scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 11d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 80 lines — stays where its author put it; the contents beside it link to each section on GitHub.
vite-mcp-next
Overview
vite-mcp-next exposes local Vite + Vue runtime state through MCP. Use it before guessing from source code when the task asks to inspect a running page, verify UI, debug browser errors, trace requests, or inspect Vue app state.
When to Use
- User asks to inspect, open, verify, screenshot, or debug a local Vite/Vue page
- The answer depends on actual browser DOM, Console, Network, Vue component state, Router, or Pinia
- You need evidence from the running app before changing code
- You need to compare source expectations with runtime behavior
Do not use it for static code-only questions where reading files is enough.
Quick Reference
| Need | Tool |
|---|---|
| Find available pages and targets | list_pages |
| Inspect a copied element ID | get_element_context |
| Refresh the current page | reload_page |
| Inspect DOM structure | get_dom_tree |
| Find elements by selector | query_dom |
| Capture visual evidence | take_screenshot |
| Read browser logs | get_console_logs |
| Inspect one runtime console object argument | inspect_console_arg |
| Reset old browser logs | clear_console_logs |
| Inspect requests | get_network_requests |
| Inspect one request deeply | get_network_request_detail |
| Reset old request records | clear_network_requests |
| Inspect browser storage | list_storage, get_storage_item |
| Mutate browser storage | set_storage_item, delete_storage_item, clear_storage |
| Inspect Vue component tree | get_component_tree |
| Inspect one component state | get_component_state |
| Edit runtime component state | edit_component_state |
| Highlight a component | highlight_component |
| Inspect Vue Router | get_router_info |
| Inspect Pinia stores | get_pinia_tree, get_pinia_state |
| Evaluate page expression | evaluate_script |
Tool Order
- Call
list_pagesfirst. Confirm the page, runtime connection, and anycdp:*target. - If the user provides an
elementIdsuch assrc/App.vue:12:8, callget_element_contextbefore editing source. - For layout or content questions, call
get_dom_treeorquery_dom. - For visual verification, call
take_screenshotand report whethersourceiscdporsnapdom. - For browser errors, call
get_console_logs; if a runtime Hook log contains an object argument withargId, callinspect_console_argonly when that object detail is needed. - For API behavior, call
get_network_requests, thenget_network_request_detailfor the relevant id. - For storage questions, call
list_storagefirst, thenget_storage_item,set_storage_item,delete_storage_item, orclear_storagefor the selected scope. - For Vue-specific behavior, call
get_component_tree,get_component_state,get_router_info,get_pinia_tree, orget_pinia_state.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 11d ago First seen · 80 lines · 45 tokens per session scan A 0ed5d324bab3
vite-mcp-next is a skill published in the GitHub repository xiaou66/vite-plugin-vue-mcp-next (19 stars, last pushed 3mo ago), licensed MIT. It adds 45 tokens to every session and 1,078 once invoked, about $0.0002 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.
Other skills, from other repositories
vue-debug-guides
Vue 3 debugging and error handling for runtime errors, warnings, async failures, and SSR/hydration issues. Use when diagnosing or fixing Vue issues.
error-tracking-svelte
PostHog error tracking for Svelte.
vite-browser-core-debug
Core troubleshooting workflow for Vue/React/Svelte Vite apps using vite-browser. Use this for first-pass debugging when the user reports broken UI behavior, wrong component state, router/store confusion, or a vague "page is broken" symptom and the dominant failure mode is not yet known.
solid-core-reactivity-model
Use when reasoning about SolidJS reactivity, debugging tracking issues, or understanding why components run once. Prevents React mental model contamination such as expecting re-renders, virtual DOM diffing, or stale closure patterns. Covers reactive dependency graph, tracking contexts, ownership tree, synchronous…
error-tracking-nuxt
PostHog error tracking for Nuxt.
nuxt4-patterns
Nuxt 4 app patterns for hydration safety, performance, route rules, lazy loading, and SSR-safe data fetching with useFetch and useAsyncData. Use when building or reviewing a Nuxt 4 app, or debugging hydration mismatches and SSR-safe data fetching.