Web Artifacts Builder

Vytvoří skutečnou aplikaci React s Vite + shadcn/ui a zabalí ji do jednoho přenosného HTML artefaktu.

od ThinkInAIXYZ · ThinkInAIXYZ/deepchat

Otestováno · Funguje ★ 8.8/10

Web Artifacts Builder — Vytvoří skutečnou aplikaci React s Vite + shadcn/ui a zabalí ji do jednoho přenosného HTML artefaktu.

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 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