Skip to content

SKILL.md

Latest commit

 

History

History
61 lines (50 loc) · 2.68 KB

SKILL.md

File metadata and controls

61 lines (50 loc) · 2.68 KB
Raw
name phaser-editor-plugin
description 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 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 and docs/architecture.md.
  2. Pick the extension point: docs/extension-points.md.
  3. 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).