- Add date_added to all 950+ skills for complete tracking
- Update version to 6.5.0 in package.json and README
- Regenerate all indexes and catalog
- Sync all generated files
Features from merged PR #150:
- Stars/Upvotes system for community-driven discovery
- Auto-update mechanism via START_APP.bat
- Interactive Prompt Builder
- Date tracking badges
- Smart auto-categorization
All skills validated and indexed.
Made-with: Cursor
Web browser game development principles. Framework selection, WebGPU, optimization, PWA.
unknown
community
2026-02-27
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 to Use
This skill is applicable to execute the workflow or actions described in the overview.
aa71e76eb9