davila7/web-games
cli-tool/components/skills/creative-design/game-development/web-games/SKILL.md
Web browser game development principles. Framework selection, WebGPU, optimization, PWA.
$ install --global
skillsauthnpx skillsauth add davila7/claude-code-templates 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 29, 2026, 6:15 PM8.1s1 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
davila7/zapier-make-patterns
tools
VerifiedTrustedCommunity
No-code automation democratizes workflow building. Zapier and Make (formerly Integromat) let non-developers automate business processes without writing code. But no-code doesn't mean no-complexity - these platforms have their own patterns, pitfalls, and breaking points. This skill covers when to use which platform, how to build reliable automations, and when to graduate to code-based solutions. Key insight: Zapier optimizes for simplicity and integrations (7000+ apps), Make optimizes for power
24,615SKILL.mdUpdated Apr 15, 2026
davila7/yeet
tools
VerifiedTrustedCommunity
Use only when the user explicitly asks to stage, commit, push, and open a GitHub pull request in one flow using the GitHub CLI (`gh`).
24,615SKILL.mdUpdated Apr 15, 2026
davila7/workflow-automation
tools
VerifiedTrustedCommunity
Workflow automation is the infrastructure that makes AI agents reliable. Without durable execution, a network hiccup during a 10-step payment flow means lost money and angry customers. With it, workflows resume exactly where they left off. This skill covers the platforms (n8n, Temporal, Inngest) and patterns (sequential, parallel, orchestrator-worker) that turn brittle scripts into production-grade automation. Key insight: The platforms make different tradeoffs. n8n optimizes for accessibility
24,615SKILL.mdUpdated Apr 15, 2026
davila7/trigger-dev
development
VerifiedTrustedCommunity
Trigger.dev expert for background jobs, AI workflows, and reliable async execution with excellent developer experience and TypeScript-first design. Use when: trigger.dev, trigger dev, background task, ai background job, long running task.
24,615SKILL.mdUpdated Apr 15, 2026