Suite de ferramentas para criar artefatos HTML elaborados e multi-componentes para claude.ai usando tecnologias web frontend modernas (React, Tailwind CSS, shadcn/ui). Use para artefatos complexos que requerem gerenciamento de estado, roteamento ou componentes shadcn/ui - não para artefatos HTML/JSX simples em arquivo único.
The English summary is being prepared. Showing the original description.
See how to installReview the instructions the agent will receive before you install.
Para construir artefatos frontend poderosos para claude.ai, siga estas etapas:
scripts/init-artifact.shscripts/bundle-artifact.shStack: React 18 + TypeScript + Vite + Parcel (bundling) + Tailwind CSS + shadcn/ui
MUITO IMPORTANTE: Para evitar o que é frequentemente chamado de "AI slop", evite usar layouts excessivamente centralizados, gradientes roxos, cantos uniformemente arredondados e fonte Inter.
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:
@/) configuradosPara construir o artefato, edite os arquivos gerados. Consulte Tarefas Comuns de Desenvolvimento abaixo para orientação.
Para agrupar o aplicativo React em um artefato HTML único:
bash scripts/bundle-artifact.sh
Isso cria bundle.html - um artefato autossuficiente com todo JavaScript, CSS e dependências inseridos inline. 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:
.parcelrc com suporte a aliases de pathPor fim, compartilhe o arquivo HTML agrupado em conversa com o usuário para que possa visualizá-lo como um artefato.
Nota: Esta é uma etapa 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 adiciona latência entre a solicitação e quando o artefato finalizado pode ser visto. Teste depois, após apresentar o artefato, se solicitado ou se problemas surgirem.
No reviews yet. Tell others what you thought.
No login needed. Share how it worked for you, ask a question, or note where it did not run.
No comments yet. Be the first to write one.
Especialista em construir experiências 3D para a web - Three.js, React Three Fiber, Spline, WebGL e cenas 3D interativas. Cobre configuradores de produtos, portfólios 3D, websites imersivos e adição de profundidade às experiências web. Use quando: website 3D, three.js, WebGL, react three fiber, experiência 3D.
The English summary is being prepared. Showing the original description.
Quando o usuário quer planejar, projetar ou implementar um teste A/B ou experimento. Também use quando o usuário menciona "teste A/B", "split test", "experimento", "testar essa mudança", "copy variante", "teste multivariado" ou "hipótese". Para implementação de rastreamento, veja analytics-tracking.
The English summary is being prepared. Showing the original description.
Auditar e melhorar a acessibilidade web seguindo as diretrizes WCAG 2.1. Use quando solicitado para "melhorar acessibilidade", "auditoria a11y", "conformidade WCAG", "suporte a leitor de tela", "navegação por teclado" ou "tornar acessível".
The English summary is being prepared. Showing the original description.
Testes e benchmarking de agentes LLM incluindo testes comportamentais, avaliação de capacidades, métricas de confiabilidade e monitoramento em produção—onde até os melhores agentes alcançam menos de 50% em benchmarks do mundo real. Use quando: testes de agentes, avaliação de agentes, benchmark de agentes, confiabilidade de agentes, teste de agentes.
The English summary is being prepared. Showing the original description.
Criar, gerenciar e orquestrar agentes de IA usando o CLI AI Maestro. Use quando o usuário pedir para "criar agente", "listar agentes", "deletar agente", "hibernar agente", "despertar agente", "instalar plugin", "mostrar agente", "reiniciar agente" ou qualquer tarefa de gerenciamento do ciclo de vida do agente.
The English summary is being prepared. Showing the original description.
Gerencie múltiplos agentes CLI locais via sessões tmux (iniciar/parar/monitorar/atribuir) com agendamento compatível com cron.
The English summary is being prepared. Showing the original description.