🎯

gaming-ui-state-management

🎯Skill

from theorcdev/8bitcn-ui

What it does

gaming-ui-state-management skill from theorcdev/8bitcn-ui

📦

Part of

theorcdev/8bitcn-ui(23 items)

gaming-ui-state-management

Installation

📋 No install commands found in docs. Showing default command. Check GitHub for actual instructions.

Quick InstallInstall with npx

npx skills add theorcdev/8bitcn-ui --skill gaming-ui-state-management

Need more details? View full documentation on GitHub →

14Installs

1,576

Last UpdatedJan 22, 2026

View on GitHub Back to Skills

Skill Details

SKILL.md

Patterns for game-like interfaces - health bars, XP bars, mana bars. Apply when building RPG/retro gaming UI components with state-driven visuals.

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:

```tsx

import { Progress } from "@/components/ui/8bit/progress";

function HealthBar({ value = 100, ...props }: BitProgressProps) {

return (

{...props}

value={value}

variant="retro"

progressBg="bg-red-500"

);

}

function ManaBar({ value = 100, ...props }: BitProgressProps) {

return (

{...props}

value={value}

variant="retro"

progressBg="bg-blue-500"

);

}

function XpBar({ value = 0, ...props }: BitProgressProps) {

return (

{...props}

value={value}

variant="retro"

progressBg="bg-yellow-500"

);

}

```

Level Up Notification

Show animated messages when thresholds are reached:

```tsx

function XpBar({

value,

levelUpMessage = "LEVEL UP!",

...props

}: XpBarProps) {

const isLevelUp = value === 100;

return (

{...props}

value={value}

progressBg="bg-yellow-500"

className={cn(isLevelUp && "animate-pulse")}

{isLevelUp && (

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}

)}

);

}

```

Conditional Animations

Use conditional classes for game state feedback:

```tsx

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:

```tsx

function EnemyHealth({ health, maxHealth }: EnemyHealthProps) {

const percentage = (health / maxHealth) * 100;

return (

ENEMY

{health}/{maxHealth}

);

}

```

Key Principles

Base component - Extend Progress, don't reimplement
Color coding - Red (health), Blue (mana), Yellow (XP), Green (stamina)
Retro text - Use .retro class for pixel font numbers
State animations - Use animate-pulse, animate-blink for 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 implementation
components/ui/8bit/xp-bar.tsx - XP bar with level up notification
components/ui/8bit/mana-bar.tsx - Mana bar implementation

More from this repository10

🎯

fumadocs-mdx-structure🎯Skill

fumadocs-mdx-structure skill from theorcdev/8bitcn-ui

🎯

rendering-animate-svg🎯Skill

rendering-animate-svg skill from theorcdev/8bitcn-ui

🎯

fumadocs-registry-integration🎯Skill

fumadocs-registry-integration skill from theorcdev/8bitcn-ui

🎯

8-bit-pixel-art-patterns🎯Skill

8-bit-pixel-art-patterns skill from theorcdev/8bitcn-ui

🎯

fumadocs-component-docs🎯Skill

fumadocs-component-docs skill from theorcdev/8bitcn-ui

🎯

retro-css-architecture🎯Skill

retro-css-architecture skill from theorcdev/8bitcn-ui

🎯

animation-performance-retro🎯Skill

animation-performance-retro skill from theorcdev/8bitcn-ui

🎯

bundle-barrel-imports🎯Skill

bundle-barrel-imports skill from theorcdev/8bitcn-ui

🎯

8bit-docs-patterns🎯Skill

Generates retro-styled, gaming-themed documentation with 8-bit terminology, realistic game data examples, and pixel font styling for UI components.

🎯

shadcn-ui-conventions🎯Skill

shadcn-ui-conventions skill from theorcdev/8bitcn-ui