SkillProof tested Claude skills

Web Artifacts Builder

Skapar en grund för en verklig Vite + shadcn/ui React-app och paketerar den till en portabel HTML-artefakt.

av ThinkInAIXYZ · ThinkInAIXYZ/deepchat

Testad · Fungerar ★ 8.8/10

Web Artifacts Builder — Skapar en grund för en verklig Vite + shadcn/ui React-app och paketerar den till en portabel HTML-artefakt.

Vad den gör

Byggverktyg för claude.ai-artefakter som växer ur en enda JSX-fil: ett init-skript skapar en grund för ett Vite+TypeScript+Tailwind-projekt förladdat med 40+ verkliga shadcn/ui-komponenter från en paketerad tarball, sedan kompilerar och inbäddar ett bundle-skript allt (Parcel + html-inline) till en enda självständig bundle.html. Uttryckligen avgränsat till komplexa, tillståndskänsliga, flerkomponents-artefakter — inte enkla enfils-HTML/JSX.

Testrapport

Dess init-skript hämtar en verklig 40-komponents shadcn/ui tarball (verifierat: laddas ner rent vid 19.9KB) och driver en äkta Vite+Parcel-byggprocess till en enda offline HTML-fil — verkliga Radix-baserade komponenter, inte hand-approximerade Tailwind-liknande komponenter som en baslinje-artefakt skulle producera.

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

Kommandon och exempelprompter

  • /web-artifacts-builderSkapar en grund för en verklig Vite + shadcn/ui React-app och paketerar den till en portabel HTML-artefakt.

Skills triggas av vanliga förfrågningar — inga kommandon att memorera. Efter installationen aktiverar prompter som dessa skillen (på engelska):

  • 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

Läs hela rapporten →