low-health

Display a pulsing red vignette overlay when player health is low.

31|Updated Jan 19, 2026
One-click install
npx skills add https://github.com/verekia/r3f-gamedev --skill low-health
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: low-health
Source: https://github.com/verekia/r3f-gamedev/tree/main/skills/low-health
Command: npx skills add https://github.com/verekia/r3f-gamedev --skill low-health

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Display a pulsing red vignette overlay to visually indicate when the player's health is critically low, helping players notice danger quickly without obstructing gameplay.

Core Features & Use Cases

  • Pulsing full-screen overlay using a CSS inset box-shadow to create a vignette effect.
  • Non-interactive UI element that fades in/out with health fluctuations to signal danger.
  • Simple integration into existing React-based game UIs with minimal code changes.

Quick Start

Add the overlay component to render the red vignette when health is low.

Frequently Asked Questions about low-health

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add a pulsing red vignette overlay for low health in a React game UI?

A pulsing red vignette overlay for low health in a React game UI is created using a fixed, full-screen element with a CSS inset box-shadow that pulses to visually signal critical health without obstructing gameplay.

Does the pulsing red vignette overlay obstruct gameplay in real-time game UIs?

The pulsing red vignette overlay does not obstruct gameplay in real-time game UIs because it is a non-interactive full-screen element that fades in and out with health fluctuations to signal danger.

Can I use CSS inset box-shadow to create a vignette effect for critical health?

You can use a CSS inset box-shadow to create a vignette effect for critical health by applying it to a fixed, full-screen element that pulses to visually indicate when the player's health is low.

What is the best way to visually signal critical health without adding interactive UI elements?

The best way to visually signal critical health without adding interactive UI elements is a full-screen overlay using a pulsing CSS inset box-shadow, which fades in and out to indicate danger while remaining non-interactive.

How do I integrate a low health vignette into an existing React project?

To integrate a low health vignette into an existing React project, you add the overlay component to render the red vignette when health is low, requiring minimal code changes for simple integration.