build-ui
Originally fromdcl-regenesislabs/opendcl
Installation
SKILL.md
Building UI with React-ECS
Decentraland SDK7 draws 2D overlays with a React-like JSX system (@dcl/sdk/react-ecs). There are two ways to write that code, and the editable way is the default:
| Mode | What it is | When |
|---|---|---|
| Editable (default) | React-ECS written to the contract the Creator Hub's 2D UI editor (UI Designer) can parse, render on a canvas and write back: one src/ui/<Component>.tsx per component, state/props bindings, useInteraction layers, @ui-action handlers, animation in a driver outside src/ui/ |
Every HUD, menu, dialog, toast, notification, scoreboard, settings panel, health bar, timer, slider — anything a designer may later restyle without touching code |
| Coded (corner case) | Free-form React-ECS: .map() over data, conditional subtrees, computed styles, helper components, any file layout |
Only when the UI is inherently data-driven or dynamic in a way the contract cannot express — see Choosing the mode. Details: {baseDir}/references/coded-ui.md |
Both are ordinary React-ECS and run anywhere; the editable contract is a subset. Do not ask the user which mode they want: pick editable unless the UI hits a coded-only trigger, and say so when it does.