Phaser skill
Twenty-eight Phaser 4 skills for coding agents: scenes, physics, input, tilemaps, particles and a Phaser 3 to 4 migration guide
- 40,650 ★ on the repository
- Last commit
- MIT
Minimal access
Why this level
- The skills are text instructions and code examples that run nothing and make no network calls.
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/phaserDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewMinimal accessThe tool runs nothing and makes no network calls.
- The skills are text instructions and code examples that run nothing and make no network calls.
This is third-party code. Review the repository files before installing.
What it does
The `skills/` folder in the Phaser repository holds 28 skills, one per framework subsystem: scenes, Arcade and Matter physics, input, animations, tweens, tilemaps, particles, cameras, asset loading, text, filters with post-processing and audio. Each `SKILL.md` describes the subsystem's lifecycle and API for Phaser 4, lists source paths under `src/` and links to neighbouring skills. Two skills stand apart. `v4-new-features` lists what version 4 added: filters, `RenderNode`, `SpriteGPULayer`, `TilemapGPULayer`. `v3-to-v4-migration` walks through the changes that break old code: the renderer, the tint system, cameras, shaders, lighting and removed classes. The agent loads the right skill by the trigger words in its description, such as Scene, preload or migrate.
Who it is for. Browser game developers on Phaser 4 who build with Claude Code, Cursor or Codex, and teams moving a game over from Phaser 3.
Good fit when
- An agent builds a 2D game from scratch: a start scene, sprite loading, keyboard and touch input.
- A platformer needs physics and you are choosing between Arcade and Matter.
- A Phaser 3 project moves to version 4 and you want the list of breaking changes.
- Sprites get effects such as blur, glow, vignette or a gradient map through Phaser 4 filters.
- The tilemap is built but the agent gets lost in layers and collisions.
Not a fit when
- The game stays on Phaser 3: the skills are written for version 4 only.
- The project is built on Unity, Godot or PixiJS.
- Art, sound and story do not exist yet: the skills explain the framework and create no content.
Example request
Build a Phaser 4 platformer: a start scene, sprite loading, Arcade physics and arrow-key controls.Limitations
The README has no ready install command: copy the `skills/` folder into the agent's skills directory by hand or point the agent at its path. The descriptions target Phaser 4, so on a version 3 project the hints about the renderer, tints and effects will be wrong. The migration skill calls the Canvas renderer deprecated in version 4. For exact signatures the agent reads the source at the paths named in each `SKILL.md`, and 28 descriptions take up context, so in a small project keep only the subsystems you need.
How to disable. Delete the copied skill folders from the agent's skills directory or remove the path to `skills/` from its instructions. The `phaser` package in your project stays untouched.
FAQ
How do I connect the Phaser skills to Claude Code or Cursor?
Copy the `skills/` folder from the repository into the agent's skills directory, which is `.claude/skills/` for Claude Code. The authors advise something simpler: point the agent at that folder. The README has no install command.
Which skills are in the set?
Twenty-eight in total: `scenes`, `animations`, `cameras`, `physics-arcade`, `physics-matter`, `tilemaps`, `tweens`, `particles`, `loading-assets` and other subsystems, plus `v4-new-features` and `v3-to-v4-migration`.
Do the skills work for Phaser 3?
No, they are written for Phaser 4. For an old project only `v3-to-v4-migration` fits, since it helps carry the code over to the new version.
How do I move a project from Phaser 3 to Phaser 4?
Ask the agent to apply `v3-to-v4-migration`. The skill goes from large changes to small ones: renderer pipelines became render nodes, FX and masks became filters, and `Point` gave way to `Vector2`.
Do I still install Phaser itself?
Yes. The framework installs with `npm install phaser` from the README, and the skills only tell the agent how to work with it.
Discussion
No questions or reviews yet.
Related
SkillsA set of skills for building playable Three.js browser games: gameplay, AAA-style graphics, UI, asset generation, audio, debugging and release checks
A plugin that builds browser 2D and 3D games from an idea: pixel art, audio, Playwright checks and publishing in one pipeline.
25 skills for the melonJS engine: your agent writes 2D and 3D HTML5 game code by the engine's rules and avoids silent mistakes
A set of game-dev skills for AI agents with a router that picks the right ones for the engine and task
Official Unity skill set for agents: editor control, builds, 2D and 3D, UI, URP, audio, multiplayer and monetization
An Effect v4 skill for TypeScript: schemas, services and layers, config, retries, caches, streams, the HTTP client and tests with virtual time
Comparison with similar tools
Cards that share the main search query, and how they differ.
| Tool | Official | Repository stars | Main difference |
|---|---|---|---|
| Phaser (this card) | yes | 40,650 | |
| awesome-gamedev-agent-skills | no | 7,190 | a game-dev skills collection with a router across engines; this is one framework's set from its own authors |
| Three.js Game Skills | no | 2,703 | skills for browser games on Three.js; these cover the 2D framework Phaser |
README in short
The README introduces Phaser as a free, fast 2D framework for HTML5 games on Canvas and WebGL. Its AI section notes that models already know Phaser from training data and that the skills add the details of version 4. A migration guide and change logs sit alongside.
README badge
Original SKILL.md
---
name: scenes
description: "Use this skill when working with Phaser 4 scenes. Covers scene lifecycle methods, scene transitions, parallel scenes, scene communication, sleeping, pausing, restarting, and the SceneManager. Triggers on: Scene, scene lifecycle, preload, create, update, scene transition, SceneManager."
---
# Scenes
> Scenes are the organizational backbone of a Phaser game. Each Scene has its own lifecycle (init, preload, create, update), its own set of injected systems (this.add, this.input, this.cameras, etc.), and can be started, stopped, paused, slept, or run in parallel with other Scenes. The ScenePlugin (`this.scene`) controls all multi-scene orchestration.
**Key source paths:** `src/scene/Scene.js`, `src/scene/Systems.js`, `src/scene/SceneManager.js`, `src/scene/ScenePlugin.js`, `src/scene/Settings.js`, `src/scene/const.js`, `src/scene/events/`, `src/scene/InjectionMap.js`
**Related skills:** ../game-setup-and-config/SKILL.md, ../loading-assets/SKILL.md, ../events-system/SKILL.md
## Quick Start
```js
// Minimal scene with all lifecycle methods
class GameScene extends Phaser.Scene {
constructor() {
super('GameScene');
}
init(data) {
// Called first. Receives data passed from other scenes.
// 'data' is whatever was passed via scene.start('GameScene', { level: 1 })
this.level = data.level || 1;
}
preload() {
// Called after init. Load assets here.
this.load.image('logo', 'assets/logo.png');
}
create(data) {
// Called after preload completes. Set up game objects.
// 'data' is the same object passed to init.
this.add.image(400, 300, 'logo');
}
update(time, delta) {
// Called every frame while scene is RUNNING.
// time: current time (ms), delta: ms since last frame (smoothed)
}
}
const config = {
width: 800,
height: 600,
scene: [GameScene]
};