skills.rest
ansonj-dev
ansonj-devCOMMUNITY
Explore all skills by this author →
Website𝕏@AnsonJo96106714GitHub

build-ui

Build 2D screen-space UI for Decentraland SDK7 scenes using React-ECS JSX components.

Updated Sep 11, 2026
Search Tags:#ui#jsx#hud#decentraland#sdk7#react-ecs#game interface
One-click install
npx skills add https://github.com/ansonj-dev/neon-reverse --skill build-ui-ansonj-dev
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: build-ui
Source: https://github.com/ansonj-dev/neon-reverse/tree/main/agent/skills/build-ui
Command: npx skills add https://github.com/ansonj-dev/neon-reverse --skill build-ui-ansonj-dev

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @dcl/sdk, @dcl/react-ecs, and includes references (resource) components.

What problem does it solve? Creating HUDs, menus, dialogs, and form inputs in Decentraland SDK7 requires navigating React-ECS quirks like version-gated virtual screen behavior, engine-dependent text sizing, and pointer-blocking pitfalls that silently break UI across explorers. ## Core Features & Use Cases - Component guidance: Correct usage of UiEntity, Label, Button, Input, and Dropdown with verified props, layout patterns, and state management via module-level variables instead of React hooks. - Version-aware rules: SDK 7.26.0 gate covering virtual screen defaults, screenInset options, and UI scale factor changes so generated code behaves consistently across SDK versions and platforms. - Widget recipes: Reference implementations for health bars, modal dialogs, scrollable containers, inventory grids, timed announcements, and drag sliders built from primitives. - Use Case: A developer building a mobile-first multiplayer scene needs a HUD with a score label, a proximity warning, and a settings menu; the Skill provides the canonical setupUi() wiring, safe-area handling, and troubleshooting table to avoid the most common rendering failures. ## Quick Start Ask the AI to build a Decentraland scene UI with a HUD and a menu button using React-ECS, and it will generate the ui.tsx component wired through setupUi() with the correct virtual screen settings.

Frequently Asked Questions about build-ui

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

FAQPage Schema
How do I create a UI in a Decentraland SDK7 scene?▼

Create a src/ui.tsx file with a React-ECS component using UiEntity, Label, and Button, then call ReactEcsRenderer.setUiRenderer from a setupUi() function invoked in main(). Pass { virtualWidth: 1920, virtualHeight: 1080 } so layout scales consistently across displays.

How do I build a drag slider in Decentraland React-ECS?▼

UI event handlers receive no pointer coordinates, so start a drag with onMouseDown on the track and accumulate PrimaryPointerInfo.screenDelta.x in a system, divided by the UI scale factor. Render a full-screen pointer-blocking overlay only while dragging to catch the release.

Why is my Decentraland UI not rendering on screen?▼

The most common cause is a missing setupUi() call in main() or a missing setUiRenderer call inside it. Also check that the root UiEntity has width and height of 100%, that only one setUiRenderer call exists, and that the file uses the .tsx extension.

Does Decentraland UI behave differently on mobile versus desktop?▼

Yes. On SDK 7.26.0+, mobile defaults to a 1600x720 virtual screen and 16:9 sizes are overridden, while screenInset defaults to the device safe area. Drag sliders do not work on mobile because screenDelta is always zero, so pair them with stepper buttons.

Why do my UI labels overlap on the Unity explorer but look fine elsewhere?▼

Text intrinsic sizing is engine-dependent: the Bevy explorer measures rendered text while the Unity explorer gives unset dimensions zero layout contribution. Give every Label an explicit width and height in uiTransform, with height sized for the wrapped line count.

Can I use React hooks like useState in Decentraland scene UI?▼

No, React hooks are not available in the React-ECS renderer. Use module-level variables for state and export functions to update them from game logic; the UI re-renders every frame so changes appear immediately.

Related Skills

Explore More Software Engineering Skills→
dcl-regenesislabsdcl-regenesislabs

create-scene

Scaffold a new Decentraland SDK7 scene project with configuration files.

Official
Intermediate
dcl-regenesislabsdcl-regenesislabs

build-ui

Build 2D user interfaces for Decentraland scenes using React-ECS and JSX.

Official
Intermediate
decentralanddecentraland
3

advanced-rendering

Add billboards, 3D text, and PBR materials to Decentraland scenes.

Official
Advanced
matiaconematiacone

react-flow

Build interactive node-based UIs with React Flow.

Community
Advanced