web-games

davila7/claude-code-templates · cli-tool/components/skills/creative-design/game-development/web-games/SKILL.md

Web browser game development principles. Framework selection, WebGPU, optimization, PWA.

Software EngineeringNo license★ 33156⑂ 3873commit 5cc17cf

Install skillView source on GitHub

What this skill does

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.

Installation

Copy a source-pinned command for your client. You run it yourself.

Destination: .claude/skills/web-games · pinned to the source commit

# Run from your project root
git clone https://github.com/davila7/claude-code-templates.git .skillboard-tmp
git -C .skillboard-tmp checkout 5cc17cf267132cc690dee82239b80a99ec82e4f8
mkdir -p ".claude/skills"
cp -r ".skillboard-tmp/cli-tool/components/skills/creative-design/game-development/web-games" ".claude/skills/"
rm -rf .skillboard-tmp

Review the source before running. This copies files into your project; it is not a one-click install and does not verify runtime safety.

New here? Step-by-step setup – from installing the agent to using the skill

Operating systemAgentI already use Claude Code

1
Install Git
Install Git with your package manager (Debian/Ubuntu shown; use dnf/pacman on others). Official download.
```
sudo apt update && sudo apt install -y git
```
2
Install Claude Code
Requires Node.js 18+. Install the CLI globally: Official docs. (command-line tool)
```
npm install -g @anthropic-ai/claude-code
```

Get the skill, pinned to its exact version

Open a terminal and run these steps (they clone the source, check out the exact commit, and copy the skill into place):

# Run from your project root
git clone https://github.com/davila7/claude-code-templates.git .skillboard-tmp
git -C .skillboard-tmp checkout 5cc17cf267132cc690dee82239b80a99ec82e4f8
mkdir -p ".claude/skills"
cp -r ".skillboard-tmp/cli-tool/components/skills/creative-design/game-development/web-games" ".claude/skills/"
rm -rf .skillboard-tmp

Destination: .claude/skills/web-games

4
Use it in Claude Code
Open Claude Code in your project. It reads skills from the folder above, so web-games is now available. Always review the source before using it – static checks cannot prove runtime safety.

Security & Audits

Scanner static-checks@0.1.0 · commit 5cc17cf26713. Static checks cannot prove runtime safety – review the source and the exact diff before installing. How checks work.

No static rules matched. This is not a safety guarantee.

web-games

davila7/claude-code-templates · cli-tool/components/skills/creative-design/game-development/web-games/SKILL.md

Web browser game development principles. Framework selection, WebGPU, optimization, PWA.

Software EngineeringNo license★ 33156⑂ 3873commit 5cc17cf

Install skillView source on GitHub

What this skill does

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)

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

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

Remember: Browser is the most accessible platform. Respect its constraints.

Installation

Copy a source-pinned command for your client. You run it yourself.

Destination: .claude/skills/web-games · pinned to the source commit

# Run from your project root
git clone https://github.com/davila7/claude-code-templates.git .skillboard-tmp
git -C .skillboard-tmp checkout 5cc17cf267132cc690dee82239b80a99ec82e4f8
mkdir -p ".claude/skills"
cp -r ".skillboard-tmp/cli-tool/components/skills/creative-design/game-development/web-games" ".claude/skills/"
rm -rf .skillboard-tmp

Review the source before running. This copies files into your project; it is not a one-click install and does not verify runtime safety.

New here? Step-by-step setup – from installing the agent to using the skill

Operating systemAgentI already use Claude Code

1
Install Git
Install Git with your package manager (Debian/Ubuntu shown; use dnf/pacman on others). Official download.
```
sudo apt update && sudo apt install -y git
```
2
Install Claude Code
Requires Node.js 18+. Install the CLI globally: Official docs. (command-line tool)
```
npm install -g @anthropic-ai/claude-code
```

Get the skill, pinned to its exact version

Open a terminal and run these steps (they clone the source, check out the exact commit, and copy the skill into place):

# Run from your project root
git clone https://github.com/davila7/claude-code-templates.git .skillboard-tmp
git -C .skillboard-tmp checkout 5cc17cf267132cc690dee82239b80a99ec82e4f8
mkdir -p ".claude/skills"
cp -r ".skillboard-tmp/cli-tool/components/skills/creative-design/game-development/web-games" ".claude/skills/"
rm -rf .skillboard-tmp

Destination: .claude/skills/web-games

4
Use it in Claude Code
Open Claude Code in your project. It reads skills from the folder above, so web-games is now available. Always review the source before using it – static checks cannot prove runtime safety.

Security & Audits

Scanner static-checks@0.1.0 · commit 5cc17cf26713. Static checks cannot prove runtime safety – review the source and the exact diff before installing. How checks work.

No static rules matched. This is not a safety guarantee.

web-games

What this skill does

Web Browser Game Development

1. Framework Selection

Decision Tree

Comparison (2025)

2. WebGPU Adoption

Browser Support (2025)

Decision

3. Performance Principles

Browser Constraints

Optimization Priority

4. Asset Strategy

Compression Formats

Loading Strategy

5. PWA for Games

Benefits

Requirements

6. Audio Handling

Browser Requirements

Best Practices

7. Anti-Patterns

Installation

Install Git

Install Claude Code

Get the skill, pinned to its exact version

Use it in Claude Code

Security & Audits

web-games

What this skill does

Web Browser Game Development

1. Framework Selection

Decision Tree

Comparison (2025)

2. WebGPU Adoption

Browser Support (2025)

Decision

3. Performance Principles

Browser Constraints

Optimization Priority

4. Asset Strategy

Compression Formats

Loading Strategy

5. PWA for Games

Benefits

Requirements

6. Audio Handling

Browser Requirements

Best Practices

7. Anti-Patterns

Installation

Install Git

Install Claude Code

Get the skill, pinned to its exact version

Use it in Claude Code

Security & Audits