Codex 用量看板界面｜规划移动端图表与减少动态效果
EnglishCodex 安装步骤
- 打开 GitHub 固定提交的 `.agents/skills/usage-dashboard-ui/SKILL.md`，核对内容与使用条件。
- 在自己的项目中创建 `.agents/skills/usage-dashboard-ui/`，把核对后的文件保存为 `.agents/skills/usage-dashboard-ui/SKILL.md`。
- 在该项目根目录启动 Codex，输入 `$usage-dashboard-ui` 并选择同名技能。
中文摘要
按 Codex Usage Dashboard 的前端约定规划指标卡片和 Recharts 图表，兼顾响应式布局与系统减少动态效果设置。
SKILL.md 中文导读
可复现示例
根据这组界面输入拟定用量面板布局。
{"viewportPx":375,"cards":3,"metric":42,"reducedMotion":true,"chart":"weekly usage"}工作步骤
- 检查已有指标卡片和图表布局。
- 为窄视口规划响应式数据面板，使用项目配色与图表提示样式。
- 根据减少动态效果偏好禁用入场或计数动画。
验收方法
布局建议为 `375px: one column`。指标直接显示 `42`，保留周用量图表并关闭计数和画线动画。
GitHub 原文 · 更新日期
适用环境
在 Codex 中打开 Codex Usage Dashboard。沿用项目中的 React 组件、Tailwind、Recharts 和动态效果依赖。
常见问题
保留图表时怎么处理减少动态效果？
呈现最终序列和数据提示。动画只在偏好设置允许时启用。