web-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
Zainstaluj skill web-artifacts-builder z repozytorium Anthropic. Upewnij się, że masz zainstalowany Node.js w wersji 18 lub wyższej.
Zainicjuj nowy projekt artefaktu, uruchamiając skrypt inicjalizacyjny z poleceniem bash scripts/init-artifact.sh nazwa-projektu. Przejdź do utworzonego katalogu projektu. Skrypt automatycznie skonfiguruje React z TypeScript, Tailwind CSS 3.4.1, shadcn/ui z 40+ preinstalowanymi komponentami, aliasy ścieżek oraz Parcel do bundlowania.
Rozwijaj swój artefakt, edytując wygenerowane pliki zgodnie z potrzebami. Możesz modyfikować komponenty React, dodawać stany, routing oraz wykorzystywać dostępne komponenty shadcn/ui. Pamiętaj, aby unikać nadmiernie wycentrowanych layoutów, purpurowych gradientów i jednolitych zaokrąglonych narożników.
Gdy artefakt będzie gotowy, zbundluj całą aplikację do jednego pliku HTML, uruchamiając bash scripts/bundle-artifact.sh. Polecenie utworzy plik bundle.html zawierający cały kod JavaScript, CSS i zależności wbudowane w jeden samodzielny plik.
Wyświetl wygenerowany bundle.html użytkownikowi. Plik można bezpośrednio udostępnić i otworzyć w przeglądarce bez dodatkowych zależności.
Opcjonalnie przetestuj artefakt w przeglądarce, aby upewnić się, że wszystkie komponenty działają prawidłowo i interfejs wygląda zgodnie z oczekiwaniami.