Pular para o conteúdo
vercel-labs/json-render

Inspetor da UI generativa

Painel que mostra a árvore do spec, o estado em runtime e as ações despachadas.

devtools
Peso
médio
186 linhas · 60–200 linhas
Gatilho
o agente chama
O agente dispara sozinho quando a descrição bate com a tarefa.
Encaixe
livre
Combina com 1 outra.

O que ela faz

Cento e oitenta e seis linhas. Responde "por que este elemento não renderiza" sem adivinhação — inclusive selecionando o elemento no DOM para achar a chave dele no spec.

Quando não usar

Não use em produção.

Combina com

Ficha técnica

Descrição original
Drop-in inspector panel for any json-render app. Use when the user wants to debug a generative UI, inspect the spec tree, edit state at runtime, see dispatched actions, follow stream patches live, browse a catalog, or pick DOM elements to find their spec keys. Triggers include "add devtools", "debug json-render", "inspect the spec", "why is this element not rendering", "see the state at runtime", or requests to tap streams / capture action logs for `@json-render/devtools`.
Caminho no repo
skills/devtools/SKILL.md
SKILL.md
186 linhas
Seções
Install · Drop-in usage · Controls · Props · Panels · Picker (toolbar) · Reserved space & docking · Multiple renderers on one page (e.g. a chat) · Imperative API (React only) · Server-side stream tap · Under the hood

Instalar — vem com o pacote inteiro (25 skills)

CLI skills

No terminal, de qualquer diretório.

  1. npx skills add vercel-labs/json-render

Instale local, nunca global. Os nomes de uma palavra só fazem sentido dentro de um projeto json-render; fora dele são um sequestro de namespace.

→O que essa instalação faz na sua máquinaFechar

Como o método funciona

O gerenciador da Vercel Labs. Usa o GitHub como registro, copia para ~/.agents/skills e cria symlink para cada agente instalado na máquina.

Precisa ter

  • Node 18+
  • Um projeto usando @json-render/*

Onde cai no disco

~/.agents/skills/ + symlink em ~/.claude/skills/

O que liga sozinho

  • Instala 25 skills com nomes de uma palavra: core, react, next, image, shadcn, remotion, vue, svelte, yaml, redux, jotai, zustand, mcp, ink.
  • Instalado global, sobrescreve qualquer skill que já ocupasse esses nomes — nesta máquina ele atropelou a `shadcn` do shadcn/ui, a `remotion-best-practices` do Remotion e a `image` do pacote de marketing.

Outras formas

  • Sem `-g`, instala em ./.agents/skills do projeto — que é como este pacote deveria ser instalado.

Sair

npx skills remove vercel-labs/json-render
repositório ↗sobre o pacote

Do mesmo pacote