web-artifacts-builder

Zestaw narzędzi do budowania złożonych, wielokomponentowych artefaktów HTML dla claude.ai z użyciem nowoczesnych technologii frontendowych. Wykorzystaj React 18, TypeScript, Tailwind CSS i bibliotekę shadcn/ui do tworzenia interaktywnych aplikacji wymagających zarządzania stanem, routingu lub zaawansowanych komponentów interfejsu. Idealny dla projektów przekraczających możliwości prostych plików HTML/JSX.

1. Zainstaluj skill web-artifacts-builder z repozytorium Anthropic. Upewnij się, że masz zainstalowany Node.js w wersji 18 lub wyższej.

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

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

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

5. Wyświetl wygenerowany bundle.html użytkownikowi. Plik można bezpośrednio udostępnić i otworzyć w przeglądarce bez dodatkowych zależności.

6. Opcjonalnie przetestuj artefakt w przeglądarce, aby upewnić się, że wszystkie komponenty działają prawidłowo i interfejs wygląda zgodnie z oczekiwaniami.