How do I install the Phaser Editor Plugin skill?

Run npx skillmds@latest add phaserjs/phaser-editor-plugin in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Phaser Editor Plugin safe to use?

This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. Capability flags: docs only. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Phaser Editor Plugin?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Phaser Editor Plugin free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Phaser Editor Plugin?

phaserjs (@phaserjs) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Phaser Editor Plugin by phaserjs — Agent Skill

Name: Phaser Editor Plugin
Rating: 4.2 (5 reviews)
Author: phaserjs

Phaser Editor Plugin

Build and extend third-party plugins for Phaser Editor v5 in this template. Use when adding or modifying a plugin feature — a command, custom editor, content type, New File wizard entry, Inspector property section, Outline provider, view, theme, or plugin styles — or when working with plugin.json, the colibri API, the bundled types/*.d.ts, or registerExtensions. Read the docs/ recipes before writing code.

phaserjs Updated Sep 17, 2026

File contents

Phaser Editor v5 plugin development

This repository is a template for third-party Phaser Editor v5 plugins. Use this skill whenever you add or change plugin functionality.

First: read the right doc

The repo's docs/ folder is the source of truth for patterns. Read the relevant doc before writing code — don't rely on memory for the colibri API.

Orientation: AGENTS.md and docs/architecture.md.
Pick the extension point: docs/extension-points.md.
Read the matching recipe in docs/recipes/:

Non-negotiables

Everything is registered in registerExtensions(reg) via reg.addExtension(new SomeExtension(...)). Edit myplugin.example/src/ExamplePlugin.ts.
One plugin = one TypeScript namespace. No import/export between plugin files; no bundler; no runtime npm.
The editor API lives only in types/colibri.d.ts and types/phasereditor2d.files.d.ts. Grep them to confirm any API — if it isn't there, it isn't available. Never edit them to make code compile.
IDs are namespaced: "<pluginId>.<Name>".
UI must be theme-correct (separate layout from per-theme color; ship light and dark). Register CSS in plugin.json styles.

Workflow

- [ ] Read AGENTS.md + the matching docs/recipe
- [ ] Find the closest existing example in myplugin.example/src and copy its shape
- [ ] Confirm API names by grepping types/*.d.ts
- [ ] Add code in src/ (same namespace) and register it in ExamplePlugin.ts
- [ ] npm run build  (must pass with no type errors)

Best reference: the working example

myplugin.example/ is a complete plugin. Mirror its structure: ExamplePlugin.ts (a command + all registrations) and src/editors/ (a custom editor with content type, New File wizard, Outline, and Inspector).

---name: phaser-editor-plugindescription: Build and extend third-party plugins for Phaser Editor v5 in this template. Use when adding or modifying a plugin feature — a command, custom editor, content type, New File wizard entry, Inspector property section, Outline provider, view, theme, or plugin styles — or when working with plugin.json, the colibri API, the bundled types/*.d.ts, or registerExtensions. Read the docs/ recipes before writing code.---# Phaser Editor v5 plugin developmentThis repository is a template for third-party Phaser Editor v5 plugins. Use thisskill whenever you add or change plugin functionality.## First: read the right docThe repo's `docs/` folder is the source of truth for patterns. **Read therelevant doc before writing code** — don't rely on memory for the colibri API.1. Orientation: [`AGENTS.md`](../../../AGENTS.md) and [`docs/architecture.md`](../../../docs/architecture.md).2. Pick the extension point: [`docs/extension-points.md`](../../../docs/extension-points.md).3. Read the matching recipe in `docs/recipes/`: - [add a command](../../../docs/recipes/add-a-command.md) - [add a custom editor](../../../docs/recipes/add-a-custom-editor.md) - [add a content type & New File wizard](../../../docs/recipes/add-a-content-type-and-new-file.md) - [add Inspector properties](../../../docs/recipes/add-inspector-properties.md) - [add styles (theme-correct)](../../../docs/recipes/add-styles.md)## Non-negotiables- Everything is registered in `registerExtensions(reg)` via `reg.addExtension(new SomeExtension(...))`. Edit `myplugin.example/src/ExamplePlugin.ts`.- One plugin = **one TypeScript namespace**. No `import`/`export` between plugin files; no bundler; no runtime npm.- The editor API lives only in `types/colibri.d.ts` and `types/phasereditor2d.files.d.ts`. **Grep them to confirm any API** — if it isn't there, it isn't available. Never edit them to make code compile.- IDs are namespaced: `"<pluginId>.<Name>"`.- UI must be theme-correct (separate layout from per-theme color; ship light and dark). Register CSS in `plugin.json` `styles`.## Workflow```- [ ] Read AGENTS.md + the matching docs/recipe- [ ] Find the closest existing example in myplugin.example/src and copy its shape- [ ] Confirm API names by grepping types/*.d.ts- [ ] Add code in src/ (same namespace) and register it in ExamplePlugin.ts- [ ] npm run build (must pass with no type errors)```## Best reference: the working example`myplugin.example/` is a complete plugin. Mirror its structure:`ExamplePlugin.ts` (a command + all registrations) and `src/editors/` (a customeditor with content type, New File wizard, Outline, and Inspector).

Frequently asked questions