playbooks

home / skills / vudovn / antigravity-kit / web-games

web-games skill

/.agent/skills/game-development/web-games

This skill helps you select frameworks, optimize rendering, and implement WebGPU, PWAs, and asset strategies for browser games.

This is most likely a fork of the game-development skill from vudovn
npx playbooks add skill vudovn/antigravity-kit --skill web-games

Review the files below or copy the command above to add this skill to your agents.

Files (1)
SKILL.md
3.0 KB
---
name: web-games
description: Web browser game development principles. Framework selection, WebGPU, optimization, PWA.
allowed-tools: Read, Write, Edit, Glob, Grep
---

# 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.

Overview

This skill covers practical principles for building web browser games using TypeScript. It guides framework selection, WebGPU adoption with fallbacks, performance optimization, asset strategies, PWA setup, and audio handling. The focus is on pragmatic decisions that balance modern APIs and broad browser compatibility.

How this skill works

It inspects project goals (2D vs 3D, full engine vs renderer-only) and recommends frameworks like Phaser, PixiJS, Three.js, or Babylon.js. It evaluates platform capabilities (WebGPU support via navigator.gpu) and sets a fallback plan to WebGL. It also prescribes asset pipelines, runtime optimizations, and PWA/service worker patterns to improve load, runtime performance, and offline installability.

When to use it

  • Starting a new browser game project and choosing a framework.
  • Migrating rendering to WebGPU while preserving compatibility.
  • Optimizing load and runtime performance for mobile and desktop browsers.
  • Adding PWA features for offline play and home-screen install.
  • Implementing robust audio handling across browsers.

Best practices

  • Choose framework by game type: Phaser for full 2D engines, PixiJS for 2D rendering, Three.js for lightweight 3D, Babylon.js for full 3D engine and XR.
  • Feature-detect WebGPU (navigator.gpu) and provide a WebGL fallback; prefer WebGPU for new projects with fallback for broader reach.
  • Prioritize asset compression and streaming: KTX2/Basis for textures, Draco/Meshopt for models, WebP and WebM/Opus for media.
  • Implement lazy loading, object pooling, draw-call batching, and move heavy work to Web Workers to reduce main-thread GC and jank.
  • Treat visibility and network constraints: pause when tab hidden, compress assets for mobile, and preload core assets under ~2MB for fast startup.

Example use cases

  • New 2D sidescroller: use Phaser for game systems, bundle compressed textures and lazy-load levels.
  • 3D visualization with interactivity: use Three.js and stream glTF models with Draco compression.
  • High-fidelity browser game targeting modern GPUs: implement WebGPU renderer with WebGL fallback and KTX2 textures.
  • Turn a game into a PWA: add manifest, service worker caching strategies for offline play and fast startup.
  • Mobile-first casual game: aggressive asset compression, audio pooling, and pause/resume tied to visibility API.

FAQ

Should I always use WebGPU?

Use WebGPU for new projects to benefit from modern GPU features, but always include a WebGL fallback for broader compatibility and progressive adoption.

How do I handle audio autoplay restrictions?

Create or resume an AudioContext in response to the user's first interaction and preload common short sounds; use pooling to avoid creating sources repeatedly.

What’s the minimal caching strategy for a game PWA?

Cache core startup assets and the shell via a service worker, then stream additional content on demand and prefetch the next level in background.