skills.rest
kateusz
kateuszCOMMUNITY
Explore all skills by this author →
GitHub

editor-panel-creation

Create ImGui editor panels with DryIoc DI and UI Elements.

13|2|Updated Jul 17, 2023
Search Tags:#workflow#dependency injection#editor#gamedev#imgui#editorlayer#ui panels
One-click install
npx skills add https://github.com/kateusz/GameEngine --skill editor-panel-creation
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: editor-panel-creation
Source: https://github.com/kateusz/GameEngine/tree/main/.claude/skills/editor-panel-creation
Command: npx skills add https://github.com/kateusz/GameEngine --skill editor-panel-creation

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a comprehensive, step-by-step workflow for creating new ImGui-based editor panels, ensuring they integrate seamlessly with the engine's dependency injection architecture, UI styling standards, and editor layer system. It prevents inconsistent panel implementations and accelerates development by leveraging existing UI infrastructure.

Core Features & Use Cases

  • Interface-Based Design: Define panel interfaces (IMyNewPanel) for testability and DI.
  • DI Integration: Properly register panel implementations in the DryIoc container and inject them into the EditorLayer.
  • Menu Bar Setup: Integrate new panels into the editor's "Window" menu for easy access and toggle functionality.
  • UI Infrastructure Enforcement: Mandates the use of UI Drawers and UI Elements for all panel UI, ensuring visual consistency.
  • Use Case: To add a new ParticleEditorPanel for visual particle system creation, this Skill guides you through defining its interface, implementing its class with injected dependencies, adding it to the editor's menu, and ensuring all its UI elements (buttons, sliders, drop targets) use the standardized UI infrastructure.

Quick Start

Guide me through creating a new IMyNewPanel interface and its MyNewPanel implementation, including DI registration and menu bar integration.

Frequently Asked Questions about editor-panel-creation

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

FAQPage Schema
How do I create a new editor panel in ImGui with dependency injection?▼

Create an editor panel by defining an interface (IMyNewPanel), implementing it with injected dependencies, registering it in the DryIoc container, and injecting it into EditorLayer. Use UI Drawers and UI Elements for all UI components to ensure consistency with editor styling standards.

What's the workflow for adding a custom panel to the editor's Window menu?▼

Implement your panel class, register it in the dependency injection container, then integrate it into the EditorLayer's menu bar setup. This enables toggle functionality and seamless access from the Window menu while maintaining lifecycle management.

Do I need to use UI Drawers and UI Elements instead of manual ImGui code?▼

Yes. The editor panel workflow requires UI Drawers and UI Elements for all panel UI to enforce visual consistency, follow EditorUIConstants for sizing and styling, and integrate properly with the editor's UI infrastructure and dependency injection system.

Can I create editor panels without following the dependency injection pattern?▼

No. The dependency injection architecture is mandatory for editor panels. Registering in DryIoc and injecting into EditorLayer ensures lifecycle management, testability through interface-based design, and consistency across all editor tools and debugging panels.

What types of panels can I build with this workflow?▼

You can build asset browsers, debugging panels, profiling tools, workflow tools, and specialized editors like particle system editors. The workflow applies to any ImGui-based panel that requires integration with the engine's editor layer and UI infrastructure.

How does interface-based panel design improve testability?▼

Defining panel interfaces (IMyNewPanel) decouples the panel contract from its implementation, enabling dependency injection, mock substitution during testing, and cleaner separation of concerns. This pattern supports reliable unit testing and flexible panel composition.

Related Skills

Explore More Software Engineering Skills→
kateuszkateusz
13

editor-ui-infrastructure

Build editor panels using reusable ImGui drawers and EditorUIConstants.

Community
Intermediate
kateuszkateusz
13

editor-ui-drawers

Wrap ImGui calls with reusable Drawer components for consistent editor UI.

Community
Basic
wixwix
25

wix-cli-site-widget

Build Wix site widgets as web components with React and extension registration.

Official
Advanced
akiojinakiojin
32

unity-editor-imgui-design

Design Unity Editor IMGUI interfaces for EditorWindow, Custom Inspector, and Property Drawer tooling.

Community
Advanced