Initializes a React 18 + TypeScript + Vite project with Tailwind CSS and 40+ shadcn/ui components, then bundles everything with Parcel and html-inline into one self-contained bundle.html for claude.ai artifacts. Intended for complex artifacts needing state, routing or shadcn/ui.
O que ela faz
Onde Web Artifacts Builder roda e o que acrescenta, segundo a documentação
Initializes a project with scripts/init-artifact.sh
Preconfigures React, TypeScript, Vite, Tailwind 3.4.1, path aliases and shadcn/ui
Bundles to a single inlined bundle.html with scripts/bundle-artifact.sh
Advises against generic AI-slop styling (centered layouts, purple gradients, Inter font)
Testing is optional and done after presenting the artifact
Quando usar
Boa adequação
Complex claude.ai artifacts needing state management, routing or shadcn/ui
Não indicado para
Simple single-file HTML or JSX artifacts
Como instalar o Web Artifacts Builder
Você precisa de: Node 18+ (script pins a compatible Vite version); index.html in project root for bundling
Register the marketplace in Claude Code: /plugin marketplace add anthropics/skills
Install the bundle that contains it: /plugin install example-skills@anthropic-agent-skills
Or copy the skill folder to ~/.claude/skills/web-artifacts-builder/ (personal) or .claude/skills/web-artifacts-builder/ (project)
Mention the task in a prompt; Claude loads the skill automatically when the SKILL.md description matches
Permissões e segurança
A que ela tem acesso
Runs shell scripts that install npm packages (parcel, html-inline and others) and build files
Notas de segurança dos mantenedores
Anthropic repo disclaimer: skills are provided for demonstration and educational purposes; behavior in Claude may differ
Revise a fonte antes de conceder ao agente acesso a credenciais ou sistemas de produção. Documentamos o que os mantenedores informam; não auditamos o código.
Limitações
Repo README says skills are demonstration/educational examples
Ferramenta de programação agêntica da Anthropic que lê sua base de código, edita arquivos e executa comandos pelo terminal, por IDEs, pelo app desktop ou pelo navegador.
O plano gratuito termina em: Não há plano gratuito: o Claude Code está incluído nas assinaturas pagas do Claude (Pro, Max, Team, Enterpris…
How do I install the web-artifacts-builder skill in Claude Code?
Add the marketplace with /plugin marketplace add anthropics/skills and install the bundle containing it, or copy skills/web-artifacts-builder into ~/.claude/skills/. fonte
When does Claude use the web-artifacts-builder skill?
Claude loads it automatically when the request matches the description field in its SKILL.md frontmatter. fonte
What license does the web-artifacts-builder skill use?
Its SKILL.md points to LICENSE.txt, which is the Apache License 2.0. fonte
