Claude Code Plugins

Community-maintained marketplace

Feedback

web-games

@majiayu000/claude-skill-registry
5
0

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

Install Skill

1Download skill
2Enable skills in Claude

Open claude.ai/settings/capabilities and find the "Skills" section

3Upload to Claude

Click "Upload skill" and select the downloaded ZIP file

Note: Please verify skill by going through its instructions before using it.

SKILL.md

name web-games
description Web browser game development principles. Framework selection, WebGPU, optimization, PWA.

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

  1. Asset compression - KTX2, Draco, WebP
  2. Lazy loading - Load on demand
  3. Object pooling - Avoid GC
  4. Draw call batching - Reduce state changes
  5. 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.