83.3K+Baixar
Ir para o guia de uso
web-artifacts-builderpor Anthropic

Web Artifacts Builder Skill.

Uma skill Claude Code e Codex para design de UI: artifacts HTML interativos com múltiplos componentes usando React, Tailwind e shadcn/ui.

  • Web & UI
  • HTML
Baixar OpenDesignVer guia de uso
anthropics/skills · skills/web-artifacts-builder/SKILL.mdSKILL.md
--- name: web-artifacts-builder description: 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. --- ## Design & Style Guidelines ## Quick Start
Metadados iniciais e cabeçalhos de seção lidos do arquivo original em 14/09/2026 · 3.073 caracteres no total

01 O que faz

O Que a Skill web-artifacts-builder Faz no Claude Code e no Codex

Resumo, fluxo de trabalho e resultados, todos lidos do SKILL.md do skill.

Do SKILL.mdLido em 14/09/2026 · não é uma execução registrada

Nos termos do próprio skill

Uma skill para criar artefatos React complexos e com múltiplos componentes para o claude.ai, usando um stack moderno com React 18, TypeScript, Vite, Parcel, Tailwind CSS e shadcn/ui. A skill oferece scripts de inicialização para configurar um projeto totalmente pronto, com mais de 40 componentes shadcn/ui pré-instalados, e scripts de empacotamento para compilar tudo em um único arquivo HTML autocontido.

Foi projetada para artefatos que exigem gerenciamento de estado, roteamento ou componentes shadcn/ui, e não para artefatos simples de HTML ou JSX de arquivo único. O workflow segue cinco etapas: inicializar o repositório do frontend, desenvolver o artefato editando o código gerado, empacotar em um único arquivo HTML, exibir para o usuário e, opcionalmente, testar.

HTML
Veja o exemplo de prompt ↗

Como funciona

  1. 01
    Inicializar um Projeto React Configurado

    Execute o script init-artifact.sh com um nome de projeto para criar um projeto totalmente configurado com React, TypeScript, Tailwind CSS, aliases de caminho, mais de 40 componentes shadcn/ui e configuração de empacotamento com Parcel.

  2. 02
    Desenvolver Editando os Arquivos Gerados

    Construa o artefato editando os arquivos gerados durante a inicialização, seguindo as orientações de tarefas de desenvolvimento comuns fornecidas pela skill.

  3. 03
    Empacotar em HTML autocontido

    Execute o bundle-artifact.sh para compilar o app React em bundle.html, um único arquivo com todo o JavaScript, CSS e dependências embutidos usando Parcel e html-inline.

  4. 04
    Exibir o Artefato para o Usuário

    Compartilhe o arquivo HTML empacotado na conversa para que o usuário possa visualizá-lo como um artefato do claude.ai.

02 Encontre o ideal para você

Quando Usar a Skill web-artifacts-builder

Use a skill web-artifacts-builder no Claude Code ou Codex quando o trabalho for design de UI deste tipo. Adequação e limites abaixo são extraídos do próprio arquivo da skill.

Boa Combinação

  • Interfaces com múltiplos componentes usando a biblioteca de componentes shadcn/ui

Conheça os Limites

  • Use para artefatos complexos que exigem gerenciamento de estado, roteamento ou componentes shadcn/ui - não para artefatos HTML/JSX simples de arquivo único.

O Que Fornecer

  • Nome do projeto para inicializaçãoUm nome para o diretório do novo projeto React ao executar o script init-artifact.sh.

03 Dentro da skill

Regras que a Skill web-artifacts-builder Fornece ao Claude Code e ao Codex

5 instruções concretas, padrões e limites que o SKILL.md define para o agente — a parte do arquivo que muda o resultado.

  1. Use Apenas para Artefatos Complexos

    Este skill é destinado especificamente a artefatos complexos que exigem gerenciamento de estado, roteamento ou componentes shadcn/ui. Não o use para artefatos HTML ou JSX simples de arquivo único.

  2. Evite Padrões de Design de AI Slop

    Não use layouts centralizados em excesso, gradientes roxos, cantos arredondados uniformes ou a fonte Inter, a fim de evitar o que é chamado de AI slop.

  3. O Projeto Deve Ter um index.html na Raiz

    O script de empacotamento exige que seu projeto tenha um arquivo index.html localizado no diretório raiz.

  4. Teste Apenas Quando Necessário

    Os testes são totalmente opcionais e só devem ser realizados se necessário ou solicitado.

  5. Siga o Workflow de Cinco Etapas

    O processo de criação do artefato segue uma sequência específica: inicializar o repositório frontend, desenvolver editando o código gerado, empacotar todo o código em um único arquivo HTML, exibir ao usuário e, opcionalmente, testar.

04 Coloque em prática

Instale web-artifacts-builder no Claude Code ou Codex

Um comando npx skills add, depois uma primeira tarefa no seu agente e uma checklist para o resultado.

