Browser Game Developer
Web games
Web browser game development principles. Framework selection, WebGPU, optimization, PWA.
--- 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?
Overview
Web browser game development principles. Framework selection, WebGPU, optimization, PWA.
Manual install (npx, ZIP)
Claude Code
npx skills add davila7/claude-code-templates --skill web-games -g -a claude-codeClaude Code (degit)
npx degit davila7/claude-code-templates/cli-tool/components/skills/creative-design/game-development/web-games#main ~/.claude/skills/web-gamesClaude.ai / desktop
Codex, Cursor, other agents
Connects with Agent Alley MCP · agentalley.io/mcp
Files included
SKILL.md3.0 KB
Read SKILL.md here
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 | **Asset compression** - KTX2, Draco, WebP |
| 77 | **Lazy loading** - Load on demand |
| 78 | **Object pooling** - Avoid GC |
| 79 | **Draw call batching** - Reduce state changes |
| 80 | **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 |
Details
- License
- MIT
- Stars on the repo
- ★ 32,299
- Checked
- Source
- davila7/claude-code-templates ↗
- Creator
- davila7 · 212 listings
Similar skills
See all →
SkillGDScript Pattern Guide
wshobson/agents · by wshobsonMaster Godot 4 GDScript patterns including signals, scenes, state machines, and optimization. Use when building Godot games, implementing game systems, or learning GDScript best practices.★ 39.9k GitHub stars
SkillUnity ECS Patternswshobson/agents · by wshobsonMaster Unity ECS (Entity Component System) with DOTS, Jobs, and Burst for high-performance game development. Use when building data-oriented games, optimizing performance, or working with large entity counts.★ 39.9k GitHub stars
SkillGame Design Framework
davila7/claude-code-templates · by davila7Game design principles. GDD structure, balancing, player psychology, progression.★ 32.3k GitHub stars
SkillGame Dev Project Routerdavila7/claude-code-templates · by davila7Game development orchestrator. Routes to platform-specific skills based on project needs.★ 32.3k GitHub stars
SkillPC Game Developerdavila7/claude-code-templates · by davila7PC and console game development principles. Engine selection, platform features, optimization strategies.★ 32.3k GitHub stars
AgentGame Systems Developer
VoltAgent/awesome-claude-code-subagents · by VoltAgentUse this agent when implementing game systems, optimizing graphics rendering, building multiplayer networking, or developing gameplay mechanics for games targeting specific platforms.★ 25.2k GitHub starsMore from davila7
Skill2D Game Developmentdavila7/claude-code-templates · by davila72D game development principles. Sprites, tilemaps, physics, camera.★ 32.3k GitHub stars
Skill3D Game Development Principlesdavila7/claude-code-templates · by davila73D game development principles. Rendering, shaders, physics, cameras.★ 32.3k GitHub stars
Skill3D Web Experience Builderdavila7/claude-code-templates · by davila7Expert in building 3D experiences for the web - Three.js, React Three Fiber, Spline, WebGL, and interactive 3D scenes. Covers product configurators, 3D portfolios, immersive websites, and bringing depth to web experiences. Use when: 3D website, three.js, WebGL, react three fiber, 3D experience.★ 32.3k GitHub stars
SkillSplit Test Setupdavila7/claude-code-templates · by davila7When the user wants to plan, design, or implement an A/B test or experiment. Also use when the user mentions "A/B test," "split test," "experiment," "test this change," "variant copy," "multivariate test," or "hypothesis." For tracking implementation, see analytics-tracking.★ 32.3k GitHub stars
AgentResearch Literature Synthesizerdavila7/claude-code-templates · by davila7Academic research synthesis specialist. Use PROACTIVELY for comprehensive research on academic topics, literature reviews, technical investigations, and well-cited analysis combining multiple sources. <example>Context: A podcast episode needs a segment grounded in peer-reviewed evidence with formal citations. user: "Research the current state of transformer efficiency techniques for the episode, with proper academic citations." assistant: "I'll use the academic-research-synthesizer agent to search arXiv and Semantic Scholar, extract full-text findings via WebFetch, and produce a cited literature synthesis with confidence levels." <commentary>Use academic-research-synthesizer (not comprehensive-researcher) when the episode segment needs peer-reviewed sourcing, formal citation format, and explicit confidence tagging rather than general-purpose multi-source coverage.</commentary></example> <example>Context: The episode-orchestrator has routed a "literature review" request for a technical deep-dive segment. user: "Summarize the research landscape on federated learning privacy guarantees." assistant: "I'll invoke academic-research-synthesizer to systematically search academic sources, note peer-review status per source, and synthesize consensus vs. open debates."</example>★ 32.3k GitHub stars
AgentAcademic Research Specialistdavila7/claude-code-templates · by davila7Academic research specialist for scholarly sources, peer-reviewed papers, and academic literature. Use PROACTIVELY for research paper analysis, literature reviews, citation tracking, and academic methodology evaluation. <example>Context: The research-orchestrator has kicked off Phase 4 parallel research on 'efficacy of intermittent fasting' and needs peer-reviewed evidence. user: "Find the academic evidence on intermittent fasting outcomes." assistant: "I'll use the academic-researcher agent to search Semantic Scholar, PubMed, and OpenAlex for peer-reviewed studies and write structured findings to academic-research.md." <commentary>The request is specifically for scholarly/peer-reviewed evidence rather than general web coverage or code, so academic-researcher (not web-researcher or technical-researcher) is the right specialist.</commentary></example> <example>Context: The user wants a literature review comparing methodologies across studies on a topic. user: "Can you review the literature on transformer model interpretability and identify research gaps?" assistant: "Let me invoke the academic-researcher agent to pull foundational and recent papers, extract methodologies, and surface open research gaps." <commentary>Literature review, methodology extraction, and research-gap identification are core academic-researcher capabilities, distinct from technical-researcher's focus on code repositories and implementations.</commentary></example>★ 32.3k GitHub stars