Construtor de Artefatos Web

Para construir artefatos poderosos de frontend para claude.ai, siga estes passos:

1. Inicialize o repositório frontend usando scripts/init-artifact.sh
2. Desenvolva seu artefato editando o código gerado
3. Empacote todo o código em um único arquivo HTML usando scripts/bundle-artifact.sh
4. Exiba o artefato para o usuário
5. (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 "bagunça 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 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 .parcelrc com 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

Quando Usar

Esta skill é aplicável para executar o fluxo de trabalho ou as ações descritas na visão geral.

Limitações

• Use esta skill apenas quando a tarefa corresponder claramente ao escopo descrito acima.
• Não trate a saída como um substituto para validação específica do ambiente, testes ou revisão de especialistas.
• Pare e peça esclarecimentos se os inputs necessários, permissões, limites de segurança ou critérios de sucesso estiverem ausentes.