Claude Code ordinus-ui-system：设计任务状态和窄屏布局
EnglishClaude Code 安装步骤
- 打开 GitHub 固定提交的 `.claude/skills/ordinus-ui-system/SKILL.md`，核对内容与使用条件。
- 在自己的项目中创建 `.claude/skills/ordinus-ui-system/`，把核对后的文件保存为 `.claude/skills/ordinus-ui-system/SKILL.md`。
- 在该项目根目录启动 Claude Code，在斜杠菜单中选择 `/ordinus-ui-system`。
中文摘要
按 Ordinus 的视觉规范实现 React 界面，在状态面板中优先展示工作状态和下一步操作。
SKILL.md 中文导读
可复现示例
界面 ui-18 有一个等待确认的导出任务。输入状态为 {status: 'blocked', reason: 'Waiting for approval', action: 'Review changes'}，需要兼顾窄布局。工作步骤
- 读设计规范，确认用户要先知道的状态和能采取的操作。
- 复用组件并复核窄布局，按照项目方式完成构建检查。
验收方法
用现有状态组件显示 {status: 'blocked', action: 'Review changes'}，让主要操作在详情前可见，并实测窄布局不横向溢出。
GitHub 原文 · 更新日期
适用环境
在 Claude Code 中打开 Ordinus 工作区，并准备固定版本已有的 DESIGN.md、AGENTS.md 和前端运行环境。
常见问题
什么时候新建状态组件？
先根据 DESIGN.md 选已有组件和词汇。明确需要复用的新交互或有不同语义时，才需要扩展现有组件集。