ReddRadar
Agent skill
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.
Install this agent skill to your Project
npx add-skill https://github.com/TheOrcDev/8bitcn-ui/tree/main/.claude/skills/gaming-ui-state-management
SKILL.md
Gaming UI State Management
Create game-like interfaces with state-driven visuals for health, XP, mana, and other game metrics.
Progress Bar Pattern
Build on the Progress component with game-specific variants:
import { Progress } from "@/components/ui/8bit/progress";
function HealthBar({ value = 100, ...props }: BitProgressProps) {
return (
<Progress
{...props}
value={value}
variant="retro"
progressBg="bg-red-500"
/>
);
}
function ManaBar({ value = 100, ...props }: BitProgressProps) {
return (
<Progress
{...props}
value={value}
variant="retro"
progressBg="bg-blue-500"
/>
);
}
function XpBar({ value = 0, ...props }: BitProgressProps) {
return (
<Progress
{...props}
value={value}
variant="retro"
progressBg="bg-yellow-500"
/>
);
}
Level Up Notification
Show animated messages when thresholds are reached:
function XpBar({
value,
levelUpMessage = "LEVEL UP!",
...props
}: XpBarProps) {
const isLevelUp = value === 100;
return (
<div className="relative">
<Progress
{...props}
value={value}
progressBg="bg-yellow-500"
className={cn(isLevelUp && "animate-pulse")}
/>
{isLevelUp && (
<div
className={cn(
"retro",
"absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2",
"text-[0.625rem] text-black",
"pointer-events-none whitespace-nowrap z-10",
"drop-shadow-[1px_1px_0_#fff] [text-shadow:1px_1px_0_#fff,-1px_-1px_0_#fff,1px_-1px_0_#fff,-1px_1px_0_#fff]",
"animate-[blink_0.5s_step-end_infinite]"
)}
>
{levelUpMessage}
</div>
)}
</div>
);
}
Conditional Animations
Use conditional classes for game state feedback:
<div
className={cn(
"transition-colors duration-300",
health <= 25 ? "animate-pulse bg-red-500/20" : "bg-green-500",
health > 25 && health <= 50 && "bg-yellow-500/20"
)}
/>
Enemy Health Display
Compact display for combat scenarios:
function EnemyHealth({ health, maxHealth }: EnemyHealthProps) {
const percentage = (health / maxHealth) * 100;
return (
<div className="retro text-xs">
<div className="flex justify-between mb-1">
<span>ENEMY</span>
<span>{health}/{maxHealth}</span>
</div>
<HealthBar value={percentage} className="h-2" />
</div>
);
}
Key Principles
- Base component - Extend Progress, don't reimplement
- Color coding - Red (health), Blue (mana), Yellow (XP), Green (stamina)
- Retro text - Use
.retroclass for pixel font numbers - State animations - Use
animate-pulse,animate-blinkfor feedback - Text shadows - White text-shadow for legibility on colored backgrounds
- Compact sizing - Smaller text (text-xs, text-[0.625rem]) for game UIs
Reference Components
components/ui/8bit/health-bar.tsx- Health bar implementationcomponents/ui/8bit/xp-bar.tsx- XP bar with level up notificationcomponents/ui/8bit/mana-bar.tsx- Mana bar implementation
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
TheOrcDev/8bitcn-ui
component-wrapper-architecture
Best practices for wrapping shadcn/ui components. Apply when creating 8-bit styled variants of existing shadcn/ui components.
TheOrcDev/8bitcn-ui
registry-component-patterns
Register components in registry.json for shadcn/ui add command. Apply when adding new 8-bit components to the component library.
TheOrcDev/8bitcn-ui
retro-css-architecture
Organize 8-bit CSS with custom properties, pixel fonts, and responsive pixel art. Apply when creating or modifying retro-styled components and their CSS.
TheOrcDev/8bitcn-ui
bundle-barrel-imports
Import directly from source files instead of barrel files. Apply when using libraries like lucide-react, @mui/material, or @radix-ui/react-* to reduce bundle size and improve dev boot time.
TheOrcDev/8bitcn-ui
rendering-hoist-jsx
Extract static JSX elements outside components to avoid re-creation on every render. Apply when rendering static elements repeatedly or in lists.
TheOrcDev/8bitcn-ui
rerender-functional-setstate
Use functional setState updates to prevent stale closures and unnecessary callback recreations. Apply when updating state based on the current state value in React components.
Didn't find tool you were looking for?