gaming-ui-state-management
Gotowe wzory do interfejsów RPG – paski zdrowia, doświadczenia i many z animacjami retro.
Instalacja
Wybierz klienta i sklonuj repozytorium do odpowiedniego katalogu skilli.
Instalacja
O skillu
Skill Claude'a do budowania interfejsów inspirowanych grami retro. Zawiera komponenty pasków postępu (health bar, mana bar, XP bar) z wariantem retro i animacjami stanu. Idealne do tworzenia UI dla gier lub aplikacji z grywalizacją, gdzie wizualne wskaźniki reagują na zmianę wartości. Komponenty wykorzystują bibliotekę 8bit i obsługują zdarzenia takie jak level up z animowanymi powiadomieniami.
Jak używać
Zainstaluj skill w swoim projekcie Claude'a, dodając folder gaming-ui-state-management do katalogu .claude/skills.
Zaimportuj komponent Progress z biblioteki 8bit UI: import { Progress } from "@/components/ui/8bit/progress".
Utwórz komponent HealthBar, przekazując props value (wartość od 0 do 100) i ustawiając progressBg na "bg-red-500" dla koloru czerwonego paska zdrowia.
Analogicznie stwórz ManaBar z progressBg="bg-blue-500" i XpBar z progressBg="bg-yellow-500", dostosowując kolory do potrzeb gry.
Dodaj animacje dla zdarzeń progowych – na przykład gdy XP osiągnie 100, wyświetl powiadomienie "LEVEL UP!" z klasą animate-pulse i animacją blink, aby puls był widoczny dla gracza.
Integruj komponenty w interfejsie gry, łącząc je ze stanem aplikacji tak, aby paski aktualizowały się w czasie rzeczywistym wraz ze zmianą wartości zdrowia, many lub doświadczenia.