# 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.

- Skill: `phaserjs/phaser-editor-plugin` (Agent Skill)
- Install (CLI): `npx skillmds@latest add phaserjs/phaser-editor-plugin`
- Raw SKILL.md: https://api.skillmd.com/api/skills/phaserjs/phaser-editor-plugin/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Integrations & APIs
- Author: phaserjs (https://skillmd.com/u/phaserjs)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/phaserjs/phaser-editor-plugin

---


# 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.

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 custom
editor with content type, New File wizard, Outline, and Inspector).