Common UI
UI & InteractionCommon UI plugin: input-method-agnostic UIs for keyboard/mouse, gamepad, and touch with focus management and activation layers.
/skill common-ui What This Skill Does
Common UI helps you build input-method-agnostic user interfaces that work seamlessly across keyboard/mouse, gamepad, and touch using UE5's Common UI plugin. This skill covers the framework for building console-ready UIs with proper focus management, input routing through activation layers, context-sensitive action bars that display platform-appropriate button glyphs, and tab navigation with bumper switching. Whether you are targeting PC, console, or a multi-platform release, Common UI ensures your menus and interactive panels work correctly without separate implementations for each input device.
Covers
- Common UI plugin setup and base widget classes (CommonActivatableWidget, CommonButtonBase)
- Input routing: directing input to the correct UI layer via the activation stack
- Activatable widget lifecycle: activation, deactivation, and focus management
- Bound Action Bar: context-sensitive action prompts (Press A to Confirm)
- Tab List and Carousel: tabbed navigation with bumper/trigger switching
- Gamepad navigation: D-pad and stick focus movement through UI elements
- Platform-aware input icons: displaying correct button glyphs per device
- Automatic input device detection and seamless mode switching
Does Not Cover
- Basic UMG widget creation and layout → UMG Widget Basics
- Slate C++ UI framework → Slate UI (future skill)
- Enhanced Input configuration → Enhanced Input
- HUD and gameplay overlay design → UMG Widget Basics
How to Use
Invoke this skill in Claude Code:
/skill common-uiThis skill is also auto-detected when your prompt mentions Common UI, gamepad navigation, focus management, input routing, console UI, or controller-friendly interface intent. AgentUX will automatically activate Common UI when it recognizes relevant context in your request.
Key Unreal Engine Concepts
| Concept | Description |
|---|---|
UCommonActivatableWidget | A widget base class with an activation lifecycle that participates in the input routing stack and manages focus automatically. |
UCommonButtonBase | A gamepad-friendly button with focus states, input action binding, and automatic platform glyph display. |
UCommonBoundActionBar | A widget that displays context-sensitive action prompts that change based on the active widget and input device. |
UCommonTabListWidgetBase | A tab group widget that supports bumper/trigger switching between tabbed content panels. |
Activation Stack | The stack of active widgets managed by Common UI where only the topmost widget receives input focus. |
UCommonInputActionDataTable | A data table mapping input actions to platform-specific button glyph textures for automatic icon display. |
Related Skills
umg-widget-basics
Core UMG widget creation, layout, and data binding fundamentals
enhanced-input
Enhanced Input System for defining input actions and mappings
blueprint-basics
Blueprint scripting for widget event handling and UI logic
data-tables
Data Tables for input action glyph mapping configuration
What You'll Learn
- How to set up the Common UI plugin and replace standard widgets with Common UI base classes
- How to build menus that are fully navigable with gamepad, keyboard, and mouse
- How to manage input routing through the activatable widget stack
- How to display platform-appropriate button glyphs that update automatically
- How to implement tabbed navigation with bumper switching for settings menus
- How to design a console-ready UI that works across PC and gamepad without separate implementations