bufatechno-webgamedev

@bufatechno⭐ 10 stars

BUFATECHNO WEB GAME DEV — skill for building complete, production-ready web games with Three.js (WebGPU/TSL) or Babylon.js (WebGPU/Havok). Optimized for ZCode and Claude. Covers scaffolding, ECS, PBR/IBL, WebGPU/TSL, VFX/particles/post-processing, Web Audio, assets (GLTF/Draco/KTX2/Splat), 2D canvas/sprites, and animation (mixer/skeletal/morph/blending). Use when user asks to create, build or ship any 3D browser game — FPS, voxel, third-person, platformer, racing, flight, tower defense, RPG, multiplayer, WebXR/VR. Triggers on 'Three.js game', 'Babylon.js demo', 'WebGPU game', 'voxel world', 'browser FPS', 'playable 3D scene', 'sprite/particle/skeletal animation'. Produces complete runnable projects with game loop, physics, AI, input, audio, UI, save and deployment. Prefer over generic web guidance.

Choose how to use this skill

You do not need every option. Choose the path your AI client supports. The stable page stays the same; versioned files are immutable.

Adopt or update this skill from https://proskills.md/skills/other/bufatechno-bufatechno-webgamedev. First identify the installation path supported by this platform, detect whether it is already installed, compare the installed version with the latest stable release, show me what will change, and only then install or update it. If no native installer is available, use the complete package or source fallback described on the page.

1. Native installer

This listing has no registered native installer command. Use the complete package or source fallback below, depending on what your client supports.

Do not guess an installer command or replace an existing version without reviewing the diff.

2. Complete package recommended

Download the ZIP when available. It includes SKILL.md plus the references, security notes and version metadata.

No complete ProSkills package is published for this listing yet.

3. Prompt-only

Copy the prompt above when the agent can read the stable page or when you want to adopt the workflow without installing a skill.

Need only the instruction file?

Download SKILL.md only if your client requires a single file. The complete ZIP is safer for a full installation because it preserves the references and release context.

No path installs or executes anything by itself. Your agent still needs access to the project files. Before updating, compare the installed version and review the diff.

—/10

// RATINGS

⭐GitHub Stars

⭐ 10 on GitHubGitHub ↗

Growing

🟢ProSkills Score

—

📍

Not yet listed on ClawHub or SkillsMP

// README

BUFATECHNO WEB GAME DEV

Skill optimized for ZCode & Claude (primary) to build complete, production-ready 3D web games using Three.js (WebGPU/WebGL2 + TSL) or Babylon.js (WebGPU/WebGL2 + Havok) — like a renowned game programmer.

