editor-engine-functionality

Enforce engine-first implementation of editor features with React as visual adapter.

Updated Jan 1, 2026
One-click install
npx skills add https://github.com/ViewableGravy/better-ecs --skill editor-engine-functionality
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: editor-engine-functionality
Source: https://github.com/ViewableGravy/better-ecs/tree/main/.github/skills/editor-engine-functionality
Command: npx skills add https://github.com/ViewableGravy/better-ecs --skill editor-engine-functionality

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill enforces a structured workflow for developing editor features, ensuring that core logic resides within the engine services rather than the React UI layer, leading to a cleaner, more maintainable architecture.

Core Features & Use Cases

  • Enforces Engine-First Implementation: Guarantees that editor behaviors are implemented in engine services, with React acting solely as a visual adapter.
  • Streamlined Workflow: Provides a clear, step-by-step process for adding or refactoring editor functionality.
  • Use Case: When adding a new gizmo to the editor, this skill ensures the gizmo's logic is in the engine, and React only handles its visual representation and user interaction dispatch.

Quick Start

Use this skill to implement new editor behavior by defining the feature API on engine.editor first.

Frequently Asked Questions about editor-engine-functionality

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I structure editor features in React without bloating the UI layer?

To structure editor features without bloating React, enforce an engine-first implementation model where runtime behavior is managed by engine services and React serves solely as a visual adapter. This ensures core logic resides within the engine, leading to cleaner architecture.

How do I add a new gizmo to the editor using an engine-first workflow?

To add a new gizmo using an engine-first workflow, define the feature API on `engine.editor` first, implement the gizmo's runtime behavior in engine-owned services, and then build the visual representation and interaction dispatch in React.

What is the best way to refactor editor tool modes and selection logic?

The best way to refactor editor tool modes and selection logic is to define feature APIs on `engine.editor` and implement the behavior in engine-owned services. This enforces architecture rules where the engine owns runtime logic and React owns presentation.

Why should the engine own runtime logic instead of React for editor transforms?

The engine should own runtime logic for editor transforms because it enforces a structured workflow where core behavior resides in engine services. React acts only as a visual adapter, which results in a cleaner, more maintainable architecture with minimal manager APIs and strict typing.

Can I use React for editor placement logic while keeping the engine as a visual adapter?

No, React should not own editor placement logic. The engine-first model requires that runtime behavior for placement is implemented in engine services, while React is restricted to handling only visual representation and dispatching user interactions.

Do I need TypeScript to implement engine-first editor functionality?

Yes, TypeScript is required to implement engine-first editor functionality. The architecture focuses on minimal manager APIs and strict typing, using TypeScript to enforce the separation between engine-owned runtime logic and React presentation.