web-games
Provides principles and architecture guidance for building high-performance web games.
Install
mkdir -p .claude/skills/web-games && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/655" && unzip -o skill.zip -d .claude/skills/web-games && rm skill.zipInstalls to .claude/skills/web-games
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Web browser game development principles. Framework selection, WebGPU, optimization, PWA.Key capabilities
- →Selects optimal rendering frameworks based on 2D or 3D requirements
- →Maps technical requirements to engine-specific API choices
- →Provides performance optimization checklists for browser constraints
- →Suggests asset compression formats like KTX2 and Draco
- →Guides PWA implementation for offline capabilities
How it works
It maps user constraints against a decision matrix of current-year web standards and framework capabilities to recommend specific development stacks.
Inputs & outputs
When to use web-games
- →Choose between Phaser or PixiJS
- →Implement WebGPU rendering
- →Optimize game assets for browser
- →Manage asset lazy loading
About this skill
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
- Asset compression - KTX2, Draco, WebP
- Lazy loading - Load on demand
- Object pooling - Avoid GC
- Draw call batching - Reduce state changes
- 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.
When not to use it
- →For projects that require deep system-level integration outside the browser
- →When performance requirements exceed current WebGPU/WebGL limitations
Limitations
- →Recommendations rely on 2025 browser technology standards
- →Limited by the specific capabilities of browser-based WebGL/WebGPU
- →Asset optimization strategies depend on end-user hardware
How it compares
It shifts the focus from general coding to specialized browser-based constraints and high-performance rendering benchmarks.
Compared to similar skills
web-games side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| web-games (this skill) | 11 | 6mo | No flags | Intermediate |
| zustand | 113 | 2mo | No flags | Intermediate |
| react | 34 | 1mo | No flags | Intermediate |
| vue-best-practices | 19 | 4mo | No flags | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by davila7
View all by davila7 →You might also like
zustand
lobehub
Zustand state management guide. Use when working with store code (src/store/**), implementing actions, managing state, or creating slices. Triggers on Zustand store development, state management questions, or action implementation.
react
lobehub
React component development guide. Use when working with React components (.tsx files), creating UI, using @lobehub/ui components, implementing routing, or building frontend features. Triggers on React component creation, modification, layout implementation, or navigation tasks.
vue-best-practices
antfu
MUST be used for Vue.js tasks. Strongly recommends Composition API with `<script setup>` and TypeScript as the standard approach. Covers Vue 3, SSR, Volar, vue-tsc. Load for any Vue, .vue files, Vue Router, Pinia, or Vite with Vue work. ALWAYS use Composition API unless the project explicitly requires Options API.
pwa-development
alinaqi
Progressive Web Apps - service workers, caching strategies, offline, Workbox
vite
antfu
Vite build tool configuration, plugin API, SSR, and Vite 8 Rolldown migration. Use when working with Vite projects, vite.config.ts, Vite plugins, or building libraries/SSR apps with Vite.
react-component-patterns
HoangNguyen0403
Modern React component architecture and composition patterns.