Agent-Skills.md

Agent Skills: Health Bars

Display health bars above characters using CSS styling.

UncategorizedID: verekia/r3f-gamedev/health-bars

Repository

verekia/r3f-gamedev
verekiaLicense: MIT
29

Install this agent skill to your local

pnpm dlx add-skill https://github.com/verekia/r3f-gamedev/tree/HEAD/skills/health-bars

Skill Files

Browse the full folder contents for health-bars.

Download Skill

Loading file tree…

skills/health-bars/SKILL.md

Skill Metadata

Name
health-bars
Description
Display health bars above characters using CSS styling.

Health Bars

Display health bars above characters using CSS styling.

Technique

Use Drei's Html component to render styled health bars in 3D space. Update the health bar width by manipulating the DOM element's transform: scaleX() via a ref in useFrame.

Key Concepts

  • Html from @react-three/drei with center and distanceFactor props
  • Use refs to directly manipulate DOM styles for performance
  • scaleX transform for smooth width changes with CSS transitions
  • Style with CSS (gradients, borders, skew transforms)

Usage

const healthRef = useRef<HTMLDivElement>(null)

useFrame(() => {
  healthRef.current.style.transform = `scaleX(${healthPercent})`
}, { fps: 1 })

<Html center position-y={1.5} distanceFactor={5}>
  <div className="bg-red-500">
    <div ref={healthRef} className="bg-green-500 origin-left transition-transform" />
  </div>
</Html>

This skill is part of verekia's r3f-gamedev.