devtools-svelte
Svelte 5 adapter for the json-render devtools inspector. Use whenever the user wants to add, configure, or troubleshoot @json-render/devtools-svelte in a Svelte json-render app, including spec inspection, state editing, action and stream timelines, catalog browsing, or DOM picking.
How do I install this agent skill?
npx skills add https://github.com/vercel-labs/json-render --skill devtools-svelteIs this agent skill safe to install?
- Gen Agent Trust Hubpass
This skill provides instructions for integrating Svelte 5 devtools for the json-render library. It includes standard installation steps and code snippets for mounting the devtools panel within a Svelte application. No security concerns were identified.
- Socketpass
No alerts
- Snykpass
Risk: LOW · No issues
What does this agent skill do?
@json-render/devtools-svelte
Svelte 5 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-svelte
Mount the panel
Mount JsonRenderDevtools inside the existing Svelte json-render provider:
<script>
import { JsonRenderDevtools } from "@json-render/devtools-svelte";
</script>
<JSONUIProvider {registry}>
<Renderer {spec} {registry} />
<JsonRenderDevtools {spec} {catalog} {messages} />
</JSONUIProvider>
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.
How can the creator link this skill?
Add the canonical catalog link to the repository README so users can inspect current installs and available audits. The publishing guide covers the complete discovery path.
<a href="https://skillzs.dev/skills/vercel-labs/json-render/devtools-svelte">View devtools-svelte on skillZs</a>