codegen
Code generation utilities for json-render. Use when generating code from UI specs, building custom code exporters, traversing…
@vercel-labs-2Install SkillFrontend
Skill
/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
Claude Code
$ npx -y skills add vercel-labs/json-render --skill devtools-svelte --agent claude-code
Codex
$ npx skills add vercel-labs/json-render --skill devtools-svelte -a codex -y
Cursor
$ npx skills add vercel-labs/json-render --skill devtools-svelte -a cursor -y
Gemini CLI
$ npx skills add vercel-labs/json-render --skill devtools-svelte -a gemini-cli -y
GitHub Copilot
$ npx skills add vercel-labs/json-render --skill devtools-svelte -a github-copilot -y
OpenCode
$ npx skills add vercel-labs/json-render --skill devtools-svelte -a opencode -y
Windsurf
$ npx skills add vercel-labs/json-render --skill devtools-svelte -a windsurf -y
SKILL.md
devtools-svelte.SKILL.mdname: devtools-svelte description: 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.
@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`.
Stats
19,589
Stars
1,040
Forks
Active
Maintenance
TypeScript
Language
Apache-2.0
License
Last commit
Created
Ships withjson-render
The Generative UI framework. Generate dynamic, personalized UIs from prompts without sacrificing reliability. Predefined components and actions for safe, predictable output.
19k31 skills
Stars on GitHub
Momentum
- stars in total
- 18.9k
Other skills on json-render.
@vercel-labs-2Install Skillcore
Core package for defining schemas, catalogs, and AI prompt generation for json-render. Use when working with @json-render/core,…
@vercel-labs-2Install Skilldevtools-react
React adapter for the json-render devtools inspector. Use whenever the user wants to add, configure, or troubleshoot…
@vercel-labs-2Install Skilldevtools-solid
SolidJS adapter for the json-render devtools inspector. Use whenever the user wants to add, configure, or troubleshoot…
@vercel-labs-2Install Skilldevtools-vue
Vue adapter for the json-render devtools inspector. Use whenever the user wants to add, configure, or troubleshoot…
@vercel-labs-2Install Skilldevtools
Drop-in inspector panel for any json-render app. Use when the user wants to debug a generative UI, inspect the spec tree, edit…
@vercel-labs-2Install SkillMore skills from other plugins.
Auto-invoked
migrate-radix-to-base
Migrates React projects and components from Radix UI to Base UI. Use when asked to migrate from radix, move to base-ui, convert…
@shadcn-uiInstall Skill
Auto-invoked
taste-skill
tasteskill v2, the anti-slop frontend skill. Art direction for websites, distilled from a study of 247 curated gallery sites (One…
@leonxlnxInstall SkillQuestions about devtools-svelte.
- Which coding agents can use devtools-svelte?
- devtools-svelte installs in Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot, OpenCode and Windsurf with the skills CLI, using each agent's flag shown on this page. Flowy's auto-invocation, which fires a skill when your prompt matches, runs in Claude Code only.