web-artifacts-builder
Ajuda seu agente a construir artefatos HTML complexos com tecnologias modernas. Ideal para interfaces com gerenciamento de estado e componentes avançados.
O que ela faz
Esta ferramenta ajuda a criar sites interativos complexos usando tecnologias modernas de programação web. Ela organiza o código e o transforma em um único arquivo HTML que pode ser compartilhado.
Quando usar
- ✓Quando você precisa de um site com muitas partes que interagem.
- ✓Se o site precisa lembrar informações ou ter diferentes páginas.
- ✓Para usar componentes de design prontos e estilosos.
Exemplo do que pedir para a IA
“Crie um site interativo para mostrar receitas de bolo, com diferentes seções para cada receita e um botão para imprimir.”
Quer saber mais? Abra as seções abaixo.
Como usar
O jeito mais fácil: copie a mensagem abaixo e cole no Claude, ChatGPT, Cursor ou outra IA. Ela lê a skill e segue as instruções.
Link da skill
Mensagem pronta para colar
Como funciona
Primeiro, um script inicializa um projeto com todas as ferramentas necessárias. Depois, você edita o código para criar o site. Por fim, outro script junta tudo em um único arquivo HTML.
Instalação
Jeito mais fácil: copie o link da skill e cole no Claude, ChatGPT ou Cursor pedindo para seguir as instruções.
No terminal (Claude Code, Codex, Cursor), na pasta do projeto:
npx skills add anthropics/skills --skill web-artifacts-builderOu baixe só o arquivo:
curl -L https://raw.githubusercontent.com/anthropics/skills/main/skills/web-artifacts-builder/SKILL.md -o SKILL.mdConteúdo técnico (SKILL.md)
Tradução do texto original do autor no GitHub. Os comandos e códigos estão como no original.
Construtor de Artefatos Web
Para construir artefatos poderosos de frontend para claude.ai, siga estes passos:
- Inicialize o repositório frontend usando
scripts/init-artifact.sh - Desenvolva seu artefato editando o código gerado
- Empacote todo o código em um único arquivo HTML usando
scripts/bundle-artifact.sh - Exiba o artefato para o usuário
- (Opcional) Teste o artefato
Stack: React 18 + TypeScript + Vite + Parcel (empacotamento) + Tailwind CSS + shadcn/ui
Diretrizes de Design e Estilo
MUITO IMPORTANTE: Para evitar o que é frequentemente chamado de "lixo de IA", evite usar layouts excessivamente centralizados, gradientes roxos, cantos arredondados uniformes e a fonte Inter.
Início Rápido
Passo 1: Inicializar Projeto
Execute o script de inicialização para criar um novo projeto React:
bash scripts/init-artifact.sh <project-name>
cd <project-name>
Isso cria um projeto totalmente configurado com:
- ✅ React + TypeScript (via Vite)
- ✅ Tailwind CSS 3.4.1 com o sistema de temas shadcn/ui
- ✅ Aliases de caminho (
@/) configurados - ✅ Mais de 40 componentes shadcn/ui pré-instalados
- ✅ Todas as dependências do Radix UI incluídas
- ✅ Parcel configurado para empacotamento (via .parcelrc)
- ✅ Compatibilidade com Node 18+ (detecta e fixa automaticamente a versão do Vite)
Passo 2: Desenvolver Seu Artefato
Para construir o artefato, edite os arquivos gerados. Veja Tarefas Comuns de Desenvolvimento abaixo para orientação.
Passo 3: Empacotar em um Único Arquivo HTML
Para empacotar o aplicativo React em um artefato HTML único:
bash scripts/bundle-artifact.sh
Isso cria bundle.html - um artefato autônomo com todo o JavaScript, CSS e dependências incorporados. Este arquivo pode ser compartilhado diretamente em conversas do Claude como um artefato.
Requisitos: Seu projeto deve ter um index.html no diretório raiz.
O que o script faz:
- Instala dependências de empacotamento (parcel, @parcel/config-default, parcel-resolver-tspaths, html-inline)
- Cria a configuração
.parcelrccom suporte a alias de caminho - Compila com Parcel (sem source maps)
- Incorpora todos os assets em um único HTML usando html-inline
Passo 4: Compartilhar Artefato com o Usuário
Finalmente, compartilhe o arquivo HTML empacotado na conversa com o usuário para que ele possa visualizá-lo como um artefato.
Passo 5: Testar/Visualizar o Artefato (Opcional)
Observação: Este é um passo completamente opcional. Realize apenas se necessário ou solicitado.
Para testar/visualizar o artefato, use as ferramentas disponíveis (incluindo outras Skills ou ferramentas integradas como Playwright ou Puppeteer). Em geral, evite testar o artefato antecipadamente, pois isso adiciona latência entre a solicitação e o momento em que o artefato finalizado pode ser visto. Teste mais tarde, após apresentar o artefato, se solicitado ou se surgirem problemas.
Referência
- Componentes shadcn/ui: https://ui.shadcn.com/docs/components
Perguntas frequentes
O que são 'artefatos HTML'?
São arquivos HTML que contêm não apenas o texto e imagens, mas também código que faz o site funcionar, como interatividade e estilos.
O que é React, Tailwind CSS e shadcn/ui?
São ferramentas e bibliotecas que ajudam programadores a construir interfaces de usuário bonitas e funcionais de forma mais rápida e organizada.
Por que evitar layouts com cantos roxos e muito centralizados?
Esses são estilos comuns que podem deixar o resultado com aparência genérica ou 'copiada'. A ferramenta sugere evitar para criar algo mais original.
Detalhes
Descrição original do autor
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
repo: anthropics/skills
Popularidade
- Estrelas no GitHub
- 181 mil
- Posição no ranking
- #330
- Licença
- —
- Atualizada em
- 09/10/2026
Comentários
- …
Mais skills deste repositório
academy-guide
Faz seu agente recomendar cursos e tutoriais para aprender a usar o Claude. É útil quando você tem dúvidas sobre como usar o Claude ou seus produtos.
anthropics/skills
algorithmic-art
Ajuda seu agente a criar arte usando código, gerando imagens únicas. É útil quando você quer arte original feita por computador.
anthropics/skills
brand-guidelines
Faz seu agente aplicar as cores e o estilo visual da Anthropic em materiais. É útil para manter a identidade visual da empresa em diferentes projetos.
anthropics/skills
canvas-design
Ajuda seu agente a criar artes visuais bonitas em arquivos. É útil quando você pede um pôster, uma arte ou qualquer design estático.
anthropics/skills
Skills parecidas
angular-developer
Ajuda seu agente a criar código Angular e a dar conselhos sobre a estrutura do projeto. É útil para iniciar novos projetos, criar partes do código ou melhorar a performance e acessibilidade.
affaan-m/ECC
frontend-a11y
Ajuda seu agente a tornar interfaces web acessíveis para todos. Ele garante que sites e apps funcionem bem com leitores de tela e navegação por teclado.
affaan-m/ECC
frontend-patterns
Faz seu agente aplicar padrões modernos no desenvolvimento frontend. Ele otimiza performance, gerencia estado e segue boas práticas em React e Next.js.
affaan-m/ECC