web-games

web-games is a skill for Claude Code, Codex from frogobox/frogo-sdk. It costs 63 tokens per session (1,165 once invoked), scanned A, original, Apache-2.0.

A guide to building games that run in web browsers using HTML5, canvas, WebGL, WebGPU, or game libraries. It compares tools for 2D, 3D, narrative, and interfaces that combine HTML with a game canvas.

In plain words
What is it for?
Use it to select Phaser, PixiJS, Kaplay, Three.js, Babylon.js, or lower-level browser APIs, and to plan optimization, progressive web apps, audio unlocking, and hybrid interfaces.
Why use it?
It helps you choose a browser runtime that matches the game's type and avoid performance, input, audio, and installation problems.

Skill for Claude CodeCodex

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

agentmods
npx agentmods add skills/frogobox/frogo-sdk/web-games
Any agent
npx skills add frogobox/frogo-sdk --skill web-games
Clone the repo
git clone --depth 1 https://github.com/frogobox/frogo-sdk

Made for: Claude Code, Codex.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

agentmods badge for web-games

README.md
[![agentmods](https://agentmods.dev/badge/skills/frogobox/frogo-sdk/web-games.svg)](https://agentmods.dev/skills/frogobox/frogo-sdk/web-games)
Your own site
<a href="https://agentmods.dev/skills/frogobox/frogo-sdk/web-games"><img src="https://agentmods.dev/badge/skills/frogobox/frogo-sdk/web-games.svg" alt="Measured on agentmods" height="20"></a>
Per session 63 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 1,165 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. Scan, not verified.
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5 $0.00063 $0.01165
Opus 5 $0.00032 $0.00583
Sonnet 5 $0.00013 $0.00233
Haiku 4.5 $0.00006 $0.00117

Measured 5d ago against content hash 3f8d6fe3eca3, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, from the pricing page.

Security

Grade A, and why

web-games scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 5d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

.agents/skills/game-development/web-games/SKILL.md · 163 lines

How it starts

The opening of the file, as written. The whole thing — 163 lines — stays where its author put it; the contents beside it link to each section on GitHub.

Web Browser Game Development

Framework selection and browser-specific principles. For stack choice details see game-development/engine-selection.


1. Framework Selection

Decision Tree

What type of game?
│
├── 2D Game
│   ├── Full game engine features? → Phaser 4
│   ├── Fast prototype / jam?      → Kaplay
│   ├── Raw rendering power?       → PixiJS 8
│   └── Tiny / no dependency?      → Raw Canvas / WebGL
│
├── 3D Game
│   ├── Full engine (physics, XR)? → Babylon.js
│   └── Rendering focused?         → Three.js
│
├── Hybrid (DOM UI + canvas moments)
│   └── Custom shell + guest viewport
│       (Canvas/Kaplay/Phaser/Pixi inside a region/modal)
│
└── Narrative-first
    └── Ink (inkjs) or Twine export + DOM host

Comparison

Framework Type Best For
Raw Canvas / WebGL 2D / low-level Small scope, full control
Kaplay 2D toolkit Rapid prototypes
Phaser 4 2D engine Full game features
PixiJS 8 2D renderer Rendering, custom systems
Three.js 3D renderer Visualizations, lightweight 3D
Babylon.js 3D engine Full engine, XR

Hybrid shell + guest

Use when chrome is HTML (menus, inventories, text, dashboards) but bursts of play need a canvas:

  1. Mount guest in a container; pass context in.
  2. Run a local game loop in the guest.
  3. Return results (score, pass/fail); destroy guest (RAF, listeners, GL context as needed).

Do not let the guest own global app routing unless the product is a full-screen game.


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 GPU-heavy projects: Use WebGPU with WebGL fallback
  • Broad legacy / simple 2D: Start with WebGL or Canvas 2D
  • Feature detection: Check navigator.gpu

Read the full file on GitHub · 163 lines

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 5d ago First seen · 163 lines · 63 tokens per session scan A 3f8d6fe3eca3

Subscribe to this mod's changes

web-games is a skill published in the GitHub repository frogobox/frogo-sdk (21 stars, last pushed 2d ago), licensed Apache-2.0. It adds 63 tokens to every session and 1,165 once invoked, about $0.0003 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.

Related

Other skills, from other repositories

sceneview-web

Build 3D and WebXR (AR/VR) experiences in the browser with SceneView for Web — Filament.js (WebGL2/WASM) wrapped in a Kotlin/JS DSL and a plain-JavaScript API on window.sceneview. Use whenever the user asks for "3D in the browser", "a web model viewer", "WebXR AR/VR", or any browser 3D/AR app where the dependency is…

sceneview/sceneview · 147 tokens

sceneview

Build 3D and AR apps with the SceneView SDK in Jetpack Compose, SwiftUI (iOS/macOS/visionOS via SceneViewSwift), Web (Filament.js), Flutter and React Native. Use whenever the user asks for "3D in Compose", "AR with ARCore in Compose", a model viewer, or any cross-platform 3D/AR app where the dependency is…

sceneview/sceneview · 156 tokens

sceneview-ios

Build 3D and AR apps on Apple platforms (iOS, macOS, visionOS) with SceneViewSwift — the SwiftUI wrapper around RealityKit. Use whenever the user asks for "3D in SwiftUI", "AR with ARKit in SwiftUI", a model viewer for iOS, or any Apple-platform 3D/AR app where the dependency is the SceneViewSwift Swift Package from…

sceneview/sceneview · 148 tokens

add-card

Implements new Magic: The Gathering cards for the Argentum Engine. Use when adding a new card, the user provides one or more card names to implement, or asks to implement a specific MTG card. Several cards that reuse existing primitives can be implemented together into one PR.

wingedsheep/argentum-engine · 0 tokens

add-feature

Adds a new feature or mechanic to the Argentum Engine (SDK primitive, effect, trigger, condition, static/replacement ability, server/client capability) following the project's architecture and SDK-elegance principles. Use when implementing engine/SDK/server/client functionality that isn't a single card — e.g. "add an…

wingedsheep/argentum-engine · 87 tokens

verify-set

Prove a Magic set is actually finished — card-for-card complete, field-for-field faithful to Scryfall, scripts that match their oracle text, tokens that resolve the set's own art, behaviourally sound — then archive its backlog. Builds the Scryfall dump and CardFieldVerificationTest, fans the per-card DSL and token…

wingedsheep/argentum-engine · 152 tokens