SuperAPI AI Directory
Partner with us中文AI newsFavorites
Skillsweb-game-development

web-game-development

Coding & development

View repository

Updated 10-15 19:53

About this skill

Web Game Development

Use this skill when the real question is "which upstream Three.js/browser game-development skill should own this task, and how do I get it installed?"

This is a routing pack, not a reimplementation. The 19 real sub-skills live upstream at MengTo/Skills. The job here is to:

  1. classify the task honestly against the 19 sub-skills,
  2. pick the single narrowest match (combine only when the task truly crosses a documented boundary),
  3. fetch that sub-skill locally if it is not already installed,
  4. sequence multi-skill work along the game lifecycle, and
  5. route out to this repo's non-Three.js skills when they are the real owner.

Read references/skill-routing-table.md for the full 19-skill decision table with upstream-grounded "use when" lines and boundary notes. Read references/lifecycle-and-handoffs.md for the prototype → systems → content → assets → feel → perf → QA → release ordering and which sub-skills own each stage. Read references/route-outs.md before routing to unity-gamedev-skill-pack, game-performance-profiler, game-ci-cd-pipeline, game-build-log-triage, game-demo-feedback-triage, steam-store-launch-ops, or perfectpixel.

Explicit boundary against unity-gamedev-skill-pack

unity-gamedev-skill-pack curates external Unity/C# skill packs (Addressables, Cinemachine, GAS, VContainer, UniTask, Wwise). This skill, web-game-development, routes into the Three.js / browser game-development family instead. If the engine is Unity or Unreal, stop here and use unity-gamedev-skill-pack (or the engine-specific Unity/Unreal skills such as game-performance-profiler, game-ci-cd-pipeline, game-build-log-triage described in references/route-outs.md). Do not apply Three.js-authored sub-skill guidance to a Unity project or vice versa.

When to use this skill

  • The task is building, extending, or auditing a Three.js/browser action game
  • You need to pick between two or more upstream game-development sub-skills and are not sure which one is narrowest
  • The upstream sub-skill needed for the task is not yet installed locally
  • You are sequencing a multi-stage slice (e.g. new enemy type touching content, rig, AI, combat, and VFX skills) and need the right order and boundaries
  • You need an honest route-out to a Unity, generic-perf, CI/CD, build-log, demo-feedback, Steam-marketing, or sprite-generation skill instead

When not to use this skill

  • The engine is Unity or Unreal → use unity-gamedev-skill-pack (or the Unity/Unreal-specific skills in references/route-outs.md)
  • The task is generic web-app performance, not gameplay → use game-performance-profiler's non-game sibling or a general perf skill
  • The task is designing CI/CD or diagnosing a red build log → use game-ci-cd-pipeline or game-build-log-triage
  • The task is triaging playtest/demo feedback into a fix list → use game-demo-feedback-triage
  • The task is Steam store-page, wishlist, or launch-window strategy → use steam-store-launch-ops
  • The task is generating 2D pixel-art sprite sheets from a text prompt → use perfectpixel

Instructions

Step 1: Classify the request against the 19-skill table

Use references/skill-routing-table.md. Name the single narrowest sub-skill. If two skills seem to match, re-read the "Important boundaries" rules there before combining them — most apparent overlaps (enemy systems vs monster rig vs AI, combat vs encounters, hybrid assets vs Vesperfall review vs VFX/audio, test-playable vs ship) are actually one skill each owning a distinct concern.

Step 2: Check whether the matched sub-skill is installed

ls "${SKILLS_ROOT:-$HOME/.agents/skills}" | grep -x "<matched-skill-name>" || echo "not installed"

Step 3: Fetch the sub-skill if missing

Use scripts/fetch-upstream-skills.sh, which sparse-checkouts only agent-skills/game-development from https://github.com/MengTo/Skills.git and copies the requested sub-skill folder(s) into ${SKILLS_ROOT:-$HOME/.agents/skills} without deleting anything already there.

scripts/fetch-upstream-skills.sh --skill build-threejs-enemy-systems --skill tune-enemy-ai

Or fetch the entire family:

scripts/fetch-upstream-skills.sh --all

Always run with --dry-run first when the outcome is uncertain.

Step 4: Sequence multi-skill work along the lifecycle

Use references/lifecycle-and-handoffs.md to order work: prototype → systems → content → assets → feel → perf → QA → release. Do not build VFX/audio polish before the underlying system (combat, encounter, enemy) is defined; do not ship before test-playable proof exists.

Step 5: Route out honestly when this pack is not the right owner

Use references/route-outs.md. State the target skill name and the one-line reason before handing off.

Output format

Return a short routing packet:

## Routing packet
- Matched sub-skill(s): <name(s)>
- Why this is narrowest: <one line, grounded in the routing table>
- Installed? <yes/no> — fetch command if no
- Lifecycle stage: <prototype|systems|content|assets|feel|perf|qa|release>
- Route-out (if any): <skill name + reason>

Examples

Example 1: New enemy type end to end

Input

Add a new ranged enemy archetype with its own moveset, rig, AI behavior, and impact VFX to our Three.js ARPG.

Output sketch

  • Matched sub-skills: build-threejs-enemy-systems (content/moveset contract) → build-game-monster-system (rig/socket/collider conformance) → tune-enemy-ai (perception/intent/attack choice) → create-game-vfx (impact feedback)
  • Boundary note: enemy-systems owns portable content, monster-system owns rig conformance, tune-enemy-ai owns behavior — none of the three substitute for another
  • Lifecycle stage: systems → content → feel

Example 2: Mobile HUD regression

Input

Our inventory drag-and-drop is broken on touch and the HUD overlaps the action buttons in portrait.

Output sketch

  • Matched sub-skills: build-mobile-threejs-games (touch/HUD/orientation), build-game-inventory (drag/drop, non-drag alternatives)
  • Lifecycle stage: content/feel, then QA
  • Route-out: none — stays inside this pack

Example 3: Unity project mistakenly routed here

Input

Our Unity Addressables build keeps failing before a Steam release, fix it.

Output sketch

  • Route-out: unity-gamedev-skill-pack (engine is Unity/C#, not Three.js) and game-build-log-triage for the failing build
  • Do not apply any of the 19 Three.js sub-skills here

Best practices

  1. Start with the narrowest sub-skill; only combine skills when a documented boundary genuinely requires it.
  2. Fetch sub-skills through scripts/fetch-upstream-skills.sh rather than hand-copying files, so provenance and sparse-checkout scope stay clean.
  3. Never invent sub-skill content — this pack only routes; the upstream SKILL.md is the source of truth once fetched.
  4. Sequence work along the lifecycle so polish (VFX/audio) never precedes the system it communicates.
  5. Route out to Unity, perf, CI/CD, build-log, demo-feedback, Steam, or sprite skills honestly instead of stretching this pack to cover them.
  6. Keep --dry-run as the default first run of the fetch script in unfamiliar environments.

References