Web Artifacts Builder
Vytvoří skutečnou aplikaci React s Vite + shadcn/ui a zabalí ji do jednoho přenosného HTML artefaktu.
Otestováno · Funguje
Co umí
Nástroje pro sestavení artefaktů claude.ai, které přesahují jeden soubor JSX: inicializační skript vytvoří projekt Vite+TypeScript+Tailwind předem načtený s více než 40 skutečnými komponentami shadcn/ui z zabaleného tarballu, poté skript pro balení zkompiluje a vloží vše (Parcel + html-inline) do jednoho soběstačného souboru `bundle.html`. Explicitně zaměřeno na složité, stavové artefakty s více komponentami — nikoli jednoduché HTML/JSX soubory.
Testovací report
Jeho inicializační skript stáhne skutečný tarball shadcn/ui s 40 komponentami (ověřeno: stáhne se čistě na 19.9KB) a provede skutečné sestavení Vite+Parcel do jednoho offline HTML souboru — skutečné komponenty založené na Radixu, nikoli ručně aproximované napodobeniny Tailwindu, které by vytvořil základní artefakt.
Testováno: 2026-07-13 · Claude Code 2.x (agent harness)
Instalace
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
Příkazy a ukázkové prompty
/web-artifacts-builderVytvoří skutečnou aplikaci React s Vite + shadcn/ui a zabalí ji do jednoho přenosného HTML artefaktu.
Skilly se spouštějí běžnými požadavky — žádné příkazy k zapamatování. Po instalaci ho aktivují prompty jako tyto (anglicky):
Build a multi-component React app with shadcn and bundle it into one HTML fileThis artifact needs real state management, scaffold a Vite React project for itTurn this stateful dashboard prototype into a single portable HTML artifact