Install
scripts/init-artifact.shPara quem
Use o web-artifacts-builder quando for fazer um artifact HTML claude.ai complexo, de vários componentes, e precisar de gestão de estado, roteamento ou componentes shadcn/ui. A pilha é React, Tailwind CSS e shadcn/ui. Não use para um artifact HTML/JSX simples de um arquivo só.
Encaixa melhor se você aceita React 18 + TypeScript + Vite + Parcel (empacotamento) + Tailwind CSS + shadcn/ui. O resumo também menciona compatibilidade com Node 18+. O material não lista produtos de agente. A página oficial do guia é
https://raw.githubusercontent.com/anthropics/skills/main/skills/web-artifacts-builder/SKILL.md
Primeira tentativa em 3 minutos
O primeiro comando recomendado é o script de inicialização; não invente outro caminho de carga:
scripts/init-artifact.sh
Este comando gera um repositório frontend, então grava em disco. Confirme que o diretório atual pode ser inicializado e então execute. Sinal de sucesso: código frontend editável foi gerado. Não inicialize sem confirmar o diretório.
Depois do init, ainda não empacote. Em seguida edite o código gerado para virar sua interface de vários componentes. No estilo, evite o «AI slop» que o material nomeia: sem layout excessivamente centralizado, degradê roxo, cantos arredondados uniformes nem Inter. É uma restrição de design reversível; antes de mudar estilos, olhe os arquivos gerados e confirme que não vai sobrescrever a estrutura que acabou de escrever.
Se só quiser ver se a pilha bate, pode parar nesta checagem: continue só se precisar de estado, roteamento ou shadcn/ui; se o alvo for HTML de um arquivo só, pare aqui e não faça init.
Casos de uso
Caso 1: inicializar e ajustar uma interface com estado. Primeiro scripts/init-artifact.sh, depois edite o código gerado. O critério de conclusão: o repositório foi gerado e você mudou arquivos gerados, não que tenha levantado um scaffold sem nome. O passo quatro é mostrar ao usuário, mas o trecho não escreve um comando de exibição; não invente um visualizador. Antes de mostrar, abra a página gerada localmente e confirme.
Caso 2: empacotar o projeto num arquivo único compartilhável. O comando é scripts/bundle-artifact.sh. Ele gera bundle.html, inline JavaScript, CSS e dependências, pronto para compartilhar como artifact numa conversa Claude. Pré-requisito: a raiz do projeto deve ter index.html. Isto grava em disco: confirme o caminho de bundle.html que será sobrescrito e então empacote. O critério de conclusão: aparece um bundle.html autocontido na raiz. Se faltar index.html, não assuma que o script vai criar por você.
Limites de uso
Só para artifacts complexos, de vários componentes, que precisam de estado/roteamento/shadcn/ui, não HTML/JSX simples de um arquivo. A pilha fica fixa: React 18, TypeScript, Vite, Parcel, Tailwind, shadcn/ui. O produto empacotado é bundle.html; a raiz deve ter index.html. Evite centralização excessiva, degradê roxo, cantos uniformes e Inter.
Não invente caminho de instalação além de init e bundle. O material não dá lista de clientes nem diz para qual comando um arquivo simples deveria mudar. Antes de sobrescrever bundle.html ou inicializar um diretório não vazio, confirme os efeitos colaterais. Além destes quatro passos e proibições de estilo já escritos, este guia não cobre o resto.