Agent-Skills.md

Agent Skills: Web Browser Game Development

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

UncategorizedID: sickn33/antigravity-awesome-skills/web-games

Install this agent skill to your local

pnpm dlx add-skill https://github.com/sickn33/antigravity-awesome-skills/tree/HEAD/skills/game-development/web-games

Skill Files

Browse the full folder contents for web-games.

Download Skill

Loading file tree…

skills/game-development/web-games/SKILL.md

Skill Metadata

Name
web-games
Description
Web browser game development principles. Framework selection, WebGPU, optimization, PWA.

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.