artifacts-builder
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX
Installation
Pick a client and clone the repository into its skills directory.
Installation
About this skill
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
How to use
Uruchom skrypt inicjalizacyjny poleceniem
bash scripts/init-artifact.sh nazwa-projektu, a następnie przejdź do utworzonego katalogu. Skrypt przygotuje w pełni skonfigurowany projekt React z TypeScript, Vite, Tailwind CSS i 40+ komponentami shadcn/ui.Edytuj wygenerowane pliki, aby zbudować swoją aplikację. Możesz korzystać ze wszystkich preinstalowanych komponentów shadcn/ui, aliasów ścieżek (
@/) i pełnego wsparcia TypeScript.Po zakończeniu pracy uruchom
bash scripts/bundle-artifact.sh, aby spakować całą aplikację React w jeden plikbundle.html. Plik zawiera wbudowany JavaScript, CSS i wszystkie zależności.Udostępnij wygenerowany plik
bundle.htmlużytkownikowi — działa samodzielnie bez dodatkowych plików.Opcjonalnie przetestuj artefakt w przeglądarce, aby upewnić się, że wszystkie komponenty i funkcjonalności działają prawidłowo.