html5-game-editor: Skill for Cursor

Add Editor Command

Strict workflow for mutations that participate in undo/redo.

Follow .cursor/rules/editor-commands.mdc and .cursor/rules/editor-ui.mdc. Do not copy those files here.

When to use this skill

• User-visible project/scene/asset edits that must undo.
• A React panel currently calls document mutators directly.
• A pointer/paint gesture needs one history entry on completion.
• Adding a façade method on Editor that changes persisted state.

Do not use this for:

• Script gameplay (create-game-component / implement-runtime-feature).
• Transient UI (Inspector draft strings, Asset Browser search, dock layout).
• Runtime-only motion that must not write scene files (GameRuntime / setTransform2D on scripts).

Before changing code

1. Ask: does this change user-editable project state? If yes, it needs a Command.
2. Find the closest command under packages/editor-core/src/commands/ and copy its shape.
3. Decide sync vs async:

	Sync (execute / undo)	Async (async: true, executeAsync)
Typical	scene graph, transforms, components	catalogue/disk (DeleteAssetCommand, rename folder, scene file)
Manager	CommandManager.execute	CommandManager.executeAsync

1. CommandManager has no merge/coalesce API. Do not invent command squashing. Continuous tools preview on the renderer and commit one command on pointer-up (or one stroke). Group several already-built commands with CompositeCommand.

Implementation workflow

1. One class per file

Create packages/editor-core/src/commands/<kebab-name>-command.ts.

export class SetExampleCommand implements Command {
  readonly name = "SetExample";
  private readonly before: Example;
  private readonly after: Example;

  constructor(
    private readonly document: DocumentManager,
    /* selection if the command changes it */
  ) {
    // Capture before/after in the constructor from current document state.
  }

  execute(): void { /* apply after */ }
  undo(): void { /* restore before */ }
}