Pular pro conteúdo

Jotai skill

O Claude conecta a interface do json-render ao estado do Jotai do seu app, e os dois passam a ler e gravar os mesmos dados.

por Vercel LabsPublicada pela própria empresa

instalações
1.100
estrelas no GitHub
18,8 mil
No skills.sh desde
março de 2026
Licença
Apache-2.0

Atualizada no GitHub em 24 de outubro de 2026. Dados conferidos em 26 de outubro de 2026, no skills.sh e no GitHub.

O que ela faz

O json-render, da Vercel Labs, gera interfaces a partir de pedidos à IA usando componentes predefinidos. Esta skill cuida de uma peça só: o adaptador @json-render/jotai, que guarda o estado dessas interfaces num atom do Jotai, a biblioteca de estado pra React.

Ela mostra o que instalar (@json-render/jotai, core, react e jotai), como criar o atom com o estado inicial, gerar o armazenamento com jotaiStateStore e passar pro StateProvider. A partir daí, tudo que o json-render lê e grava passa pelo Jotai.

Se o app já usa um Provider do Jotai com store próprio, ela ensina a passar esse store pro adaptador, pra os componentes com useAtom e as telas do json-render enxergarem o mesmo estado.

Nas palavras de quem fez

Jotai adapter for json-render's StateStore interface. Use when integrating json-render with Jotai for state management via @json-render/jotai.

Vercel Labs, no SKILL.md

Quando usar

  • Usar json-render num app React que já guarda o estado no Jotai
  • Fazer um botão do app e uma tela gerada pelo json-render mexerem no mesmo dado
  • Trocar o estado padrão do json-render por um atom do Jotai

Depois de instalar, é só pedir assim

  • Liga o json-render ao Jotai nesse app usando o store que já existe no Provider
  • Cria um atom com o estado inicial do formulário e usa como StateStore do json-render

Segurança

Gen Agent Trust Hub, Socket e Snyk leem o código da skill atrás de comando perigoso, dado vazando e instrução escondida. Alerta não é reprovação: quer dizer que vale ler o que a skill faz antes de instalar.

  • Gen Agent Trust HubPassou
  • SocketPassou
  • SnykPassou

Perguntas

Como instalar a Jotai no Claude Code?

Toca em Levar, aqui nesta página, e deixa seu nome, e-mail e WhatsApp (é uma vez só). Aparece uma frase pronta: cola ela no Claude Code, que ele mesmo instala a Jotai, e a skill passa a valer na próxima conversa. A mesma frase serve no Codex. Se preferir fazer na mão, o passo a passo está em como instalar skills no Claude Code.

O que a jotai skill precisa pra funcionar?

De um projeto React que use o json-render. O Claude instala @json-render/jotai, @json-render/core, @json-render/react e jotai com npm. O adaptador não pede chave de API nem conta; se as telas forem geradas por IA, o modelo e a chave dele são parte do json-render, não desta skill.

Roda no Codex e no Antigravity?

Roda: é um SKILL.md curto com código de exemplo, sem nada exclusivo do Claude Code.

Ela ensina Jotai do zero?

Não. Ela só mostra a ligação entre o json-render e o Jotai. Atoms derivados, assíncronos e o resto do Jotai ficam com a documentação da própria biblioteca.

Levar essa skill

1x jotaiR$ 0,00

TotalR$ 0,00

A skill sai aqui mesmo, na hora. Seus dados eu uso pra falar com você sobre o MazyOS.

Levar precisa do JavaScript ligado. O código da skill está no GitHub: github.com/vercel-labs/json-render

Aprenda a usar

Mais da loja Vercel Labs

Ver a loja Vercel Labs