Web Artifacts Builder - Claude Skill para artefactos React

Fuente: contenido adaptado de anthropics/skills (MIT). Última sincronización: 8 de julio de 2026, contra la actualización upstream del 20 de abril de 2026.

Resumen

La descripción oficial: "Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using React, Tailwind CSS, shadcn/ui. For complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file artifacts."

Ojo a la delimitación: los artefactos simples de un archivo no necesitan esta skill. Existe para el momento en que un proyecto supera un único bloque JSX.

Cómo funciona la skill

La SKILL.md es una pipeline de cinco pasos envuelta en guías de diseño:

1. Inicializar el proyecto con scripts/init-artifact.sh - un workspace React + Tailwind + shadcn/ui preconfigurado
2. Desarrollar con componentes reales, gestión de estado y routing
3. Empaquetar todo en un único archivo HTML con scripts/bundle-artifact.sh
4. Compartir el artefacto con el usuario
5. Probar/visualizar (paso opcional de verificación)

La skill incluye shadcn-components.tar.gz para instalar componentes sin acceso a red.

Qué contiene la carpeta de la skill

• scripts/init-artifact.sh - scaffolding del proyecto
• scripts/bundle-artifact.sh - bundler HTML de archivo único
• scripts/shadcn-components.tar.gz - biblioteca de componentes offline
• SKILL.md, LICENSE.txt

Lecciones para tus propias skills

• Los scripts ejecutables ganan a las instrucciones: en vez de describir el setup en prosa, la skill entrega shell scripts que Claude ejecuta.
• Empaquetar dependencias offline (el archivo shadcn) hace que la skill funcione en entornos aislados - un detalle que falta en la mayoría de skills comunitarias.

Ver en GitHub

skills/web-artifacts-builder