Inicializa un proyecto React 18 + TypeScript + Vite con Tailwind CSS y más de 40 componentes de shadcn/ui, y luego lo empaqueta todo con Parcel y html-inline en un único bundle.html autocontenido para artifacts de claude.ai. Pensado para artifacts complejos que necesitan estado, enrutamiento o shadcn/ui.
Qué hace
Dónde se ejecuta Web Artifacts Builder y qué añade, según su documentación
Inicializa un proyecto con scripts/init-artifact.sh
Preconfigura React, TypeScript, Vite, Tailwind 3.4.1, alias de rutas y shadcn/ui
Empaqueta en un único bundle.html con todo incluido mediante scripts/bundle-artifact.sh
Desaconseja el estilo genérico de IA (diseños centrados, degradados morados, fuente Inter)
Las pruebas son opcionales y se hacen después de presentar el artifact
Cuándo usarla
Buen encaje
Artifacts complejos de claude.ai que necesitan gestión de estado, enrutamiento o shadcn/ui
No apto para
Artifacts simples de HTML o JSX en un solo archivo
Cómo instalar Web Artifacts Builder
Necesitas: Node 18+ (el script fija una versión compatible de Vite); index.html en la raíz del proyecto para el empaquetado
Registra el marketplace en Claude Code: /plugin marketplace add anthropics/skills
Instala el paquete que la contiene: /plugin install example-skills@anthropic-agent-skills
O copia la carpeta de la skill a ~/.claude/skills/web-artifacts-builder/ (personal) o .claude/skills/web-artifacts-builder/ (proyecto)
Menciona la tarea en un prompt; Claude carga la skill automáticamente cuando coincide con la descripción de SKILL.md
Permisos y seguridad
A qué puede acceder
Ejecuta scripts de shell que instalan paquetes de npm (parcel, html-inline y otros) y generan archivos
Notas de seguridad de los responsables
Aviso del repo de Anthropic: las skills se ofrecen con fines de demostración y educativos; el comportamiento en Claude puede diferir
Revisa el código fuente antes de dar a un agente acceso a credenciales o sistemas de producción. Documentamos lo que declaran los responsables; no auditamos el código.
Limitaciones
El README del repo indica que las skills son ejemplos de demostración/educativos
¿Cómo instalo la skill web-artifacts-builder en Claude Code?
Añade el marketplace con /plugin marketplace add anthropics/skills e instala el paquete que la contiene, o copia skills/web-artifacts-builder en ~/.claude/skills/. fuente
¿Cuándo usa Claude la skill web-artifacts-builder?
Claude la carga automáticamente cuando la solicitud coincide con el campo description del frontmatter de su SKILL.md. fuente
¿Qué licencia usa la skill web-artifacts-builder?
Su SKILL.md remite a LICENSE.txt, que es la Apache License 2.0. fuente
