vercel-labs/json-render
“Um spec, vinte renderizadores.”
Framework de UI generativa: um spec em JSON vira React, Svelte, Vue, PDF, e-mail, terminal ou vídeo.
- 25
- skills
- 4.352
- linhas
- 25
- automáticas
- MIT
- licença
O ensaio
A ideia é boa e a nomenclatura é um problema. A ideia: um modelo produz um spec em JSON, e um renderizador transforma esse spec em interface — React, React Native, Svelte, Vue, Solid, TanStack Start, PDF, e-mail, imagem OG, terminal, vídeo em Remotion, cena 3D. Cada alvo tem uma skill que ensina o agente a produzir o spec certo. O problema: essas skills se chamam `core`, `react`, `next`, `image`, `shadcn`, `remotion`, `yaml`, `redux`. Instalado global, o pacote sequestra esses nomes de quem já os ocupava — aconteceu nesta máquina com três pacotes diferentes. Dentro de um projeto json-render, os nomes fazem sentido e o pacote é excelente. Fora dele, é um campo minado. Instale local.
Instalar
CLI skills
No terminal, de qualquer diretório.
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-renderAs 25 skills
O núcleo do json-render
Define schema, catálogo e geração de prompt para o json-render.
Inspetor da UI generativa
Painel que mostra a árvore do spec, o estado em runtime e as ações despachadas.
Spec vira código-fonte
Utilitários de geração de código a partir do spec.
Diretivas prontas
Formatação, matemática, manipulação de string e i18n dentro do spec.
Spec vira imagem
Renderiza SVG e PNG via Satori — imagem OG e card social.
Spec vira terminal
Renderizador Ink: interface de terminal a partir do spec.
Estado em Jotai
Adaptador do StateStore do json-render para Jotai.
Spec dentro do MCP
Integração com MCP Apps: interface interativa em Claude, ChatGPT, Cursor e VS Code.
Spec vira app Next
Renderizador Next.js: rota, layout, SSR e metadata a partir do spec.
Spec vira React
Renderizador React do json-render.
Spec vira e-mail
Renderizador de e-mail em HTML ou texto, via React Email.
Spec vira app nativo
Renderizador React Native.
Spec vira PDF
Gera documento PDF a partir do spec.
Spec vira cena 3D
Renderizador React Three Fiber: malha, luz, modelo, ambiente.
Estado em Redux
Adaptador do StateStore para Redux e Redux Toolkit.
Spec vira vídeo
Renderizador Remotion: timeline em JSON vira vídeo.
Componentes prontos em Svelte
Catálogo shadcn-svelte pré-montado para app Svelte do json-render.
Escrever skill
Guia para criar e atualizar skills.
Spec vira Solid
Renderizador SolidJS.
Spec vira Svelte
Renderizador Svelte 5.
Spec vira TanStack Start
Rota, splat, loader de SSR, metadata e navegação no cliente.
Spec vira Vue
Renderizador Vue 3.
Estado em XState
Adaptador do StateStore para @xstate/store.
YAML em vez de JSON
Formato de transmissão em YAML com parser de streaming.
Estado em Zustand
Adaptador do StateStore para Zustand.
Outros pacotes