Guia de leitura localizado

web-artifacts-builderFinalidade, utilização e fonte

Conjunto de ferramentas para criar artefatos HTML claude.ai elaborados e com múltiplos componentes, utilizando tecnologias web front-end modernas (React, Tailwind CSS,shadcn/ui). Use para artefatos complexos que exigem gerenciamento de estado, roteamento oushadcn/uicomponentes - não para arquivos únicos simplesHTML/JSXartefatos.

Fonte recuperada: 2026-10-29

Repositório de origem: anthropics/skills
SKILL.md: skills/web-artifacts-builder/SKILL.md
Estrelas do repositório: 185,373
Atualização do repositório: 2026-10-29
Classificação de Habilidades: Desenvolvimento
Última coleta: 2026-10-31 10:38 UTC+08:00

Licença: Arquivo de licença pendente de verificação

SKILL.md original

Os trechos do fluxo de trabalho são auxiliares de leitura e não instruções executáveis do Codez. Nenhuma Skill de terceiros foi executada para gerar esta página.

Os trechos abaixo, que descrevem o propósito e o fluxo de trabalho, são material original, organizado e traduzido para facilitar a leitura. Eles são distintos da análise editorial da Codez, que possui uma etiqueta separada.

O que esta habilidade faz

Como funciona o fluxo de trabalho upstream

Etapa1Inicializar projeto

Execute o script de inicialização para criar um novo projeto React: Isso cria um projeto totalmente configurado com: ✅ React + TypeScript (via Vite) ✅ Tailwind CSS3.4.1comshadcn/uisistema de temas

Passagem a montante · L24 ↗

Etapa2Desenvolva seu artefato

Para construir o artefato, edite os arquivos gerados. Consulte as Tarefas Comuns de Desenvolvimento abaixo para obter orientações.

Passagem a montante · L41 ↗

Etapa3: Agrupar em um único arquivo HTML

Para agrupar o aplicativo React em um único artefato HTML: Isso criabundle.html- Um artefato autocontido 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 umindex.htmlno diretório raiz. O que o script faz:

Passagem a montante · L45 ↗

Passagem a montante · bash ↗

bash scripts/init-artifact.sh <project-name>
cd <project-name>

Requisitos e configuração

Nenhuma passagem de requisitos resumida foi selecionada deste arquivo. Isso não significa que a Skill não tenha dependências. Verifique as instruções de configuração do repositório e os arquivos referenciados.

Limites e verificações de qualidade

Nenhuma passagem de limites separada foi selecionada deste arquivo. Isso não significa que a Skill seja segura para todas as entradas ou ambientes. Analise o código-fonte completo e valide seus próprios resultados.

Comece com um teste seguro.

Verifique o host compatível e as instruções de instalação do repositório. Mantenha o diretório Skill e seus scripts, recursos e documentação referenciados juntos;SKILL.mdsozinho pode omitir dependências.
Forneça ao agente suas entradas reais, a saída desejada e os critérios de aceitação. A sintaxe de invocação e as ferramentas disponíveis dependem do host; este site não pressupõe um comando de instalação universal.
Teste o fluxo de trabalho original em um projeto descartável ou em uma cópia. Analise as operações que alteram arquivos, serviços remotos ou recursos faturáveis antes de permiti-las.
Valide o resultado comparando-o com as verificações de qualidade da fonte e com seus próprios requisitos. Um gatilho bem-sucedido ou uma alta contagem de estrelas no repositório não garantem um resultado correto.

Especificação de formato e diretório de habilidades ↗

Tradução e escopo

Este guia de leitura seleciona trechos do texto fixado a montante.SKILL.mdA tradução foi feita com auxílio de ferramentas. Este não é um manual completo nem garante compatibilidade comprovada. Leia o original e os arquivos referenciados antes de usar.

Esta introdução refere-se à versão fixada abaixo; a atividade atual do repositório e o tempo de coleta são mostrados separadamente.

Fonte fixada: Leia o original ↗
Fonte recuperada: 2026-10-29T09:32:23Z
Commit de origem: ca45fc496a3436251f191354091d557da31c15b5
Fonte SHA-256: 81c5002c6643b0de7b8710b00e7a9038daa6fb9b68d59870ee6adb12da8d10f8

Voltar ao catálogo completo de habilidades