gaming-ui-state-management
Patterns for game-like interfaces - health bars, XP bars, mana bars. Apply when building RPG/retro gaming UI components with state-driven visuals.
Installation
Pick a client and clone the repository into its skills directory.
Installation
About this skill
Patterns for game-like interfaces - health bars, XP bars, mana bars. Apply when building RPG/retro gaming UI components with state-driven visuals.
How to use
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.