Scene-first architecture organizes games into distinct lifecycle phases (Boot, Menu, Game, Pause, GameOver) with clean state management across transitions
Supports Arcade physics for speed and simplicity, Matter physics for realistic simulations, and physics-free scenes for menus and overlays
Fetches phaser-gamedev from chongdashu/phaserjs-tinyswords and configures it for Cursor.
3
Select Cursor when prompted
The CLI shows a list of agents. Use arrow keys and space to select Cursor:
◆ Which agents do you want to install to?
│
│ ── Universal (.agents/skills) ────────────────
│ · Cline · Codex · Goose · Windsurf
│ ●Cursor(selected)
│ · Cursor · Aider · Continue
4
Verify installation
Confirm successful installation by checking the skill directory location:
.cursor/skills/phaser-gamedev
Restart Cursor to activate phaser-gamedev. Access via /phaser-gamedev in your agent's command palette.
⚠
Security Notice
We perform automated surface-level scans (Gen AI Scanner, Socket, Snyk) during installation. These checks detect common vulnerabilities but do not guarantee complete security. Always review skill source code and verify the publisher's reputation before production use.
Skills execute code in your environment. Always review source, verify the publisher, and test in isolation before production.
Build fast, polished 2D browser games using Phaser 3's scene-based architecture and physics systems.
Philosophy: Games as Living Systems
Games are not static UIs—they are dynamic systems where entities interact, state evolves, and player input drives everything. Before writing code, think architecturally.
Before building, ask:
What scenes does this game need? (Boot, Menu, Game, Pause, GameOver)
What entities exist and how do they interact?
What state must persist across scenes?
What physics model fits? (Arcade for speed, Matter for realism)
What input methods will players use?
Core principles:
Scene-First Architecture: Structure games around scenes, not global state
Composition Over Inheritance: Build entities from game objects and components
Physics-Aware Design: Choose physics system before coding collisions
Asset Pipeline Discipline: Preload everything, reference by key
Frame-Rate Independence: Use delta time, not frame counting
Game Configuration
Every Phaser game starts with a configuration object.
Minimal Configuration
const config ={type:Phaser.AUTO,// WebGL with Canvas fallbackwidth:800,height:600,scene:[BootScene,GameScene]};const game =newPhaser.Game(config);
Full Configuration Pattern
const config ={type:Phaser.AUTO,width:800,height:600,parent:'game-container',// DOM element IDbackgroundColor:'#2d2d2d',scale:{mode:Phaser.Scale.FIT,autoCenter:Phaser.Scale.CENTER_BOTH},physics:{default:'arcade',arcade:{gravity:{y:300},debug:false// Enable during development}},scene:[BootScene,MenuScene,GameScene,GameOverScene]};
Physics System Choice
System
Use When
Arcade
Platformers, shooters, most 2D games. Fast, simple AABB collisions
Matter
Physics puzzles, ragdolls, realistic collisions. Slower, more accurate
None
Menu scenes, visual novels, card games
Scene Architecture
Scenes are the fundamental organizational unit. Each scene has a lifecycle.
Scene Lifecycle Methods
classGameSceneextendsPhaser.Scene{constructor(){super('GameScene');// Scene key for reference}init(data){// Called first. Receive data from previous scenethis.level= data.level||1;}preload(){// Load assets. Runs before create()this.load.image('player','assets/player.png');this.load.spritesheet('enemy','assets/enemy.png',{frameWidth:32,frameHeight:32});}create(){// Set up game objects, physics, inputthis.player=this.physics.add.sprite(100,100,'player');this.cursors=this.input.keyboard.createCursorKeys();}update(time, delta){// Game loop. Called every frame// delta = milliseconds since last framethis.player.x+=this.speed*(delta /1000);}}
Scene Transitions
// Start a new scene (stops current)this.scene.start('GameOverScene',{score:this.score});// Launch scene in parallel (both run)this.scene.launch('UIScene');// Pause/resume scenesthis.scene.pause('GameScene');this.scene.resume('GameScene');// Stop a scenethis.scene.stop('UIScene');
Recommended Scene Structure
scenes/
├── BootScene.js # Asset loading, progress bar
├── MenuScene.js # Title screen, options
├── GameScene.js # Main gameplay
├── UIScene.js # HUD overlay (launched parallel)
├── PauseScene.js # Pause menu overlay
└── GameOverScene.js # End screen, restart option
›Access to product documentation and roadmap tools (Jira, Notion, etc.)
›Understanding of product management frameworks (RICE, Jobs-to-be-Done, etc.)
›Stakeholder contact information and communication channels
Time Estimate
30-60 minutes to see productivity improvements
Steps
1Install product management skill
2Start with user story generation for known feature
3Progress to competitive analysis: research 2-3 competitors
4Use for roadmap prioritization: apply RICE/ICE scoring
5Draft stakeholder communications and refine based on feedback
6Build template library for recurring PM tasks
7Share effective prompts with product team
Common Pitfalls
⚠Not validating competitive research—verify facts before sharing
⚠Accepting user stories without involving engineering team
⚠Over-relying on frameworks without qualitative judgment
⚠Not customizing outputs to company culture and communication style
⚠Skipping stakeholder validation of generated requirements
Best Practices
✓ Do
+Validate research and competitive analysis with real data
+Collaborate with engineering when generating technical requirements
+Customize frameworks and templates to your company context
+Use skill for first drafts, refine with stakeholder input
+Document successful prompt patterns for PM tasks
+Combine AI efficiency with human judgment and intuition
✗ Don't
−Don't publish competitive analysis without fact-checking
−Don't finalize user stories without engineering review
−Don't make prioritization decisions solely on AI scoring
−Don't skip customer validation of generated requirements
−Don't ignore company-specific context and culture
💡 Pro Tips
★Provide context: company goals, constraints, customer feedback
★Ask for alternatives: 'Show 3 ways to prioritize this roadmap'
★Request stakeholder-specific formatting: 'Executive summary vs. engineering spec'
★Use skill for 70% generation + 30% customization to company needs
When to Use This
✓ Use when
Use for user story writing, competitive research, roadmap prioritization, stakeholder communication, and PRD drafting. Best for reducing repetitive documentation and research work.
✗ Avoid when
Avoid for strategic product vision (requires deep customer empathy), pricing decisions (needs market and financial expertise), or when face-to-face customer discovery is more valuable than speed.
Learning Path
1Basic: user stories, feature specs, status updates
