Web Artifacts Builder

Génère une véritable application React Vite + shadcn/ui et la regroupe en un seul artefact HTML portable.

par ThinkInAIXYZ · ThinkInAIXYZ/deepchat

Testé · Fonctionne ★ 8.8/10

Web Artifacts Builder — Génère une véritable application React Vite + shadcn/ui et la regroupe en un seul artefact HTML portable.

Ce que fait

Outils de build pour les artefacts claude.ai qui dépassent un seul fichier JSX : un script d'initialisation génère un projet Vite+TypeScript+Tailwind préchargé avec plus de 40 composants shadcn/ui réels à partir d'une archive tarball, puis un script de bundle compile et intègre tout (Parcel + html-inline) dans un seul `bundle.html` autonome. Explicitement conçu pour les artefacts complexes, avec état, multi-composants — pas pour de simples fichiers HTML/JSX uniques.

Rapport de test

Son script d'initialisation télécharge une véritable archive tarball de 40 composants shadcn/ui (vérifié : téléchargement propre à 19.9KB) et pilote une véritable compilation Vite+Parcel vers un seul fichier HTML hors ligne — de vrais composants basés sur Radix, pas des imitations Tailwind approximées à la main qu'un artefact de base produirait.

Testé le: 2026-07-13 · Claude Code 2.x (agent harness)

Installation

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

Commandes et exemples de prompts

/web-artifacts-builderGénère une véritable application React Vite + shadcn/ui et la regroupe en un seul artefact HTML portable.

Les skills se déclenchent sur des demandes en langage courant — aucune commande à retenir. Après installation, des prompts comme ceux-ci l'activent (en anglais) :

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

Rapport complet →