2026 stack: three@^0.175.0 (WebGPURenderer + TSL NodeMaterial), @babylonjs/*@^8.15.0 (clustered lighting, Frame Graph, Gaussian Splatting), vite@^7.0.0 (baseline-widely-available, Rolldown). Primary support: ZCode & Claude.

Quick Links: Installation • Changelog • Skill • Support

What You Can Build

This skill covers the full scope of a browser 3D game — project, logic, visuals, effects, audio, 3D, 2D, animation:

Structured project: scaffold src/world|player|animation|vfx|systems|assets|utils + public/manifest.json + PWA sw.js, Path A CDN (double-click) or Path B Vite 7
Game logic: fixed-timestep 1/60 + THREE.Timer, StateMachine, ECS, object Pool, AI behavior states, save IndexedDB, multiplayer prediction/reconciliation
Visual & Graphics: PBR/Standard/Physical + IBL, directional+hemi lights 2048² shadows, FogExp2, TSL MeshStandardNodeMaterial (WGSL/GLSL), clustered 1000 lights (Babylon 9), Frame Graph 40% mem save
Effects (VFX): pooled particles (Points/InstancedMesh, Babylon Node Particles), post-processing bloom/vignette (EffectComposer/Frame Graph), volumetric light shafts, screen shake, hit flash, trails, decals, Gaussian Splatting .splat/.ply/.spz/.sog
Audio: procedural oscillators (shoot/hit/jump), file decode cache, positional HRTF panner, master/music/sfx routing, AudioContext resume on gesture + mute toggle
3D imagery: GLTF/GLB + Draco gltf/ + KTX2 Basis worker, async loader + ModelCache clone, fallback magenta capsule, Gaussian Splat streaming/LOD, fallback primitives
2D imagery: procedural canvas textures (wood/stone/brick/grass/metal, 16px pixel art), atlas, Sprite sheets, normal map Sobel, CanvasTexture/DynamicTexture, SpriteMaterial
Animation: AnimationMixer+AnimationClip+AnimationAction, Timer r183+, skeletal SkinnedMesh+SkeletonHelper, bone attach, morphTargetInfluences, weight blending + additive makeClipAdditive, bezier interpolation, retargeting (Babylon 9 tool), CCD IK
Game types: FPS, voxel/sandbox, third-person, platformer, racing, RPG, tower defense, top-down, multiplayer, WebXR/VR
Optimization: instanced/ThinInstances, frustum LOD, texture atlas, DPR cap 2, worker chunk, draw calls mobile ≤50 desktop ≤200, 60 FPS 100+ objects
External libraries (Lite vs Full): Lite default zero new deps (~300KB); Full opt-ins per-category — three-mesh-bvh collision, cannon-es/Rapier/Havok physics, gsap menu tween, howler file music, nipplejs joystick, CC0 sources (Quaternius/Kenney/Poly Pizza/Mixamo) — each with CDN+npm snippets, Lite fallback, and credits (see references/external-libraries.md)
Shipping: manual matrix 40+ items, Playwright smoke, deploy GitHub Pages/Netlify/Vercel/itch.io, PWA, Sentry/gtag

How to Use

Auto trigger for:

"Build me an FPS game in Three.js with skeletal animation"
"Create voxel game with particles and sound"
"Make third-person with bloom and sprite HUD"
"Babylon.js game with Havok physics and volumetric light"
"WebGPU TSL shader game"
"Multiplayer browser game" / "WebXR VR game"

Skill will: intake 10 questions → design professional architecture → select framework (matrix 2026) → scaffold (CDN/Vite) → implement 15 systems in order → validate 15 checklist → deliver runnable.

Screenshot Example — Games Built with This Skill

Example output from this skill — voxel sandbox game (Three.js, procedural textures, day/time HUD, hotbar inventory):

More examples in screenshoot-example/.

Skill Structure

bufatechno-webgamedev/
├── SKILL.md                       # Main skill — professional ~375 lines (core) + Weak-Model Quick Start
├── README.md                      # This file
├── INSTALL.md                     # Installation guide — ZCode & Claude (Linux/macOS/Windows)
├── CHANGELOG.md                   # Version history
├── LICENSE                        # MIT
├── package.json                   # MIT, three 0.175, vite 7, babylon 8.15, node >=20.19
├── .claude-plugin/
│   └── marketplace.json           # Claude Code marketplace catalog (bufatechno-marketplace)
├── .zcode-plugin/
│   └── marketplace.json           # ZCode marketplace catalog (bufatechno-marketplace)
├── plugins/
│   └── bufatechno-webgamedev/     # Plugin (auto-installs skill on marketplace add)
│       ├── .claude-plugin/plugin.json
│       ├── .zcode-plugin/plugin.json
│       └── skills/bufatechno-webgamedev/
│           ├── SKILL.md           # Skill (bundled)
│           ├── references/        # Bundled docs
│           ├── assets/            # Bundled templates & QRIS
│           └── scripts/           # Bundled scaffolds
├── references/                    # 22 deep-dive docs (2026, anti-slop included)
│   ├── threejs-complete.md         # WebGPURenderer+TSL, PBR, post, GLTF, Timer
│   ├── babylonjs-complete.md       # Engine, clustered lights, Frame Graph, Havok, Splatting
│   ├── fps-game-template.md       # FPS runnable 1000+ lines
│   ├── voxel-game-template.md     # Voxel 1100+ lines
│   ├── third-person-template.md   # Spring-arm, anim blend
│   ├── platformer-template.md     # Momentum, coyote+buffer 0.1s
│   ├── game-architecture.md       # Fixed step+Timer, ECS, StateMachine, Pool
│   ├── animation-system.md        # NEW: Mixer/Clip/Action, skeletal, morph, blending, retarget
│   ├── physics-collision.md       # Cannon-es/Rapier/Havok, CCD, filters
│   ├── vfx-particles.md           # NEW: particles, post, volumetric, shake, splat
│   ├── procedural-generation.md   # Noise, maze, L-system, BSP city, biome
│   ├── input-controls.md          # Keyboard/mouse/gamepad/touch, remap
│   ├── audio-ui-systems.md        # Procedural audio + HRTF, HUD, vignette
│   ├── 2d-drawing-textures.md     # Canvas procedural, atlas, normal Sobel
│   ├── asset-pipeline.md          # GLTF, Draco gLTF/, KTX2, SOGS streaming
│   ├── external-libraries.md      # Lite vs Full, curated opt-ins, CC0 sources, anti-slop, credits
│   ├── design-system.md           # NEW ANTI-SLOP: tokens, palette, themed HUD, inference
│   ├── performance-optimization.md # Instanced, LOD, atlas, clustered, Frame Graph
│   ├── testing-deployment.md      # Matrix 40+, Playwright, Vite 7, PWA
│   ├── debugging.md               # Triage order, symptom→fix, revision protocol
│   ├── multiplayer-networking.md  # NEW: ws authoritative, prediction, interpolation
│   └── webxr-vr.md                # NEW: WebXR session, controllers, locomotion
├── scripts/
│   ├── scaffold-threejs.js        # Three 0.175 + Vite 7 + animation/vfx dirs + shims
│   └── scaffold-babylonjs.js      # Babylon 8.15 + Havok + Vite 7
├── test/                          # Automated checks — `npm test` (offline, zero deps)
│   ├── skill.test.js              # Version sync, bundled-copy sync, pins, links (+opt-in CDN check)
│   └── scaffold.test.js           # Scaffold smoke: structure, syntax, invariants (+opt-in vite build)
├── screenshoot-example/           # Example game screenshots built with this skill
│   ├── 1.png                      # Voxel game — third-person forest biome
│   └── 2.png                      # Voxel game — first-person grass terrain
└── assets/
    ├── images/
    │   ├── qris.jpeg              # QRIS donation QR code
    │   └── btc.jpeg               # Bitcoin donation QR code
    ├── templates/
    │   ├── threejs/               # index.html (sh

// HOW IT'S BUILT

KEY FILES

SKILL.mdREADME.md

// REPO STATS

10 stars

// SHARE

Share on X Share on LinkedIn