melonJS skill
25 skills for the melonJS engine: your agent writes 2D and 3D HTML5 game code by the engine's rules and avoids silent mistakes
- 6,441 ★ on the repository
- Last commit
- MIT
Minimal access
Why this level
- The skills are markdown instructions with no scripts
- The install command downloads files from the master branch and creates symlinks in the assistants' folders
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/melonjsDetects 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 markdown instructions with no scripts
- The install command downloads files from the master branch and creates symlinks in the assistants' folders
This is third-party code. Review the repository files before installing.
What it does
melonJS is an open-source HTML5 game engine for 2D, 2.5D and 3D, rendering through WebGPU, WebGL 2 or Canvas with automatic fallback. The repository carries a set of 25 skills that teach an agent the engine's conventions and the mistakes that fail silently instead of throwing. The main skill, melonjs, is the entry point and routes the agent to a specialised one: app bootstrap, scenes and state, sprites, input, physics, Tiled maps, audio, shaders, the 3D tier, performance, plugins. A separate migration skill covers code written from pre-20 material. When a method is missing from the skills, the agent looks it up in the engine's full API index. The skills ship with the engine inside the npm package, so their version matches the one you run.
Who it is for. For browser game developers on JavaScript and TypeScript who write melonJS code together with Claude Code, Cursor, Codex or another agent.
Good fit when
- A new melonJS game where the agent needs asset loading, scenes and sprites without guessing the API
- A project on version 19 or older that has to move to 20
- A Tiled map fails to load or objects receive no pointer events
- A scene with a camera and glTF models where the axes behave opposite to OpenGL
- A game drops frames and you need to look at draw calls, pooling and batching
Not a fit when
- The game uses another engine such as Phaser or Godot: the skills know only melonJS
- You need a reference for methods and properties: the skills are hand-written and deliberately partial
- You write without an agent: `npm create melonjs my-game` is enough to start, and the skills stay plain markdown to read
Example request
Build a melonJS platformer with a Tiled map, a camera and footstep sounds, starting with the melonjs skillLimitations
The install command takes the skills from the master branch. To match your engine version, replace master in the URL with a release tag. If the project already has an AGENTS.md, move the sections from the set into it by hand. GitHub Copilot reads the same content from `.github/copilot-instructions.md`. The skills describe version 20 and newer, so for projects on 19 and older start with the migration skill and check the result by running the game.
How to disable. Delete the skill folders from `.agents/skills/` and the symlinks to them in the assistants' folders, for example `.claude/skills/melonjs`.
FAQ
How do I install the melonJS skills in Claude Code?
Run `npx skills add https://github.com/melonjs/melonJS/tree/master/packages/melonjs/skills`. The command detects the assistants in your project, places one copy of each skill under `.agents/skills/<skill name>` and symlinks it into each assistant's folder; for Claude Code that is `.claude/skills/melonjs`. Add `-a claude-code -a cursor` to target specific assistants.
Why does code from old melonJS tutorials fail?
Version 20.0 removed the old engine bootstrap, and most published material predates it. The melonjs-20-migration skill lists the outdated spots: video.init, Entity and assigning renderable.shader.
Which three mistakes does the main skill flag first?
First, without await app.init() the renderer does not exist: a plain object is added and never draws, while new Sprite throws a TypeError. Second, draw order is set only by addChild(child, z); objects have no z property. Third, isKinematic defaults to true, which drops the object from pointer events and physics.
Do Cursor and Codex need a separate install?
No, the same command installs the skills for every assistant it finds. The set includes an AGENTS.md for tools that read that convention; Codex, Cursor and Gemini CLI pick it up on their own.
What if the method I need is not in the skills?
Open the API index at melonjs.github.io/melonJS/llms.txt. It lists every exported class and function and marks deprecated ones. If a class is absent from the index, it is absent from the public API.
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 set of game-dev skills for AI agents with a router that picks the right ones for the engine and task
Twenty-eight Phaser 4 skills for coding agents: scenes, physics, input, tilemaps, particles and a Phaser 3 to 4 migration guide
Dimillian Skills
Skills
A set of 16 engineering skills for agents: Apple platform work, macOS packaging, React performance, code review and refactoring
skills-npm links agent skills shipped in your dependencies in node_modules and listed in the skills field of package.json
A skill that draws a clickable Mermaid diagram in HTML: how a feature, a data flow or database tables work, with code per node
Comparison with similar tools
Cards that share the main search query, and how they differ.
| Tool | Official | Repository stars | Main difference |
|---|---|---|---|
| melonJS (this card) | yes | 6,441 | |
| Unity Skills | no | 1,210 | teaches an agent to work with the Unity engine |
| Godogen | no | 7,287 | builds games on Godot |
README in short
The engine installs through `npm install melonjs` or a CDN, and `npm create melonjs my-game` scaffolds a TypeScript and Vite project with the debug plugin. A separate section for AI agents gives the skill install command and a link to the API index.
README badge
Original SKILL.md
--- name: melonjs description: "Use this skill FIRST for any melonJS task; it routes to the right specialised skill and lists the companion packages. melonJS is an open-source 2D, 2.5D and 3D HTML5 game engine running on WebGPU, WebGL 2 or Canvas. Covers Application setup, the scene graph, renderables, sprites, tilemaps, physics, audio, particles, shaders, and the 3D tier — perspective cameras, meshes and glTF scenes. Triggers on: melonjs, melonJS, me.game, Application, app.init, app.world, Renderable, Sprite, Stage, state.change, Camera2d, Camera3d, Mesh, tilemap, Tiled, TMX, ParticleEmitter, ShaderEffect, how do I make a game, HTML5 game engine." license: MIT --- # melonJS Entry point for the melonJS skill collection. melonJS is an open-source HTML5 game engine for indie developers, covering 2D, 2.5D and 3D — perspective and orthogonal cameras, GPU-accelerated tilemap rendering, post-processing effects, custom shaders, 3D meshes, polygon-accurate physics and modern Tiled workflows. It runs on WebGPU, WebGL 2 or Canvas with automatic fallback, and has no runtime dependencies. ## How to use this skill 1. Find the specialised skill below that matches the task and follow it. 2. If the task involves anything 3D, read `melonjs-3d` **first** — melonJS's coordinate conventions are the inverse of OpenGL's, so untutored 3D instincts are backwards. 3. If you are writing melonJS from prior knowledge rather than from the current docs, read `melonjs-20-migration` — most published melonJS material predates 20.0 and its bootstrap no longer exists. 4. If none of them covers the task, use the escape hatch below rather than guessing at an API. ## Skill router | Skill | Load when… | |---|---| | [melonjs-getting-started](../melonjs-getting-started/SKILL.md) | Bootstrapping a game, `new Application`, `await app.init()`, choosing a renderer, preloading assets. | | [melonjs-20-migration](../melonjs-20-migration/SKILL.md) | Code based on melonJS 19.x or earlier, or an API that "should exist" but doesn't — `video.init`, `Entity`, `renderable.shader =`. | | [melonjs-scenes-and-state](../melonjs-scenes-and-state/SKILL.md) | `Stage` subclasses, the state manager, transitions, pausing, the update loop, timers, tweens, saved data. | | [melonjs-renderables](../melonjs-renderables/SKILL.md) | Subclassing `Renderable`, custom `draw()`, draw order, anchors, `floating`, post effects on an object. | | [melonjs-sprites-and-animation](../melonjs-sprites-and-animation/SKILL.md) | `Sprite`, frame animation, texture atlases (TexturePacker / Aseprite / ShoeBox), tint, flip, pooling. | | [melonjs-input](../melonjs-input/SKILL.md) | Keyboard actions, pointer and touch handling, drag, gamepad, virtual controls. | | [melonjs-physics](../melonjs-physics/SKILL.md) | Collision, bodies, movement, spatial queries, and the planck / matter adapters. | | [melonjs-math](../melonjs-math/SKILL.md) | Vectors and matrices: what mutates, what allocates, and interpolating with lerp, slerp, damp or moveTowards. | | [melonjs-tilemaps](../melonjs-tilemaps/SKILL.md) | Tiled maps — TMX/TSX loading, spawning entities from objects, collision layers, isometric maps. | | [melonjs-audio](../melonjs-audio/SKILL.md) | Sound effects, music, audio sprites, spatial audio, procedural tone and noise. | | [melonjs-effects-and-shaders](../melonjs-effects-and-shaders/SKILL.md) | Post effects, custom GLSL/WGSL shaders, blend modes, colour grading, screen capture. | | [melonjs-3d](../melonjs-3d/SKILL.md) | Anything 3D or 2.5D — `Camera3d`, meshes, instancing, `Sprite3d` billboards, `Light3d`, distance fog, glTF scenes. | | [melonjs-3d-assets](../melonjs-3d-assets/SKILL.md) | Loading glTF/GLB or OBJ models — materials, imported lights, instancing, and what is not supported. | | [melonjs-camera-and-drawing](../melonjs-camera-and-drawing/SKILL.md) | Camera follow, bounds, shake and fade, coordinate conversion, and immediate-mode shape drawing. |