{
  "id": "web-artifacts-builder",
  "handle": "web-artifacts-builder",
  "canonicalUrl": "https://bestskillsforclaude.com/pt-br/skills/web-artifacts-builder",
  "language": "pt-BR",
  "alternates": {
    "en": "https://bestskillsforclaude.com/en/skills/web-artifacts-builder",
    "es": "https://bestskillsforclaude.com/es/skills/web-artifacts-builder",
    "pt-BR": "https://bestskillsforclaude.com/pt-br/skills/web-artifacts-builder",
    "ja": "https://bestskillsforclaude.com/ja/skills/web-artifacts-builder"
  },
  "category": {
    "id": "build-and-ship",
    "name": "Construir e publicar"
  },
  "publisher": {
    "name": "Anthropic",
    "url": "https://github.com/anthropics"
  },
  "source": "https://github.com/anthropics/skills/tree/main/skills/web-artifacts-builder",
  "documentation": null,
  "licenseAsStated": "Apache 2.0",
  "runtime": "Claude apps and Claude Code",
  "lastReviewed": "2026-08-05",
  "headline": "O que o web-artifacts-builder constrói que um prompt comum não constrói?",
  "summary": "Uma página completa que roda sozinha, em vez de um trecho que você precisa montar.",
  "verdict": "A skill web-artifacts-builder produz artefatos web autocontidos, ou seja uma única página que carrega o próprio HTML, estilo e comportamento e roda sem build. Use para ferramentas, calculadoras, painéis e demos que você quer entregar como um arquivo. Não é um jeito de construir um produto de várias páginas.",
  "bestFor": "Ferramentas internas, explicadores interativos, calculadoras e demos que precisam abrir sozinhos.",
  "skipIf": "Você está construindo uma aplicação real com rotas, autenticação e backend.",
  "keyTakeaways": [
    "Autocontido significa sem build e sem dependências para instalar.",
    "Combina naturalmente com frontend-design, que decide a aparência.",
    "Gestão de estado é o primeiro ponto que quebra. Teste clicando, não lendo.",
    "É ferramenta de artefato único, não framework de aplicação."
  ],
  "quickStart": [
    "Instale a partir de anthropics/skills, sob Apache 2.0.",
    "Descreva o artefato como um trabalho, por exemplo uma calculadora de preço com três entradas e resultado compartilhável.",
    "Abra o arquivo e use como usuário, porque bug de interação não aparece lendo código."
  ],
  "sections": [
    {
      "heading": "O que muda na prática",
      "paragraphs": [
        "A maior parte do código de front end gerado chega como fragmento que pressupõe um projeto em volta. Um artefato autocontido remove essa suposição: o resultado abre e funciona, então é algo que você entrega a um colega em vez de algo que você precisa terminar.",
        "Essa propriedade é o que o torna útil para ferramentas internas. Um time consegue uma calculadora ou um painel funcionando em uma passada, e melhora no lugar sem configurar nada."
      ]
    },
    {
      "heading": "Onde decepciona",
      "paragraphs": [
        "Tudo que precisa de persistência, autenticação ou servidor está fora por definição, e forçar o artefato nessa direção é como ele fica impossível de manter.",
        "Estado complexo é o outro limite. Quando várias entradas se afetam, artefatos gerados começam a se contradizer, por isso o teste honesto é usar e não ler."
      ]
    }
  ],
  "faq": [
    {
      "question": "O que é autocontido, na prática?",
      "answer": "O artefato carrega o próprio HTML, estilo e comportamento e roda sem build nem dependências instaladas."
    },
    {
      "question": "Dá para fazer um produto completo?",
      "answer": "Não. Use para artefatos avulsos; produto com rotas, contas e dados precisa de projeto normal."
    },
    {
      "question": "Como deixo bonito?",
      "answer": "Combine com frontend-design, que é a skill que decide a direção visual."
    }
  ],
  "sources": [
    {
      "label": "anthropics/skills no GitHub",
      "url": "https://github.com/anthropics/skills",
      "kind": "repository"
    },
    {
      "label": "anthropics/skills, pasta da skill web-artifacts-builder",
      "url": "https://github.com/anthropics/skills/tree/main/skills/web-artifacts-builder",
      "kind": "documentation"
    }
  ],
  "machineReadable": {
    "markdown": "https://bestskillsforclaude.com/pt-br/skills/web-artifacts-builder/content.md",
    "json": "https://bestskillsforclaude.com/pt-br/skills/web-artifacts-builder/skill.json"
  },
  "disclosure": "Editorial desk review based on the publisher's own repository. Not a security audit, a benchmark or a guarantee of maintenance."
}