Bufatechno Webgamedev
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', 'b
Install
npx skills add bufatechno/bufatechno-webgamedev --skill bufatechno-webgamedevgit clone --depth 1 https://github.com/bufatechno/bufatechno-webgamedev.git /tmp/bufatechno-webgamedev
mkdir -p ~/.claude/skills
cp -r /tmp/bufatechno-webgamedev/. ~/.claude/skills/bufatechno-webgamedevPersonal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.
From the SKILL.md
# BUFATECHNO WEB GAME DEV You are a **senior web game developer** — level of a shipped indie/AAA programmer — expert in Three.js, Babylon.js, WebGL2/WebGPU, TSL/NodeMaterial, real-time graphics, physics (Cannon-es/Rapier/Havok), animation, VFX, procedural generation, and production pipelines. Your output must be **complete, runnable, professional games** that open in a browser and are immediately playable. > Research-backed 2026: Three.js r175+ (WebGPURenderer + TSL), Babylon.js 8/9 (clustered lighting, Frame Graph, Gaussian Splatting, Node Particles), Vite 7 (baseline-widely-available, Rolldown), Draco/KTX2 GPU compression. ## Core Philosophy — Professional Bar A game is **NOT finished** until ALL true: 1. **Runs** zero console errors/warnings via `index.html` (Path A) or `npm run dev` (Path B). 2. **Playable loop** — menu → playing → paused → win/lose → restart. 3. **Responsive input** — mouse-look, WASD, jump, attack, gamepad, touch virtual joystick. 4. **Coherent visuals** — PBR materials, IBL, shadows 2048², fog, no flat gray, no missing textures. 5. **Audio complete** — at least 4 cues (shoot/hit/jump/win) via Web Audio (user-gesture unlocked), mute toggle. 6. **60 FPS** with 100+ dynamic objects on mid-range laptop (Intel Iris Xe) — instanced, pooled, LOD. 7. **Clean architecture** — no God objects, `dispose()` on every GPU resource, separation: renderer/world/player/systems/assets/utils. If one missing, iterate. You ship **games, not demos**.
Details
- Skill name
bufatechno-webgamedev- Repository
- bufatechno/bufatechno-webgamedev
- License
- MIT
- Repo updated
- 6 September 2026
FAQ
What does the Bufatechno Webgamedev skill do?
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', 'b
How do I install the Bufatechno Webgamedev skill?
skills CLI (Claude Code, Cursor, Codex and more): npx skills add bufatechno/bufatechno-webgamedev --skill bufatechno-webgamedev. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.
Is Bufatechno Webgamedev popular?
It lives in bufatechno/bufatechno-webgamedev, which has 10 GitHub stars and 1 forks.
Related skills
Character Animation
10karem505/character-animation-skill
Turn a static character or asset image into a looping animated character, delivered as a moving SVG plus animated WebP and GIF. Use this whenever the user wants to animate, bring to life, or "make move" a character, mascot, logo, creature, sprite, icon, or any asset image — or wants a moving/animated SVG, WebP, or GIF made from an image — or mentions generating a sprite sheet animation, or names "Nano Banana 2" / Gemini image generation for animation. Also use it to convert an EXISTING sprite sheet (a grid of frames) into those animated formats. Trigger even when the user just says things like
Arbitrum Dapp Skill
9hummusonrails/arbitrum-dapp-skill
Opinionated guide for building dApps on Arbitrum using Stylus (Rust) and/or Solidity. Covers local devnode setup, contract development, testing, deployment, and React frontend integration with viem. Use when starting a new Arbitrum project, writing Stylus or Solidity contracts, deploying to Arbitrum, or building a frontend that interacts with Arbitrum contracts.
Liquid Glass Frontend
10ngocanhnckh/liquid-glass-frontend-skill
Use when building a beautiful, distinctive, awwwards-tier web frontend — landing pages, dashboards, web apps, marketing sites — that needs Apple-style liquid-glass surfaces, choreographed motion.dev animations, and creative editorial layouts instead of the generic SaaS look (icon-card rows, centered heroes, default fonts, uniform fade-ins). Covers creative direction and signature interactions, the frost/blur glass material, single-source color tokens with dark+light theming, scroll/stagger/parallax/scroll-scrubbed animation, type-as-hero typography, and asymmetric grid-breaking composition.
Agential Skill
10talhairfandev/agential-skill
Use this skill for any website, web application, frontend UI, component, layout, styling, refactor, or review. It enforces a self-contained editorial output standard: image-first composition, oversized typography, visible hairline grids, hard-edged rectangular framing, restrained copy, and review.
Motion Graphics
10acelera-agency/html-animation
Build frame-exact motion graphics — animated logos, kinetic typography, brand videos, animated titles and social clips — as a single HTML file driven by a paused Web Animations timeline, then export them to MP4 in 1:1, 4:5 and 9:16. Use this whenever someone wants to animate a wordmark or logo, make a video from text, build a title sequence or lower third, produce a clip for LinkedIn / Instagram / Reels / TikTok, "turn this design into a video", animate a landing-page hero, or export a web animation to a video file — and also when an existing animation of this kind needs fixing, retiming, rest
Openclaw Darkpattern Buster
9alphaparkinc/openclaw-darkpattern-buster
Bypasses UI dark patterns, un-checks hidden subscription boxes, and navigates confusing opt-out flows automatically during checkout to protect user intent.
Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.