build-ui

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

Updated Feb 26, 2026
One-click install
npx skills add https://github.com/dcl-regenesislabs/dcl-catalog --skill build-ui
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: build-ui
Source: https://github.com/dcl-regenesislabs/dcl-catalog/tree/main/.agents/skills/build-ui
Command: npx skills add https://github.com/dcl-regenesislabs/dcl-catalog --skill build-ui

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill simplifies the creation of dynamic and interactive 2D user interfaces within Decentraland scenes, enabling developers to build rich user experiences like HUDs, menus, and in-game displays.

Core Features & Use Cases

  • React-ECS UI Development: Build UIs using a familiar JSX syntax with the Decentraland SDK's React-ECS.
  • Component Library: Utilize pre-built UI components such as Labels, Buttons, Inputs, and Dropdowns.
  • State Management: Implement UI state using module-level variables for dynamic updates.
  • Use Case: Develop a game's heads-up display (HUD) showing player health, score, and a mini-map, or create an in-world shop menu with item listings and purchase buttons.

Quick Start

Use the build-ui skill to create a simple 'Hello Decentraland!' label in the center of the screen.

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 2D UI for a Decentraland scene using React-ECS?

To create a 2D UI for a Decentraland scene using React-ECS, this Skill lets you build interactive elements like HUDs and menus through declarative JSX syntax. It supports pre-built components such as Labels, Buttons, and Inputs for rendering.

What is the best way to build a Decentraland HUD with player health and score?

The best way to build a Decentraland HUD displaying player health and score is using React-ECS declarative JSX syntax. You can implement dynamic UI state updates by managing module-level variables within your SDK7 scene.

Can I use pre-built UI components like Buttons and Dropdowns in Decentraland SDK7?

Yes, you can use pre-built UI components like Buttons and Dropdowns in Decentraland SDK7. This Skill provides a component library that includes Labels, Inputs, and interactive elements for developing rich in-world shop menus and displays.

How does state management work for dynamic UI updates in Decentraland React-ECS?

State management for dynamic UI updates in Decentraland React-ECS works by implementing module-level variables. This approach allows your interactive 2D elements, such as menus and HUDs, to reflect changing game data seamlessly.

Do I need to follow specific SDK7 principles to render 2D menus in Decentraland?

Yes, you need to adhere to SDK7's React-ECS principles for UI rendering and state management. This Skill simplifies the process by enabling JSX syntax to build interactive 2D user interfaces, dialogs, and in-game displays.