web-games
Skill130 starsChanged 10 months agoMITView on GitHub
Web browser game development principles. Framework selection, WebGPU, optimization, PWA.
We split this skill into the rules it gives an agent
6 rules. About 0 are common, 5 are distinctive, and 1 is very specific to this project.
≈0
Common · estimate
Many files like this have a rule of this kind.
≈5
Distinctive · estimate
This author's own choices. Worth a look.
1
Very specific
Tied to their project's names, files or tools. Probably skip.
- Common
- Distinctive
- Very specific
- Distinctive: line 57
New projects: Use WebGPU with WebGL fallback
- Distinctive: line 58
Legacy support: Start with WebGL
- Very specific: line 59
Feature detection: Check navigator.gpu
- Distinctive: line 78
Object pooling: - Avoid GC
- Distinctive: line 126
Create AudioContext on first click/tap
- Distinctive: line 131
Use Web Audio API
≈ “Common” is an estimate: at least 1 in 5 of the 308,232 skill files we read have a rule of the same kind, not the same words. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.
Files
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/WebGLComparison (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.
Other versions3 projects use a version of this.
Word for word · 2
- VoDaiLocz/kilo-kit-mcp★ 26100% same
- SKB3002/agenthub★ 4100% same
Edited · 1
- bcastelino/agent-skills-kit★ 299% same
Wrote their own version · 0
None found.
How matches are found. Word for word: the exact same text. Edited: shares passages with this file (“99% same” means 99% of its five-word phrases also appear here; 10% or more counts). Their own version: similar meaning, or, weakest, the same name. We can’t tell which project had it first. Projects are counted among the 200 most-starred candidates, and mentions are links to the repository we found, up to 50 per site, so both counts are a floor.
In this repository45 other files it gives its agents.
- api-patternsSkill
- app-builderSkill
- templatesSkill
- architectureSkill
- bash-linuxSkill
- behavioral-modesSkill
- brainstormingSkill
- clean-codeSkill
- code-review-checklistSkill
- database-designSkill
- deployment-proceduresSkill
- documentation-templatesSkill
- frontend-designSkill
- 2d-gamesSkill
- 3d-gamesSkill
- game-artSkill
- game-audioSkill
- game-designSkill
- mobile-gamesSkill
- multiplayerSkill
- pc-gamesSkill
- game-developmentSkill
- vr-arSkill
- geo-fundamentalsSkill
- i18n-localizationSkill
- lint-and-validateSkill
- mcp-builderSkill
- mobile-designSkill
- nextjs-best-practicesSkill
- nodejs-best-practicesSkill
- parallel-agentsSkill
- performance-profilingSkill
- plan-writingSkill
- powershell-windowsSkill
- python-patternsSkill
- react-patternsSkill
- red-team-tacticsSkill
- seo-fundamentalsSkill
- server-managementSkill
- systematic-debuggingSkill
- tailwind-patternsSkill
- tdd-workflowSkill
- testing-patternsSkill
- vulnerability-scannerSkill
- webapp-testingSkill
Does it work?
Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.
No reviews yet
People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.
- It worked
- Partly
- It didn't
Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.
Your trail
Files you open will collect here, so you can find them again.
Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.
Now do this for your own.
Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.