{"id":"7f8a831b-a68a-4f21-b51c-cfb06c9e36af","shortId":"xXfubL","kind":"skill","title":"ue5-ui-umg-slate","tagline":"UE5.6/UE5.7 UI development workflow using UMG and Slate integration. Use when requests involve Widget Blueprint setup, Slate host widgets, lifecycle binding, input and focus handling, tooltip behavior, or viewport clamping logic.","description":"# Quick Start\n- Identify whether feature belongs to UMG, Slate, or hybrid bridge.\n- Define data source component/subsystem and UI binding point.\n- Output widget tree intent and runtime binding sequence.\n\n# UE5.7 API Anchors\n- UMG lifecycle and viewport anchors:\n  - `UUserWidget::NativeConstruct()`, `UUserWidget::NativeDestruct()`\n  - `UUserWidget::AddToViewport(...)`\n  - `UWidget::RemoveFromParent()`\n  - `UWidget::SetVisibility(...)`\n  - `UWidget::SetKeyboardFocus()`\n- UMG input mode anchors:\n  - `UWidgetBlueprintLibrary::SetInputMode_UIOnlyEx(...)`\n  - `UWidgetBlueprintLibrary::SetInputMode_GameAndUIEx(...)`\n  - `UWidgetBlueprintLibrary::SetInputMode_GameOnly(...)`\n- UMG/Slate bridge anchors:\n  - `UWidget::TakeWidget()` for Slate bridge hand-off\n  - `SCompoundWidget`, `SLATE_BEGIN_ARGS(...)`\n  - `FSlateApplication::SetKeyboardFocus(...)`, `SetUserFocus(...)`\n- Viewport geometry anchor:\n  - `UGameViewportClient::GetViewportSize(...)`\n\n# UI Stage Contract\n- Every UI task must define:\n  - UI layer ownership (UMG-only, Slate-only, or hybrid bridge)\n  - data source and update trigger (pull, push, event, or mixed)\n  - focus and input ownership transition\n  - viewport-safe placement behavior for tooltip/popup\n  - teardown/cleanup path for unbinds and widget removal\n- If any item is missing, the UI implementation is incomplete.\n\n# Workflow\n## 1) UI Architecture Decision\n- Select UMG for standard game HUD/menu work.\n- Select Slate for custom rendering/input behavior that UMG cannot express cleanly.\n- Select hybrid when a `UWidget` host needs to embed custom Slate content.\n\n## 2) Construct and Lifetime\n- Initialize widget bindings in construct/init path.\n- Register event listeners once and store handles when required.\n- Define destruct/unregister logic explicitly to avoid stale bindings.\n\n## 3) Data Binding and Refresh\n- Bind runtime data from one authoritative source (subsystem/component/view model).\n- Use event-driven refresh for high-frequency data where possible.\n- Keep display widgets read-only for gameplay state mutation.\n\n## 4) Input and Focus Ownership\n- Set input mode deliberately when opening/closing UI contexts.\n- Set keyboard/user focus to intended root widget.\n- Ensure focus return path back to gameplay on close.\n\n## 5) Tooltip/Popup Viewport Clamp\n- Compute desired tooltip position from anchor and cursor/widget geometry.\n- Clamp final placement to viewport bounds to avoid off-screen rendering.\n- Debounce high-frequency hover updates to avoid flicker.\n\n## 6) Remove and Cleanup\n- Remove widget from parent or viewport on close.\n- Clear timers/delegates and transient references.\n- Confirm no duplicate instances persist after reopen.\n\n# Constraints\n- Keep UI rendering and gameplay state mutation separated.\n- Avoid direct gameplay writes from passive display widgets.\n- Clamp tooltip and popup placement to viewport bounds.\n- Prefer deterministic input ownership and focus transitions.\n- Keep Slate-only code isolated behind clear bridge boundaries.\n- Do not rely on per-frame polling if event-driven updates are available.\n\n# Failure Handling\n- Symptom: widget appears but never refreshes.\n  - Locate: construct timing, binding registration, source event firing.\n  - Fix: bind after source readiness and verify event subscription path.\n- Symptom: widget refreshes once then stops.\n  - Locate: lost delegate handle or widget recreated without rebind.\n  - Fix: rebind on construct and unbind on destruct; prevent duplicate create/destroy churn.\n- Symptom: input is swallowed by UI unexpectedly.\n  - Locate: current input mode and focused widget path.\n  - Fix: enforce intended input mode and set explicit focus target.\n- Symptom: keyboard/controller navigation breaks after popup open.\n  - Locate: focus transfer and return path.\n  - Fix: store previous focus owner and restore on popup close.\n- Symptom: tooltip flickers near screen edges.\n  - Locate: oscillating clamp output and hover source jitter.\n  - Fix: debounce hover updates and clamp with stable viewport metrics.\n- Symptom: memory growth after repeated open/close.\n  - Locate: stale delegate/timer/reference retention.\n  - Fix: clear bindings and transient refs in teardown.\n\n# UE5.6 / UE5.7 Compatibility Notes\n- UMG lifecycle, input mode, and Slate focus APIs listed above are stable in UE5.6/UE5.7.\n- Prefer Enhanced Input + explicit UI input mode ownership in both versions.\n\n# Escalation\n- Escalate when behavior requires engine-level Slate customization beyond project scope.\n- Escalate when UI architecture conflicts with existing CommonUI framework decisions.","tags":["ue5","umg","slate","unrealengine5","skills","teixasalone","aec","agent-skills","animations","blender","camera","collisions"],"capabilities":["skill","source-teixasalone","skill-ue5-ui-umg-slate","topic-aec","topic-agent-skills","topic-animations","topic-blender","topic-camera","topic-collisions","topic-computer-vision","topic-dotnet","topic-embodied-ai","topic-game-framework","topic-gaussian-splatting","topic-graphics"],"categories":["UnrealEngine5-Skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/teixasalone/UnrealEngine5-Skills/ue5-ui-umg-slate","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add teixasalone/UnrealEngine5-Skills","source_repo":"https://github.com/teixasalone/UnrealEngine5-Skills","install_from":"skills.sh"}},"qualityScore":"0.456","qualityRationale":"deterministic score 0.46 from registry signals: · indexed on github topic:agent-skills · 12 github stars · SKILL.md body (4,577 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-05-18T19:07:26.176Z","embedding":null,"createdAt":"2026-05-10T01:06:37.874Z","updatedAt":"2026-05-18T19:07:26.176Z","lastSeenAt":"2026-05-18T19:07:26.176Z","tsv":"'1':181 '2':215 '3':242 '4':278 '5':307 '6':341 'addtoviewport':78 'anchor':67,72,88,100,118,316 'api':66,576 'appear':426 'architectur':183,610 'arg':112 'authorit':252 'avail':421 'avoid':239,327,339,374 'back':302 'begin':111 'behavior':32,160,197,597 'behind':403 'belong':42 'beyond':604 'bind':26,55,63,221,241,244,247,433,439,559 'blueprint':20 'bound':325,389 'boundari':406 'break':503 'bridg':48,99,105,140,405 'cannot':200 'churn':474 'clamp':35,310,320,382,531,542 'clean':202 'cleanup':344 'clear':353,404,558 'close':306,352,522 'code':401 'commonui':614 'compat':567 'component/subsystem':52 'comput':311 'confirm':358 'conflict':611 'constraint':365 'construct':216,431,466 'construct/init':223 'content':214 'context':290 'contract':123 'create/destroy':473 'current':483 'cursor/widget':318 'custom':195,212,603 'data':50,141,243,249,265 'debounc':332,538 'decis':184,616 'defin':49,128,234 'deleg':456 'delegate/timer/reference':555 'deliber':286 'desir':312 'destruct':470 'destruct/unregister':235 'determinist':391 'develop':8 'direct':375 'display':269,380 'driven':259,418 'duplic':360,472 'edg':528 'emb':211 'enforc':491 'engin':600 'engine-level':599 'enhanc':584 'ensur':298 'escal':594,595,607 'event':148,226,258,417,436,445 'event-driven':257,416 'everi':124 'exist':613 'explicit':237,497,586 'express':201 'failur':422 'featur':41 'final':321 'fire':437 'fix':438,463,490,513,537,557 'flicker':340,525 'focus':29,151,281,293,299,395,487,498,508,516,575 'frame':413 'framework':615 'frequenc':264,335 'fslateappl':113 'game':189 'gameanduiex':94 'gameon':97 'gameplay':275,304,370,376 'geometri':117,319 'getviewports':120 'growth':549 'hand':107 'hand-off':106 'handl':30,231,423,457 'high':263,334 'high-frequ':262,333 'host':23,208 'hover':336,534,539 'hud/menu':190 'hybrid':47,139,204 'identifi':39 'implement':177 'incomplet':179 'initi':219 'input':27,86,153,279,284,392,476,484,493,571,585,588 'instanc':361 'integr':14 'intend':295,492 'intent':60 'involv':18 'isol':402 'item':172 'jitter':536 'keep':268,366,397 'keyboard/controller':501 'keyboard/user':292 'layer':130 'level':601 'lifecycl':25,69,570 'lifetim':218 'list':577 'listen':227 'locat':430,454,482,507,529,553 'logic':36,236 'lost':455 'memori':548 'metric':546 'miss':174 'mix':150 'mode':87,285,485,494,572,589 'model':255 'must':127 'mutat':277,372 'nativeconstruct':74 'nativedestruct':76 'navig':502 'near':526 'need':209 'never':428 'note':568 'off-screen':328 'one':251 'open':506 'open/close':552 'opening/closing':288 'oscil':530 'output':57,532 'owner':517 'ownership':131,154,282,393,590 'parent':348 'passiv':379 'path':164,224,301,447,489,512 'per':412 'per-fram':411 'persist':362 'placement':159,322,386 'point':56 'poll':414 'popup':385,505,521 'posit':314 'possibl':267 'prefer':390,583 'prevent':471 'previous':515 'project':605 'pull':146 'push':147 'quick':37 'read':272 'read-on':271 'readi':442 'rebind':462,464 'recreat':460 'ref':562 'refer':357 'refresh':246,260,429,450 'regist':225 'registr':434 'reli':409 'remov':169,342,345 'removefrompar':80 'render':331,368 'rendering/input':196 'reopen':364 'repeat':551 'request':17 'requir':233,598 'restor':519 'retent':556 'return':300,511 'root':296 'runtim':62,248 'safe':158 'scompoundwidget':109 'scope':606 'screen':330,527 'select':185,192,203 'separ':373 'sequenc':64 'set':283,291,496 'setinputmod':90,93,96 'setkeyboardfocus':84,114 'setup':21 'setuserfocus':115 'setvis':82 'skill' 'skill-ue5-ui-umg-slate' 'slate':5,13,22,45,104,110,136,193,213,399,574,602 'slate-on':135,398 'sourc':51,142,253,435,441,535 'source-teixasalone' 'stabl':544,580 'stage':122 'stale':240,554 'standard':188 'start':38 'state':276,371 'stop':453 'store':230,514 'subscript':446 'subsystem/component/view':254 'swallow':478 'symptom':424,448,475,500,523,547 'takewidget':102 'target':499 'task':126 'teardown':564 'teardown/cleanup':163 'time':432 'timers/delegates':354 'tooltip':31,313,383,524 'tooltip/popup':162,308 'topic-aec' 'topic-agent-skills' 'topic-animations' 'topic-blender' 'topic-camera' 'topic-collisions' 'topic-computer-vision' 'topic-dotnet' 'topic-embodied-ai' 'topic-game-framework' 'topic-gaussian-splatting' 'topic-graphics' 'transfer':509 'transient':356,561 'transit':155,396 'tree':59 'trigger':145 'ue5':2 'ue5-ui-umg-slate':1 'ue5.6':565 'ue5.6/ue5.7':6,582 'ue5.7':65,566 'ugameviewportcli':119 'ui':3,7,54,121,125,129,176,182,289,367,480,587,609 'uionlyex':91 'umg':4,11,44,68,85,133,186,199,569 'umg-on':132 'umg/slate':98 'unbind':166,468 'unexpect':481 'updat':144,337,419,540 'use':10,15,256 'uuserwidget':73,75,77 'uwidget':79,81,83,101,207 'uwidgetblueprintlibrari':89,92,95 'verifi':444 'version':593 'viewport':34,71,116,157,309,324,350,388,545 'viewport-saf':156 'whether':40 'widget':19,24,58,168,220,270,297,346,381,425,449,459,488 'without':461 'work':191 'workflow':9,180 'write':377","prices":[{"id":"5b059914-2022-4a56-b517-c48824e6a42c","listingId":"7f8a831b-a68a-4f21-b51c-cfb06c9e36af","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"teixasalone","category":"UnrealEngine5-Skills","install_from":"skills.sh"},"createdAt":"2026-05-10T01:06:37.874Z"}],"sources":[{"listingId":"7f8a831b-a68a-4f21-b51c-cfb06c9e36af","source":"github","sourceId":"teixasalone/UnrealEngine5-Skills/ue5-ui-umg-slate","sourceUrl":"https://github.com/teixasalone/UnrealEngine5-Skills/tree/main/skills/ue5-ui-umg-slate","isPrimary":false,"firstSeenAt":"2026-05-10T01:06:37.874Z","lastSeenAt":"2026-05-18T19:07:26.176Z"}],"details":{"listingId":"7f8a831b-a68a-4f21-b51c-cfb06c9e36af","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"teixasalone","slug":"ue5-ui-umg-slate","github":{"repo":"teixasalone/UnrealEngine5-Skills","stars":12,"topics":["2d","aec","agent-skills","animations","blender","camera","collisions","computer-vision","dotnet","embodied-ai","game-framework","gaussian-splatting","graphics","machine-learning","ue4-program","unreal-engine","virtual-worlds","webgl","webgl2","webxr"],"license":"mit","html_url":"https://github.com/teixasalone/UnrealEngine5-Skills","pushed_at":"2026-05-18T15:42:31Z","description":"Provide reusable workflows for Unreal Engine 5.6/5.7 to simplify Blueprint, C++, UI, PCG, replication, debugging, and performance tasks.","skill_md_sha":"058ebb9cc7ba5be4f9ea327b21c650befb006dfb","skill_md_path":"skills/ue5-ui-umg-slate/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/teixasalone/UnrealEngine5-Skills/tree/main/skills/ue5-ui-umg-slate"},"layout":"multi","source":"github","category":"UnrealEngine5-Skills","frontmatter":{"name":"ue5-ui-umg-slate","description":"UE5.6/UE5.7 UI development workflow using UMG and Slate integration. Use when requests involve Widget Blueprint setup, Slate host widgets, lifecycle binding, input and focus handling, tooltip behavior, or viewport clamping logic."},"skills_sh_url":"https://skills.sh/teixasalone/UnrealEngine5-Skills/ue5-ui-umg-slate"},"updatedAt":"2026-05-18T19:07:26.176Z"}}