Web Artifacts Builder

Genera una aplicación React real con Vite + shadcn/ui y la empaqueta en un único artefacto HTML portátil.

Por ThinkInAIXYZ · ThinkInAIXYZ/deepchat

Probado · Funciona ★ 8.8/10

Web Artifacts Builder — Genera una aplicación React real con Vite + shadcn/ui y la empaqueta en un único artefacto HTML portátil.

Qué hace

Herramientas de construcción para artefactos de claude.ai que superan un solo archivo JSX: un script init genera un proyecto Vite+TypeScript+Tailwind precargado con más de 40 componentes shadcn/ui reales desde un tarball empaquetado, luego un script bundle compila e incrusta todo (Parcel + html-inline) en un único bundle.html autocontenido. Explícitamente limitado a artefactos complejos, con estado y multicomponente — no a HTML/JSX simples de un solo archivo.

Informe de la prueba

Su script init descarga un tarball real de shadcn/ui de 40 componentes (verificado: descarga limpia a 19.9KB) y ejecuta una compilación genuina de Vite+Parcel en un único archivo HTML sin conexión — componentes reales basados en Radix, no imitaciones de Tailwind aproximadas a mano que produciría un artefacto base.

Probado el: 2026-07-13 · Claude Code 2.x (agent harness)

Instalación

git clone https://github.com/ThinkInAIXYZ/deepchat
cd deepchat
mkdir -p ~/.claude/skills
cp -r resources/skills/web-artifacts-builder ~/.claude/skills/web-artifacts-builder

Comandos y prompts de ejemplo

/web-artifacts-builderGenera una aplicación React real con Vite + shadcn/ui y la empaqueta en un único artefacto HTML portátil.

Los skills se activan con peticiones en lenguaje natural, sin comandos que memorizar. Tras instalarlo, prompts como estos lo activan (en inglés):

Build a multi-component React app with shadcn and bundle it into one HTML file
This artifact needs real state management, scaffold a Vite React project for it
Turn this stateful dashboard prototype into a single portable HTML artifact

Informe completo →