Claude Code ordinus-ui-system for task status panels

Build React UI under the Ordinus design rules, putting work status and the next action ahead of secondary details.

Install in Claude Code

Open Ordinus in Claude Code with the pinned project’s DESIGN.md, AGENTS.md, and frontend environment.

Review `.claude/skills/ordinus-ui-system/SKILL.md` and its requirements at the pinned GitHub commit.
Create `.claude/skills/ordinus-ui-system/` in your project and save the reviewed file as `.claude/skills/ordinus-ui-system/SKILL.md`.
Start Claude Code from that project's root, then select `/ordinus-ui-system` in the slash menu.

Example task

In ui-18, an export task is waiting for approval. The input is {status: 'blocked', reason: 'Waiting for approval', action: 'Review changes'}. It must fit a narrow layout.

What to check

Show {status: 'blocked', action: 'Review changes'} with the existing status UI. Put the action before details and check that the narrow layout has no horizontal overflow.

Original SKILL.md on GitHub · Updated 2026-11-14

Frequently asked question

When should I create a new status component?

Choose existing components and language from DESIGN.md first. Extend the component set when a reusable interaction or new meaning calls for it.