agentmods.dev

devtools-vue

devtools-vue is a skill for Claude Code, Codex from vercel-labs/json-render. It costs 60 tokens per session (289 once invoked), scanned A, original, Apache-2.0.

A Vue adapter for the json-render developer inspection panel. It adds the panel to a Vue app that uses json-render.

In plain words
What is it for?
Use it to install, configure, or troubleshoot json-render devtools in Vue apps. It also supports inspecting the rendered page and its activity during development.
Why use it?
It gives developers a way to inspect rendered specifications, edit state, view action and streaming timelines, browse the component catalog, and select page elements while developing.

Skill for Claude CodeCodex ✓ vendor

Written for no agent in particular: nothing here depends on one.

not rated 19krepo +63 yesterday A scan 60 tokens original Apache-2.0

Good fit Use it to install, configure, or troubleshoot json-render devtools in Vue apps. It also supports inspecting the rendered page and its activity during development.

Compare 6 skills from other repositories ↓
Install with agentmods
npx agentmods add skills/vercel-labs/json-render/devtools-vue
View source ↗ vercel-labs/json-render json-render.dev
About the project

json-render is a framework where AI produces user interfaces as structured JSON constrained by a developer-defined component catalogue. It is for building dynamic interfaces from natural-language prompts across web and mobile frameworks.

vercel-labs/json-render · 18,930 stars · on GitHub · json-render.dev

Install

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.

Any agent
npx skills add vercel-labs/json-render --skill devtools-vue
Clone the repo
git clone --depth 1 https://github.com/vercel-labs/json-render

Made for: Claude Code, Codex.

Wrote 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.

agentmods badge for devtools-vue

README.md
[![agentmods](https://agentmods.dev/badge/skills/vercel-labs/json-render/devtools-vue/github.svg)](https://agentmods.dev/skills/vercel-labs/json-render/devtools-vue)
Your own site
<a href="https://agentmods.dev/skills/vercel-labs/json-render/devtools-vue"><img src="https://agentmods.dev/badge/skills/vercel-labs/json-render/devtools-vue/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.

agentmods 80×15 button for devtools-vue

Your own site · 80×15
<a href="https://agentmods.dev/skills/vercel-labs/json-render/devtools-vue"><img src="https://agentmods.dev/badge/skills/vercel-labs/json-render/devtools-vue.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session 60 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 289 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe.
Origin original No closer match found in the catalogue.
Token cost

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.

ModelPer sessionOnce invoked
Fable 5.1 $0.00060 $0.00289
Opus 5.5 $0.00024 $0.00116
Sonnet 5.5 $0.00012 $0.00058
Haiku 4.5 $0.00006 $0.00029

Measured 1mo ago against content hash d1d837c368c9, method: parsed. Prices are Anthropic first-party input rates as of 2026-10-07, from the pricing page.

Security

Grade A, and why

devtools-vue 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 1mo 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.

skills/devtools-vue/SKILL.md · 34 lines

What it actually says

@json-render/devtools-vue

Vue adapter for the json-render devtools panel. Read skills/devtools/SKILL.md for the shared panel capabilities, props, docking behavior, and server-side stream taps.

Install

npm install @json-render/devtools @json-render/devtools-vue

Mount the panel

Mount JsonRenderDevtools inside the existing Vue json-render provider:

<script setup>
import { JsonRenderDevtools } from "@json-render/devtools-vue";
</script>

<template>
  <JSONUIProvider :registry="registry">
    <Renderer :spec="spec" :registry="registry" />
    <JsonRenderDevtools :spec="spec" :catalog="catalog" :messages="messages" />
  </JSONUIProvider>
</template>

The component renders nothing in production builds. The panel provides the shared devtools controls, including the Ctrl/Cmd + Shift + J shortcut. Keep server-side stream instrumentation in @json-render/devtools.

Changes

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.

  1. 1mo ago First seen · 34 lines · 60 tokens per session scan A d1d837c368c9

Subscribe to this mod's changes

devtools-vue is a skill published in the GitHub repository vercel-labs/json-render (18,930 stars, last pushed yesterday), licensed Apache-2.0. It adds 60 tokens to every session and 289 once invoked, about $0.0002 per session on Opus 5.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-09-19.

DebuggingFrontendVue and Svelte
Related

devtools-vue compared with skills from other repositories

devtools-vue next to 6 skills from other repositories
ModTypeStarsLast pushLicenceScanTokensWorks with
devtools-vuevercel-labs/json-renderSkill19kyesterdayApache-2.0A60Claude Code, Codex
vue-debug-guidesvuejs-ai/skillsSkill3.3k14d agoMITA36Claude Code, Codex
error-tracking-sveltePostHog/skillsSkill79yesterdayMITA14Claude Code
vue-debug-guidesonmax/nuxt-skillsSkill723yesterdaynoneA36Claude Code
solid-core-reactivity-modelOpenAEC-Foundation/OpenAEC-Workspace-ComposerSkill61mo agoMITA97Claude Code
vite-mcp-nextxiaou66/vite-plugin-vue-mcp-nextSkill195mo agoMITA45Claude Code, Codex
error-tracking-nuxtPostHog/skillsSkill79yesterdayMITA15Claude Code