web-games
starsforks
How to install web-games?
one-man-company/skills-contextmanager/web-games
$npx -y skills add One-Man-Company/Skills-ContextManager --skill web-gamesWeb browser game development principles. Framework selection, WebGPU, optimization, PWA.
SKILL.md
| 1 | # Web Browser Game Development |
| 2 | |
| 3 | > Framework selection and browser-specific principles. |
| 4 | |
| 5 | --- |
| 6 | |
| 7 | ## 1. Framework Selection |
| 8 | |
| 9 | ### Decision Tree |
| 10 | |
| 11 | ``` |
| 12 | What type of game? |
| 13 | │ |
| 14 | ├── 2D Game |
| 15 | │ ├── Full game engine features? → Phaser |
| 16 | │ └── Raw rendering power? → PixiJS |
| 17 | │ |
| 18 | ├── 3D Game |
| 19 | │ ├── Full engine (physics, XR)? → Babylon.js |
| 20 | │ └── Rendering focused? → Three.js |
| 21 | │ |
| 22 | └── Hybrid / Canvas |
| 23 | └── Custom → Raw Canvas/WebGL |
| 24 | ``` |
| 25 | |
| 26 | ### Comparison (2025) |
| 27 | |
| 28 | | Framework | Type | Best For | |
| 29 | |-----------|------|----------| |
| 30 | | **Phaser 4** | 2D | Full game features | |
| 31 | | **PixiJS 8** | 2D | Rendering, UI | |
| 32 | | **Three.js** | 3D | Visualizations, lightweight | |
| 33 | | **Babylon.js 7** | 3D | Full engine, XR | |
| 34 | |
| 35 | --- |
| 36 | |
| 37 | ## 2. WebGPU Adoption |
| 38 | |
| 39 | ### Browser Support (2025) |
| 40 | |
| 41 | | Browser | Support | |
| 42 | |---------|---------| |
| 43 | | Chrome | ✅ Since v113 | |
| 44 | | Edge | ✅ Since v113 | |
| 45 | | Firefox | ✅ Since v131 | |
| 46 | | Safari | ✅ Since 18.0 | |
| 47 | | **Total** | **~73%** global | |
| 48 | |
| 49 | ### Decision |
| 50 | |
| 51 | - **New projects**: Use WebGPU with WebGL fallback |
| 52 | - **Legacy support**: Start with WebGL |
| 53 | - **Feature detection**: Check `navigator.gpu` |
| 54 | |
| 55 | --- |
| 56 | |
| 57 | ## 3. Performance Principles |
| 58 | |
| 59 | ### Browser Constraints |
| 60 | |
| 61 | | Constraint | Strategy | |
| 62 | |------------|----------| |
| 63 | | No local file access | Asset bundling, CDN | |
| 64 | | Tab throttling | Pause when hidden | |
| 65 | | Mobile data limits | Compress assets | |
| 66 | | Audio autoplay | Require user interaction | |
| 67 | |
| 68 | ### Optimization Priority |
| 69 | |
| 70 | 1. **Asset compression** - KTX2, Draco, WebP |
| 71 | 2. **Lazy loading** - Load on demand |
| 72 | 3. **Object pooling** - Avoid GC |
| 73 | 4. **Draw call batching** - Reduce state changes |
| 74 | 5. **Web Workers** - Offload heavy computation |
| 75 | |
| 76 | --- |
| 77 | |
| 78 | ## 4. Asset Strategy |
| 79 | |
| 80 | ### Compression Formats |
| 81 | |
| 82 | | Type | Format | |
| 83 | |------|--------| |
| 84 | | Textures | KTX2 + Basis Universal | |
| 85 | | Audio | WebM/Opus (fallback: MP3) | |
| 86 | | 3D Models | glTF + Draco/Meshopt | |
| 87 | |
| 88 | ### Loading Strategy |
| 89 | |
| 90 | | Phase | Load | |
| 91 | |-------|------| |
| 92 | | Startup | Core assets, <2MB | |
| 93 | | Gameplay | Stream on demand | |
| 94 | | Background | Prefetch next level | |
| 95 | |
| 96 | --- |
| 97 | |
| 98 | ## 5. PWA for Games |
| 99 | |
| 100 | ### Benefits |
| 101 | |
| 102 | - Offline play |
| 103 | - Install to home screen |
| 104 | - Full screen mode |
| 105 | - Push notifications |
| 106 | |
| 107 | ### Requirements |
| 108 | |
| 109 | - Service worker for caching |
| 110 | - Web app manifest |
| 111 | - HTTPS |
| 112 | |
| 113 | --- |
| 114 | |
| 115 | ## 6. Audio Handling |
| 116 | |
| 117 | ### Browser Requirements |
| 118 | |
| 119 | - Audio context requires user interaction |
| 120 | - Create AudioContext on first click/tap |
| 121 | - Resume context if suspended |
| 122 | |
| 123 | ### Best Practices |
| 124 | |
| 125 | - Use Web Audio API |
| 126 | - Pool audio sources |
| 127 | - Preload common sounds |
| 128 | - Compress with WebM/Opus |
| 129 | |
| 130 | --- |
| 131 | |
| 132 | ## 7. Anti-Patterns |
| 133 | |
| 134 | | ❌ Don't | ✅ Do | |
| 135 | |----------|-------| |
| 136 | | Load all assets upfront | Progressive loading | |
| 137 | | Ignore tab visibility | Pause when hidden | |
| 138 | | Block on audio load | Lazy load audio | |
| 139 | | Skip compression | Compress everything | |
| 140 | | Assume fast connection | Handle slow networks | |
| 141 | |
| 142 | --- |
| 143 | |
| 144 | > **Remember:** Browser is the most accessible platform. Respect its constraints. |
People who liked this also viewed
6 picksType
- find-skillsHelps users discover and install agent skills when they ask questions like "how do I do X", "find a skill for X", "is there a skill that can...", or express interest in extending capabilities. This skSkillsJul 2026
- grill-meA relentless interview to sharpen a plan or design.SkillsJul 2026
- vercel-react-best-practicesVercel's official collection of agent skillsSkillsJul 2026
- improve-codebase-architectureScan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.SkillsJul 2026
- setup-matt-pocock-skillsConfigure this repo for the engineering skills — set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.SkillsJul 2026
- triageMove issues and external PRs through a state machine of triage roles — categorise, verify, grill if needed, and write agent-ready briefs.SkillsJul 2026
