Hi - I answer from the OpenSmartRoute documentation: routing, the API, plans and quotas, self-hosting. Ask away, or open a support ticket if you need a person.
Grounded in the docs - follow a source before acting on it.
web-games - Skill - OpenSmartRoute
Skillv1.0.0
web-games
Web browser game development principles. Framework selection, WebGPU, optimization, PWA.
Imported from pikakit/agent-skills (.agent/skills/game-development/web-games/SKILL.md). Install upstream with npx skills add pikakit/agent-skills --skill web-games. Copyright stays with the author.
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.
Copy one of these into your project. Installing also returns the manifest and these snippets.
# after Install: the listing is in your workspace's routing pool - a plan picks it for its slot
curl -s -X POST https://api.opensmartroute.ai/api/v1/route -H 'Authorization: Bearer $OSR_API_KEY' -H 'Content-Type: application/json' -d '{"text": "...", "plan": true}'
Manifest
An Open Capability Manifest: the router reads it to know what this does, what it costs and when to pick it.
pikakit-agent-skills-web-games.ocm.jsonjson
{
"ocm": "1",
"id": "pikakit-agent-skills-web-games",
"kind": "skill",
"name": "web-games",
"description": "Web browser game development principles. Framework selection, WebGPU, optimization, PWA.",
"publisher": "pikakit",
"version": "1.0.0",
"capabilities": {
"domains": [
"science",
"math"
],
"tags": [
"skill-md",
"github"
],
"languages": [
"en"
]
},
"quality_prior": 0.6,
"examples": [
"Web browser game development principles. Framework selection, WebGPU, optimization, PWA."
],
"primary": false,
"metadata": {
"source": {
"provider": "github",
"repository": "https://github.com/pikakit/agent-skills",
"path": ".agent/skills/game-development/web-games/SKILL.md",
"ref": "b0ab2bac1dfb0ad235c3d7ef7eb73776c5ef7b16",
"url": "https://github.com/pikakit/agent-skills/blob/b0ab2bac1dfb0ad235c3d7ef7eb73776c5ef7b16/.agent/skills/game-development/web-games/SKILL.md",
"key": "pikakit/agent-skills/.agent/skills/game-development/web-games/SKILL.md"
}
},
"instructions": "# Web Browser Game Development\n\n> Framework selection and browser-specific principles.\n\n---\n\n## 1. Framework Selection\n\n### Decision Tree\n\n```\nWhat type of game?\n│\n├── 2D Game\n│ ├── Full game engine features? → Phaser\n│ └── Raw rendering power? → PixiJS\n│\n├── 3D Game\n│ ├── Full engine (physics, XR)? → Babylon.js\n│ └── Rendering focused? → Three.js\n│\n└── Hybrid / Canvas\n └── Custom → Raw Canvas/WebGL\n```\n\n### Comparison (2025)\n\n| Framework | Type | Best For |\n|-----------|------|----------|\n| **Phaser 4** | 2D | Full game features |\n| **PixiJS 8** | 2D | Rendering, UI |\n| **Three.js*",
"cost": {
"context_tokens": 815
}
}
Fetch it by URL: GET /api/v1/registry/pikakit-agent-skills-web-games/manifest?version=1.0.0
Reviews
Star ratings from people who tried it. One review per account; edit yours any time.
No reviews yet. Install it, try it, and be the first to rate it.
