Ling: Skill for Claude Code

.agents/skills/game-development/web-games/SKILL.md

web-games is a skill for Claude Code from MisonL/Ling. It costs 22 tokens per session (979 once invoked), scanned A, original, MIT.

A guide to making games that run in web browsers, covering framework selection, rendering, performance, and asset loading.

In plain words
What is it for?
It supports decisions for 2D, 3D, Canvas, WebGL, and WebGPU games, including fallbacks, compressed assets, lazy loading, object pools, and background loading.
Why use it?
It helps developers choose between browser game libraries and account for limits such as hidden-tab throttling, mobile data, and audio autoplay rules.

Skill for Claude Code

Written for Claude Code: allowed-tools in frontmatter. Also seen: installed under .agents/ (shared by several agents).

This is MisonL/Ling's own configuration. It tells Claude Code how to work on Ling itself, so it is not a mod to install elsewhere. Copy it as a starting point and replace the rules that are about this project. Everything Ling configures →

Reuse

Borrowing it

Nothing to install: this file belongs to MisonL/Ling. Take a copy, put it at the same path in your own repository, and replace the rules that are about this project with yours.

Copy the file
curl -O https://raw.githubusercontent.com/MisonL/Ling/main/.agents/skills/game-development/web-games/SKILL.md
Clone the repo
git clone --depth 1 https://github.com/MisonL/Ling

Made for: Claude Code.

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/misonl/ling/web-games/github.svg)](https://agentmods.dev/skills/misonl/ling/web-games)
Your own site
<a href="https://agentmods.dev/skills/misonl/ling/web-games"><img src="https://agentmods.dev/badge/skills/misonl/ling/web-games/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

agentmods 80×15 button for web-games

Your own site · 80×15
<a href="https://agentmods.dev/skills/misonl/ling/web-games"><img src="https://agentmods.dev/badge/skills/misonl/ling/web-games.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session 22 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 979 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe.
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.1 $0.00022 $0.00979
Opus 5.5 $0.00009 $0.00392
Sonnet 5.5 $0.00004 $0.00196
Haiku 4.5 $0.00002 $0.00098

Measured 1mo ago against content hash a7466cf8c643, method: parsed. Prices are Anthropic first-party input rates as of 2026-10-07, 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 1mo 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 · 151 lines

What it actually says

Web 浏览器游戏开发

框架选择与浏览器特定原则。


1. 框架选择

决策树

什么类型的游戏?
|
+-- 2D 游戏
|   +-- 完整的游戏引擎功能? -> Phaser
|   +-- 原始渲染能力? -> PixiJS
|
+-- 3D 游戏
|   +-- 完整引擎(物理、XR)? -> Babylon.js
|   +-- 渲染聚焦? -> Three.js
|
+-- 混合 / Canvas
    +-- 自定义 -> Raw Canvas/WebGL

对比(2025)

框架 类型 最适合
Phaser 4 2D 完整游戏功能
PixiJS 8 2D 渲染、UI
Three.js 3D 可视化、轻量级
Babylon.js 7 3D 完整引擎、XR

2. WebGPU 采用

浏览器支持(2025)

浏览器 支持
Chrome [OK] 自 v113 起
Edge [OK] 自 v113 起
Firefox [OK] 自 v131 起
Safari [OK] 自 18.0 起
总计 ~73% 全球

决策

  • 新项目:使用 WebGPU,并提供 WebGL 回退
  • 遗留支持:从 WebGL 开始
  • 特性检测:检查 navigator.gpu

3. 性能原则

浏览器限制

限制 策略
无本地文件访问 资产打包、CDN
标签页节流 隐藏时暂停
移动数据限制 压缩资产
音频自动播放 需要用户交互

优化优先级

  1. 资产压缩 - KTX2、Draco、WebP
  2. 懒加载 - 按需加载
  3. 对象池 - 避免 GC
  4. 绘制调用合批 - 减少状态变更
  5. Web Workers - 卸载繁重计算

4. 资产策略

压缩格式

类型 格式
纹理 KTX2 + Basis Universal
音频 WebM/Opus(回退:MP3)
3D 模型 glTF + Draco/Meshopt

加载策略

阶段 加载
启动 核心资产,<2MB
游戏过程 按需流式传输
后台 预取下一关

5. 游戏的 PWA

优势

  • 离线游玩
  • 安装到主屏幕
  • 全屏模式
  • 推送通知

要求

  • Service worker 用于缓存
  • Web app manifest
  • HTTPS

6. 音频处理

浏览器要求

  • 音频上下文需要用户交互
  • 在首次点击/轻触时创建 AudioContext
  • 如果挂起则恢复上下文

最佳实践

  • 使用 Web Audio API
  • 池化音频源
  • 预加载常用声音
  • 使用 WebM/Opus 压缩

7. 反模式

[FAIL] 禁止 [OK] 推荐
一次性加载所有资产 渐进式加载
忽略标签页可见性 隐藏时暂停
阻塞在音频加载上 懒加载音频
跳过压缩 压缩一切
假设快速连接 处理慢速网络

记住: 浏览器是最易访问的平台。尊重它的限制。

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. 1mo ago First seen · 151 lines · 22 tokens per session scan A a7466cf8c643

Subscribe to this mod's changes

web-games is a skill published in the GitHub repository MisonL/Ling (8 stars, last pushed 7mo ago), licensed MIT. It adds 22 tokens to every session and 979 once invoked, about $0.0001 per session on Opus 5.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-31.

Related

Other skills, from other repositories

playtest-report

Structured playtest report template, or turn existing playtest notes into structured feedback.

Donchitos/Claude-Code-Game-Studios · 20 tokens

godot-signals-groups

Build event-driven, decoupled Godot 4.7 gameplay with signals and node groups: declare and emit custom signals, connect with Callables (incl. bind/one-shot), and broadcast to many nodes via groups and callgroup. Use when wiring node communication in a Godot project, replacing tight references with signals…

gamedev-skills/awesome-gamedev-agent-skills · 95 tokens

motion

Reconstruct a skeleton from calibrated mesh projections and sequential VLM joint annotations, then fit joints and skin weights. Generate motion from joint-position trajectories, rhythm and contact constraints through IK; refine bone orientation against the action, then export, retarget and validate on the target mesh.

OpenDCAI/GameFactory-3A · 0 tokens

unity-addressables

Manage Addressables groups, entries, profiles and content builds (com.unity.addressables, reflection-based).

Besty0728/Unity-Skills · 25 tokens

unity-manual-component

Manually add, configure, reorder, and copy components on GameObjects using Unity Editor UI. For one-off Inspector workflows that do not need REST automation.

Besty0728/Unity-Skills · 36 tokens

threejs-exposure-color-grading

Build a measured exposure and grading path in Three.js. Use for a 64x36 encoded luminance meter, asynchronous readback, weighted log-average exposure, asymmetric adaptation, single tone-map ownership, and a generated 32-cube post-tone-map LUT.

scottstts/Threejs-Awesome-Graphics-Agent-Skills · 60 tokens