web-artifacts-builder: empaquetar un frontend de varios componentes como artifact de Claude

Para quién

Usa web-artifacts-builder cuando hagas un artifact HTML de claude.ai complejo, de varios componentes, y necesites gestión de estado, enrutado o componentes shadcn/ui. La pila es React, Tailwind CSS y shadcn/ui. No lo uses para un artifact HTML/JSX simple de un solo archivo.

Encaja mejor si aceptas React 18 + TypeScript + Vite + Parcel (empaquetado) + Tailwind CSS + shadcn/ui. El resumen también menciona compatibilidad con Node 18+. El material no lista productos de agente. La página oficial de la guía es

https://raw.githubusercontent.com/anthropics/skills/main/skills/web-artifacts-builder/SKILL.md

Primera prueba en 3 minutos

El primer comando recomendado es el script de inicialización; no inventes otra ruta de carga:

scripts/init-artifact.sh

Este comando genera un repositorio frontend, así que escribe en disco. Confirma que el directorio actual se puede inicializar y luego ejecuta. Señal de éxito: se generó código frontend editable. No inicialices sin confirmar el directorio.

Tras el init, no empaquetes aún. Luego edita el código generado para convertirlo en tu interfaz de varios componentes. En estilo, evita el «AI slop» que nombra el material: nada de maquetación excesivamente centrada, degradados morados, radios uniformes ni Inter. Es una restricción de diseño reversible; antes de cambiar estilos, mira los archivos generados y confirma que no sobrescribirás la estructura que acabas de escribir.

Si solo quieres comprobar que la pila encaja, puedes parar en esta comprobación: sigue solo si necesitas estado, enrutado o shadcn/ui; si el objetivo es HTML de un solo archivo, detente aquí y no hagas init.

Casos de uso

Caso 1: inicializar y retocar una interfaz con estado. Primero scripts/init-artifact.sh, luego edita el código generado. El criterio de cierre: el repositorio se generó y cambiaste archivos generados, no que hayas arrancado un andamiaje no nombrado. El paso cuatro es mostrárselo al usuario, pero el extracto no escribe un comando de muestra; no inventes un previsualizador. Antes de mostrar, abre la página generada en local y confirma.

Caso 2: empaquetar el proyecto en un archivo único compartible. El comando es scripts/bundle-artifact.sh. Genera bundle.html, incrusta JavaScript, CSS y dependencias, listo para compartir como artifact en una conversación de Claude. Requisito: la raíz del proyecto debe tener index.html. Escribe en disco: confirma la ruta de bundle.html que se sobrescribirá y luego empaqueta. El criterio de cierre: aparece un bundle.html autocontenido en la raíz. Si falta index.html, no asumas que el script lo creará por ti.

Límites de uso

Solo para artifacts complejos, de varios componentes, que necesitan estado/enrutado/shadcn/ui, no HTML/JSX simple de un archivo. La pila queda fija: React 18, TypeScript, Vite, Parcel, Tailwind, shadcn/ui. El producto empaquetado es bundle.html; la raíz debe tener index.html. Evita el centrado excesivo, degradados morados, radios uniformes e Inter.

No inventes una ruta de instalación aparte de init y bundle. El material no da una lista de clientes ni dice a qué comando debería pasar un archivo simple. Antes de sobrescribir bundle.html o inicializar un directorio no vacío, confirma los efectos secundarios. Más allá de estos cuatro pasos y prohibiciones de estilo ya escritos, esta guía no cubre el resto.