HabtamuDes/web-games
.agent/skills/game-development/web-games/SKILL.md
Web browser game development principles. Framework selection, WebGPU, optimization, PWA.
$ install --global
skillsauthnpx skillsauth add HabtamuDes/HabtamuDes.github.io web-gamesInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 25, 2026, 9:26 PM1.8s1 file scanned
SKILL.md
- 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?
│
├── 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.
Related Skills
HabtamuDes/webapp-testing
development
VerifiedTrustedCommunity
Web application testing principles. E2E, Playwright, deep audit strategies.
3SKILL.mdUpdated Apr 16, 2026
HabtamuDes/web-design-guidelines
development
VerifiedTrustedCommunity
Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".
3SKILL.mdUpdated Apr 16, 2026
HabtamuDes/vulnerability-scanner
testing
VerifiedTrustedCommunity
Advanced vulnerability analysis principles. OWASP 2025, Supply Chain Security, attack surface mapping, risk prioritization.
3SKILL.mdUpdated Apr 16, 2026
HabtamuDes/testing-patterns
testing
VerifiedTrustedCommunity
Testing patterns and principles. Unit, integration, mocking strategies.
3SKILL.mdUpdated Apr 16, 2026