Adicione web-artifacts-builder ao Claude Code, Codex ou seu agente

Rode no seu projeto; o instalador pergunta a qual agente adicioná-lo.

Terminal
npx skills add https://github.com/anthropics/skills --skill web-artifacts-builder

Forma genérica do CLI skills para skills/web-artifacts-builder/SKILL.md; o repositório pode documentar seu próprio caminho.

Dê ao Skill uma Primeira Tarefa de Design de UI

Escrito nos próprios termos do skill; substitua as partes entre colchetes pelo seu material.

Starter prompt
Build a task management dashboard artifact with a sidebar navigation, data table showing tasks with status filters, and a modal form for adding new tasks. Use shadcn/ui components for the table, dialog, and form elements. Include state management for the task list and filtering logic.

Fonte: escrito a partir do SKILL.md nos próprios termos do skill.

Verifique o Primeiro Resultado

O que o próprio SKILL.md diz sobre como é um resultado correto:

  • Use ferramentas disponíveis como Playwright ou Puppeteer para testar ou visualizar o artefato, se solicitado ou se surgirem problemas
  • Verifique se o design evita layouts centralizados em excesso, gradientes roxos, cantos arredondados uniformes e a fonte Inter

No OpenDesign o web-artifacts-builder já vem incluído: Plugins → Skills, selecione-o na barra superior.

Baixar OpenDesignLer o quickstart

05 Código aberto, rastreável

Fonte, Licença e Verificação

De onde vêm os fatos desta página e quando foram verificados pela última vez.

Author
Anthropic
Repository
github.com/anthropics/skills Branch main
Arquivo da skill
skills/web-artifacts-builder/SKILL.md Checksum de conteúdo registrado na verificação; commit 34040c9
License
Apache-2.0 De skills/web-artifacts-builder/LICENSE.txt; SKILL.md diz "Termos completos em LICENSE.txt".
Estrelas do repositório
176.183 Snapshot do GitHub tirado em 14/09/2026 para todo o repositório anthropics/skills, que contém 7 skills neste catálogo. Não é uma classificação ou contagem de uso para web-artifacts-builder.
Verificado pelo OpenDesign
2026-09-14 Arquivo fonte, caminho, texto de licença e contagem de estrelas foram verificados. Incluído no OpenDesign main (verificado em 2026-08-28); uma execução real não foi registrada nesta página.

Dentro do SKILL.md

  1. Diretrizes de Design e EstiloInstruções para evitar padrões de AI slop, como centralização excessiva, gradientes roxos, cantos arredondados uniformes e a fonte Inter
  2. Início RápidoWorkflow de cinco etapas, da inicialização ao desenvolvimento, empacotamento, compartilhamento e teste opcional
  3. Etapa 1: Inicializar o ProjetoExecute init-artifact.sh para criar um projeto React configurado com TypeScript, Tailwind, componentes shadcn/ui e Parcel
  4. Etapa 2: Desenvolva Seu ArtefatoEdite os arquivos gerados para construir o artefato seguindo as orientações de tarefas comuns de desenvolvimento
  5. Etapa 3: Empacotar em um Único Arquivo HTMLExecute bundle-artifact.sh para criar um bundle.html autocontido com JavaScript, CSS e dependências embutidos
  6. Etapa 4: Compartilhar o Artefato com o UsuárioCompartilhe o arquivo HTML empacotado na conversa para visualização como artefato
  7. Etapa 5: Testar/Visualizar o Artefato (Opcional)Teste opcional com ferramentas como Playwright ou Puppeteer, evitando testes antecipados para reduzir a latência
  8. ReferênciaLink para a documentação dos componentes shadcn/ui
A Descrição da Própria Skill
"Conjunto de ferramentas para criar artefatos HTML elaborados e com múltiplos componentes no 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 de arquivo único."

Descrição do front-matter do SKILL.md. O arquivo completo tem cerca de 3.073 caracteres. Leia o arquivo completo no GitHub.

06 Antes de instalar

Perguntas sobre o Skill web-artifacts-builder

As respostas vêm do SKILL.md conforme lido em 2026-09-14, e não de uma execução registrada.

Quais componentes e bibliotecas já estão instalados?

O script de inicialização cria um projeto com React 18, TypeScript via Vite, Tailwind CSS 3.4.1 com theming do shadcn/ui, mais de 40 componentes shadcn/ui pré-instalados, todas as dependências do Radix UI e Parcel configurado para empacotamento. Os aliases de caminho são configurados para que você possa importar usando o prefixo at-slash.

Web Artifacts Builder

Execute web-artifacts-builder em uma tarefa real de design de UI.

A skill web-artifacts-builder vem dentro do OpenDesign. Baixe o aplicativo, escolha a skill em Plugins → Skills, cole o prompt acima e leia o plano antes do resultado.

Baixar OpenDesignVer todas as skills
Terminal
npx skills add https://github.com/anthropics/skills --skill web-artifacts-builder