Web games skill

Web browser game development principles.

by davila7·MIT license·★ 32,299 Stars on the repo·GitHub ↗

Use now

davila7/main1 file shown

SKILL.md3.0 KB

Browse every file on GitHub↗

SKILL.md

Show the full text151 lines

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.

1	---
2	name: web-games
3	description: Web browser game development principles. Framework selection, WebGPU, optimization, PWA.
4	allowed-tools: Read, Write, Edit, Glob, Grep
5	---
6
7	# Web Browser Game Development
8
9	> Framework selection and browser-specific principles.
10
11	---
12
13	## 1. Framework Selection
14
15	### Decision Tree
16
17	```
18	What type of game?
19	│
20	├── 2D Game
21	│ ├── Full game engine features? → Phaser
22	│ └── Raw rendering power? → PixiJS
23	│
24	├── 3D Game
25	│ ├── Full engine (physics, XR)? → Babylon.js
26	│ └── Rendering focused? → Three.js
27	│
28	└── Hybrid / Canvas
29	└── Custom → Raw Canvas/WebGL
30	```
31
32	### Comparison (2025)
33
34	\| Framework \| Type \| Best For \|
35	\|-----------\|------\|----------\|
36	\| Phaser 4 \| 2D \| Full game features \|
37	\| PixiJS 8 \| 2D \| Rendering, UI \|
38	\| Three.js \| 3D \| Visualizations, lightweight \|
39	\| Babylon.js 7 \| 3D \| Full engine, XR \|
40
41	---
42
43	## 2. WebGPU Adoption
44
45	### Browser Support (2025)
46
47	\| Browser \| Support \|
48	\|---------\|---------\|
49	\| Chrome \| ✅ Since v113 \|
50	\| Edge \| ✅ Since v113 \|
51	\| Firefox \| ✅ Since v131 \|
52	\| Safari \| ✅ Since 18.0 \|
53	\| Total \| ~73% global \|
54
55	### Decision
56
57	- New projects: Use WebGPU with WebGL fallback
58	- Legacy support: Start with WebGL
59	- Feature detection: Check `navigator.gpu`
60
61	---
62
63	## 3. Performance Principles
64
65	### Browser Constraints
66
67	\| Constraint \| Strategy \|
68	\|------------\|----------\|
69	\| No local file access \| Asset bundling, CDN \|
70	\| Tab throttling \| Pause when hidden \|
71	\| Mobile data limits \| Compress assets \|
72	\| Audio autoplay \| Require user interaction \|
73
74	### Optimization Priority
75
76	1. Asset compression - KTX2, Draco, WebP
77	2. Lazy loading - Load on demand
78	3. Object pooling - Avoid GC
79	4. Draw call batching - Reduce state changes
80	5. Web Workers - Offload heavy computation
81
82	---
83
84	## 4. Asset Strategy
85
86	### Compression Formats
87
88	\| Type \| Format \|
89	\|------\|--------\|
90	\| Textures \| KTX2 + Basis Universal \|
91	\| Audio \| WebM/Opus (fallback: MP3) \|
92	\| 3D Models \| glTF + Draco/Meshopt \|
93
94	### Loading Strategy
95
96	\| Phase \| Load \|
97	\|-------\|------\|
98	\| Startup \| Core assets, <2MB \|
99	\| Gameplay \| Stream on demand \|
100	\| Background \| Prefetch next level \|
101
102	---
103
104	## 5. PWA for Games
105
106	### Benefits
107
108	- Offline play
109	- Install to home screen
110	- Full screen mode
111	- Push notifications
112
113	### Requirements
114
115	- Service worker for caching
116	- Web app manifest
117	- HTTPS
118
119	---
120
121	## 6. Audio Handling
122
123	### Browser Requirements
124
125	- Audio context requires user interaction
126	- Create AudioContext on first click/tap
127	- Resume context if suspended
128
129	### Best Practices
130
131	- Use Web Audio API
132	- Pool audio sources
133	- Preload common sounds
134	- Compress with WebM/Opus
135
136	---
137
138	## 7. Anti-Patterns
139
140	\| ❌ Don't \| ✅ Do \|
141	\|----------\|-------\|
142	\| Load all assets upfront \| Progressive loading \|
143	\| Ignore tab visibility \| Pause when hidden \|
144	\| Block on audio load \| Lazy load audio \|
145	\| Skip compression \| Compress everything \|
146	\| Assume fast connection \| Handle slow networks \|
147
148	---
149
150	> Remember: Browser is the most accessible platform. Respect its constraints.
151

Discussion

Browse more free Claude skills.

Files of Web games