com um clique
ui-design
// Use this skill when designing, creating, or polishing UI/screens/HUDs/menus so the result is visually refined, coherent, responsive, and implemented with the correct Dora UI APIs.
// Use this skill when designing, creating, or polishing UI/screens/HUDs/menus so the result is visually refined, coherent, responsive, and implemented with the correct Dora UI APIs.
Dora SSR coding rules for game/workspace projects; prevents browser DOM/Canvas/Node.js code in Dora engine scripts and forces Dora API lookup before using unfamiliar engine APIs.
Agent memory files with grep-based scoped recall.
Guide the agent to create a new project skill with correct placement, required metadata, and a practical SKILL.md template.
| name | ui-design |
| description | Use this skill when designing, creating, or polishing UI/screens/HUDs/menus so the result is visually refined, coherent, responsive, and implemented with the correct Dora UI APIs. |
Use this skill when the user asks for UI, interface, screen, HUD, menu, panel, dashboard, visual polish, or "make it look good" work.
Code runs in Dora engine. Use Dora, DoraX, ImGui, or Dora UI APIs. Do not use DOM/browser APIs.
Before editing, form a small design brief:
Then implement from structure to detail:
4/8/12/16/24/32.View.size or a known container.When building UI inside a Dora game/workspace:
dora-engine-coding skill first..tsx with DoraX when JSX layout is useful; otherwise use Dora nodes directly.search_dora_api before unfamiliar Dora UI APIs.Director.ui, Director.entry, or the existing root) based on project conventions.View.size to position and scale HUD elements; support resizing where possible.init.ts when the UI has multiple sections.document, window, DOM events, HTML canvas, CSS files, npm UI libraries.| Component | Use Case |
|---|---|
Node | Base class for all UI elements, handles transform, touch, keyboard events |
Sprite | Image/texture rendering with effects, blend modes |
Label | Text rendering with SDF outline, alignment, batching |
Menu | Touch event management for child nodes |
AlignNode | Flexbox-like layout (flexDirection, justifyContent, alignItems, padding, margin, gap) |
DrawNode | Custom drawing: dots, lines, polygons, rectangles |
ClipNode | Stencil-based clipping for scrollable areas |
| Control | Description |
|---|---|
Button | Parametric button with text, size, font |
CircleButton | Circular button variant |
ScrollArea | Scrollable container |
FixedLabel | Fixed-size label |
| Root | Purpose |
|---|---|
Director.entry | Root node for game scene |
Director.ui | Root node for 2D UI elements |
Director.ui3D | Root node for 3D-projected UI |
Use .tsx files with DoraX for declarative UI:
// Intrinsic elements
<node>, <sprite>, <label>, <menu>, <align-node>
<draw-node>, <clip-node>, <grid>, <particle>, <tile-node>
// Actions
<move>, <opacity>, <scale>, <sequence>, <spawn>, <loop>
For debug/development UI, use ImGui:
For custom vector graphics:
Suggested module split for larger Dora UI:
init.ts # entry wiring only
src/ui/theme.ts # colors, spacing, fonts, helper constants
src/ui/components.tsx # buttons/cards/badges/common widgets
src/ui/MainScreen.tsx # composed screen/HUD
Before finishing, verify:
Briefly state: