Create Game Vfx

From the author

Create readable, performance-safe Three.js game visual effects. Use for attacks, impacts, damage feedback, status effects, spell trails, particles, shaders, telegraphs, quality tiers, and reduced-motion alternatives.

— the description by Meng To

AutoGineer summary

Written by AutoGineer from the skill’s own files, not by the author

This skill provides a structured approach to creating game visual effects (VFX) using Three.js, emphasizing gameplay clarity and technical performance. It guides developers through the entire lifecycle of an effect, from initial specification and gameplay meaning to implementation best practices like object pooling and cleanup, and finally to rigorous verification across different hardware and accessibility settings.

What it does

Defines a specification process for VFX including triggers, duration, and gameplay meaning.
Provides best practices for performance-safe implementation in Three.js.
Outlines strategies for managing object lifecycles and memory usage.
Establishes a verification checklist for visual readability and technical stability.
Includes guidance on accessibility through reduced-motion alternatives.
Categorizes effects into telegraphs, contact, success, failure, and status visuals.

When to use it

When designing visual feedback for game actions like attacks, impacts, or spell effects.
When optimizing existing Three.js visual effects for better performance.
When ensuring visual effects remain readable during intense gameplay scenarios.
When implementing accessibility features like reduced-motion modes for game visuals.

Advantages

Improves gameplay clarity by prioritizing meaning over spectacle.
Reduces performance overhead through object pooling and efficient resource management.
Ensures consistent behavior across different quality tiers and device capabilities.
Prevents memory leaks through idempotent cleanup rules.

Usage examples

“How should I design a spell trail effect for my Three.js game?”: The agent will guide you to define the spell's trigger, duration, and gameplay meaning, while suggesting performance-safe implementation techniques like object pooling and particle caps.
“What should I check to ensure my game's explosion VFX is performance-safe?”: The agent will provide a verification checklist covering draw calls, frame time, cleanup idempotency, and behavior during pause/resume or low-quality settings.

Install

Download the skill as a ZIP:
https://autogineer.com/agent-skills/mengto/create-game-vfx/download

Unzip it into the cross-client skills folder of your project:

mkdir -p .agents/skills && unzip create-game-vfx.zip -d .agents/skills

Documentation by Meng To

Make the gameplay meaning visible before adding spectacle.

Specify

For every effect define trigger, owner, duration, gameplay meaning, camera-distance silhouette, color hierarchy, spawn cap, cleanup rule, and reduced-motion equivalent. Separate telegraph, contact, success, failure, and lingering status visuals.

Implement safely

Pool short-lived objects, reuse materials/geometry, cap particles, and avoid per-frame allocation. Use additive/transparency sparingly around important UI and targets. Make cleanup idempotent so reset, death, and pause cannot leak effects.

Verify

Test overlaps, multiple targets, rapid repetition, pause/resume, lowest quality, reduced motion, and touch viewports. Sample the live encounter for warnings, draw calls, frame time, and visual readability.

Files

ATTRIBUTION.mdAdded by AutoGineer858 B
LICENSELicence file added by AutoGineer1.0 KiB
SKILL.md1.1 KiB
agents/openai.yaml197 B

agents/openai.yaml

interface:
  display_name: "Create Game VFX"
  short_description: "Build readable performance-safe Three.js VFX"
  default_prompt: "Use $create-game-vfx to build readable Three.js combat effects."

Requirements and compatibility

Works with: Claude Code, Claude apps, OpenAI Codex, GitHub Copilot, Cursor, Gemini CLI, Kiro, OpenCode, Goose, Amp, Roo Code, JetBrains Junie, Factory Droid, Devin (ex-Windsurf), Mistral Vibe, OpenHands, Letta

“Works with” means the tool reads the open Agent Skills format; a skill written for one tool may use features others lack.

Security

No issues found by our static scan· No issues found

A static scan is not a guarantee. Skills are third-party content: review a skill before you let an agent use it.

Web 3d Asset Pipeline
OpenAIOfficial
Prepare and optimize browser-game 3D assets. Use when the user asks for GLB or glTF shipping work, including Blender cleanup and export, collision or LOD setup, compression, texture packaging, and runtime validation.
Design and creativeClaude CodeClaude appsOpenAI Codex+14 more
Link-onlyGitHub stars of the source repository7.8k
3d Sky Background
Meng To· Community
Guidelines for creating camera-correct, coherent sky backgrounds and environment lighting for 3D scenes.
Design and creativeClaude CodeClaude appsOpenAI Codex+14 more
MITGitHub stars of the source repository7.3k
Design Action Combat
Meng To· Community
A framework for designing and testing readable, state-driven tactical combat systems for web-based games.
Design and creativeClaude CodeClaude appsOpenAI Codex+14 more
MITGitHub stars of the source repository7.3k
Author Game Levels
Meng To· Community
A structured workflow for designing and validating flat-plane Three.js game levels with a focus on readability and deterministic data.
Design and creativeClaude CodeClaude appsOpenAI Codex+14 more
MITGitHub stars of the source repository7.3k
Build Hybrid Game Assets
Meng To· Community
A structured workflow for planning, creating, and integrating hybrid 3D and 2D assets into Three.js web games.
Design and creativeClaude CodeClaude appsOpenAI Codex+14 more
MITGitHub stars of the source repository7.3k
Tune Enemy AI
Meng To· Community
A framework for designing, balancing, and testing legible, fair, and deterministic combat AI for action games.
Design and creativeClaude CodeClaude appsOpenAI Codex+14 more
MITGitHub stars of the source repository7.3k