Agent skill

web-games

Web browser game development principles. Framework selection, WebGPU, optimization, PWA.

View SKILL.md on GitHub Repository
Stars 23,776
Forks 2,298

Install this agent skill to your Project

npx add-skill https://github.com/davila7/claude-code-templates/tree/main/cli-tool/components/skills/creative-design/game-development/web-games

SKILL.md

Web Browser Game Development

Framework selection and browser-specific principles.

1. Framework Selection

Decision Tree

What type of game?
│
├── 2D Game
│   ├── Full game engine features? → Phaser
│   └── Raw rendering power? → PixiJS
│
├── 3D Game
│   ├── Full engine (physics, XR)? → Babylon.js
│   └── Rendering focused? → Three.js
│
└── Hybrid / Canvas
    └── Custom → Raw Canvas/WebGL

Comparison (2025)

Framework Type Best For
Phaser 4 2D Full game features
PixiJS 8 2D Rendering, UI
Three.js 3D Visualizations, lightweight
Babylon.js 7 3D Full engine, XR

2. WebGPU Adoption

Browser Support (2025)

Browser Support
Chrome ✅ Since v113
Edge ✅ Since v113
Firefox ✅ Since v131
Safari ✅ Since 18.0
Total ~73% global

Decision

  • New projects: Use WebGPU with WebGL fallback
  • Legacy support: Start with WebGL
  • Feature detection: Check navigator.gpu

3. Performance Principles

Browser Constraints

Constraint Strategy
No local file access Asset bundling, CDN
Tab throttling Pause when hidden
Mobile data limits Compress assets
Audio autoplay Require user interaction

Optimization Priority

  1. Asset compression - KTX2, Draco, WebP
  2. Lazy loading - Load on demand
  3. Object pooling - Avoid GC
  4. Draw call batching - Reduce state changes
  5. Web Workers - Offload heavy computation

4. Asset Strategy

Compression Formats

Type Format
Textures KTX2 + Basis Universal
Audio WebM/Opus (fallback: MP3)
3D Models glTF + Draco/Meshopt

Loading Strategy

Phase Load
Startup Core assets, <2MB
Gameplay Stream on demand
Background Prefetch next level

5. PWA for Games

Benefits

  • Offline play
  • Install to home screen
  • Full screen mode
  • Push notifications

Requirements

  • Service worker for caching
  • Web app manifest
  • HTTPS

6. Audio Handling

Browser Requirements

  • Audio context requires user interaction
  • Create AudioContext on first click/tap
  • Resume context if suspended

Best Practices

  • Use Web Audio API
  • Pool audio sources
  • Preload common sounds
  • Compress with WebM/Opus

7. Anti-Patterns

❌ Don't ✅ Do
Load all assets upfront Progressive loading
Ignore tab visibility Pause when hidden
Block on audio load Lazy load audio
Skip compression Compress everything
Assume fast connection Handle slow networks

Remember: Browser is the most accessible platform. Respect its constraints.

Recommended Agent Skills

Expand your agent's capabilities with these related and highly-rated skills.

davila7/claude-code-templates

verl-rl-training

Provides guidance for training LLMs with reinforcement learning using verl (Volcano Engine RL). Use when implementing RLHF, GRPO, PPO, or other RL algorithms for LLM post-training at scale with flexible infrastructure backends.

23,776 2,298
Explore
davila7/claude-code-templates

openrlhf-training

High-performance RLHF framework with Ray+vLLM acceleration. Use for PPO, GRPO, RLOO, DPO training of large models (7B-70B+). Built on Ray, vLLM, ZeRO-3. 2× faster than DeepSpeedChat with distributed architecture and GPU resource sharing.

23,776 2,298
Explore
davila7/claude-code-templates

gguf-quantization

GGUF format and llama.cpp quantization for efficient CPU/GPU inference. Use when deploying models on consumer hardware, Apple Silicon, or when needing flexible quantization from 2-8 bit without GPU requirements.

23,776 2,298
Explore
davila7/claude-code-templates

Claude Code Guide

Master guide for using Claude Code effectively. Includes configuration templates, prompting strategies "Thinking" keywords, debugging techniques, and best practices for interacting with the agent.

23,776 2,298
Explore
davila7/claude-code-templates

qdrant-vector-search

High-performance vector similarity search engine for RAG and semantic search. Use when building production RAG systems requiring fast nearest neighbor search, hybrid search with filtering, or scalable vector storage with Rust-powered performance.

23,776 2,298
Explore
davila7/claude-code-templates

behavioral-modes

AI operational modes (brainstorm, implement, debug, review, teach, ship, orchestrate). Use to adapt behavior based on task type.

23,776 2,298
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results