Svelte skill

O que ela faz

A skill ensina o Claude a usar o @json-render/svelte, o renderizador em Svelte 5 do json-render. A tela chega como um JSON em forma de árvore (um cartão que contém um botão, por exemplo) e o Renderer transforma isso em componentes Svelte de verdade, usando o registro de componentes do seu projeto.

O Claude monta o catálogo com defineCatalog, descrevendo cada componente e as propriedades dele com zod, e liga tudo no defineRegistry junto com as ações, como enviar um formulário. No JSON dá pra mostrar ou esconder partes conforme o estado, ligar campo de formulário ao estado e disparar ações como setState num clique.

Pra tela gerada na hora, a skill mostra o createUIStream, que vai desenhando a interface enquanto o JSON chega de uma rota do seu servidor, e o createChatUI, que junta conversa e tela na mesma resposta. Você pede "cria um formulário de login" e vê ele aparecer.

Nas palavras de quem fez

Quando usar

• Montar em Svelte um painel que a IA preenche a partir de um pedido em texto
• Definir o catálogo de componentes que a IA pode usar nas telas geradas
• Mostrar um formulário ou cartão gerado por IA aparecendo enquanto a resposta chega
• Ligar os botões das telas geradas a ações do app, como salvar ou trocar de aba

Depois de instalar, é só pedir assim

• Cria um catálogo do json-render com Card, Button e Input, e o registro em Svelte pra desenhar tudo
• Põe um botão na página que pede pra IA gerar um formulário de cadastro e mostra a tela enquanto ela chega
• Faz o botão desse JSON disparar a ação de salvar e esconder o aviso quando o campo estiver vazio

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