artifacts-builder
Ajuda seu agente a construir interfaces de usuário complexas. Ele usa tecnologias modernas para criar páginas web interativas e ricas.
O que ela faz
Esta ferramenta ajuda a criar páginas web interativas e complexas usando tecnologias modernas. Ela gera um arquivo único que pode ser compartilhado, contendo todo o código necessário.
Quando usar
- ✓Quando você precisa de uma página web com muitos elementos interativos.
- ✓Ao criar um projeto web que usa componentes visuais prontos.
- ✓Para desenvolver aplicações web que precisam gerenciar informações internas (estado).
Exemplo do que pedir para a IA
“Crie uma página web para exibir uma lista de tarefas, com botões para adicionar e remover itens.”
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 as ferramentas necessárias. Depois, você edita os arquivos para construir sua página. 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 ComposioHQ/awesome-claude-skills --skill artifacts-builderOu baixe só o arquivo:
curl -L https://raw.githubusercontent.com/ComposioHQ/awesome-claude-skills/master/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
Para construir artefatos poderosos para o frontend do 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 único artefato HTML:
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)
Nota: 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'?
Artefatos são os arquivos finais criados, como páginas web, que podem ser usados ou visualizados.
O que é React, Tailwind CSS e shadcn/ui?
São tecnologias usadas para construir a aparência e o funcionamento das páginas web de forma eficiente e moderna.
Por que evitar layouts com margens excessivas, gradientes roxos e cantos arredondados?
Esses são estilos comuns que podem deixar a página com aparência genérica ou 'desleixada', e as diretrizes pedem um design mais cuidado.
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.
Popularidade
- Estrelas no GitHub
- 77 mil
- Posição no ranking
- #850
- Licença
- —
- Atualizada em
- 18/09/2026
Comentários
- …
Mais skills deste repositório
brand-guidelines
Ajuda seu agente a aplicar cores e fontes oficiais da marca em materiais. É útil para manter a identidade visual em qualquer peça que precise ter a cara da empresa.
ComposioHQ/awesome-claude-skills
canvas-design
Faz seu agente criar artes visuais originais em .png e .pdf. Use quando o usuário pedir para criar um pôster, arte ou design estático.
ComposioHQ/awesome-claude-skills
changelog-generator
Ajuda seu agente a criar notas de lançamento para usuários a partir de códigos de programação. Transforma informações técnicas em textos fáceis de entender.
ComposioHQ/awesome-claude-skills
competitive-ads-extractor
Faz seu agente extrair e analisar anúncios de concorrentes em bibliotecas de anúncios. Ajuda a entender o que funciona e a melhorar suas próprias campanhas.
ComposioHQ/awesome-claude-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