Structs UI

Structs UI: dashboards, forms, and HUDs

You are being asked to build something, not to play. This skill routes you to the reference material for making an interface that looks like Structs and a client that behaves like one.

Everything below is verified against structs-webapp, the flagship client — not inferred from the API surface. When a doc and that codebase disagree, the codebase wins.

Not this skill? If you want to build structs — the in-game machines — that is structs-building. If you want to use the Desktop MCP tools, that is TOOLS.md.

When to use it

• Building a dashboard, form, menu, HUD, or companion app for Structs.
• Styling anything so it reads as part of the Structs universe.
• Writing client code that signs transactions, computes proof-of-work, or listens to GRASS.
• Extending Structs Desktop with a new MCP tool or board page.

Decide these first

Five rules that make it look like Structs

1. Nothing is rounded. Hard edges, 1–2px borders, border-radius: 0.
2. Emphasis is colour and case, never weight. Font weight is 500 everywhere.
3. Chrome is uppercase 8px ExtremeHazard; content is 16px DirectiveZero.
4. Colour comes from tokens and is semantic. Teal is you, red is the enemy, amber is warning, gold is third parties. Never a hex literal.
5. Density over whitespace. This is an operations console, not a landing page.

And one that saves an hour: never invent an icon. There are 67 glyph icons and 29 sprite icons. If the concept has no glyph, use a text label — no emoji, no inline SVG.

Where to go

Interface — develop/ui/

Client — develop/client/

Context — repos (which repository to read, and which wins) · frontend-architecture (the webapp's MVVM layer) · maintenance (how these pages stay true)

Traps, in the order you will hit them

• Assets don't resolve. Icons and form art vanish with no console error. Check document.fonts.check('16px Structicons') first, always.
• Everything is centred. body { text-align: center } is inherited by everything; only eleven rules re-assert left. Left-align data surfaces explicitly.
• A flex item won't shrink. min-width: auto is the default. word-break does nothing about it — you need min-width: 0.
• Alert severity colours the icon but not the text. The text hard-sets --text-body. Four CSS rules fix it; they are in sui-patch.css.
• Copy the typos. --from-input-height-content and sui-message-system-model-frame-center are the real names.
• Two transactions at once gives account sequence mismatch. Serialise — one in flight, one per block. Don't track sequence numbers.
• Charge gates actions. currentBlock - (lastActionBlock + 1). Hold the queue until the confirmed last-action height has loaded, or the client will think it has infinite charge and empty its queue into one block.
• Proof-of-work is cheaper if you wait. Difficulty decays with anchor age. Initiate early, complete later.
• Numbers arrive as strings. Normalise once at the boundary. The reference client is inconsistent about this; don't copy that part.

Before you call it done

• Every colour from a token, every icon from the real inventories
• Form controls unclassed inside label.sui-input-text; checkbox container is a ``
• tabular-nums on numeric cells, min-width: 0 on flex items with long text
• Empty, loading and error states share one component and look different from each other
• Sweep for overflow at your narrowest width — jsdom won't catch it, only a browser will
• Keyboard focus is visible somewhere (SUI removes the default and adds nothing back)
• Transaction failures reach the operator — the reference client's settled event has no listeners, so failures are silent by default

Full checklist: ui/patterns.