Codex Usage Dashboard Responsive Charts and Reduced Motion

Plan metric cards and Recharts visualizations for the Codex Usage Dashboard with responsive grids and reduced-motion support.

Install in Codex

Open the Codex Usage Dashboard workspace with its React components, Tailwind, Recharts and motion dependency.

Review `.agents/skills/usage-dashboard-ui/SKILL.md` and its requirements at the pinned GitHub commit.
Create `.agents/skills/usage-dashboard-ui/` in your project and save the reviewed file as `.agents/skills/usage-dashboard-ui/SKILL.md`.
Start Codex from that project's root, then type `$usage-dashboard-ui` and select the matching skill.

Example task

Outline a usage panel layout for this viewport and preference.
{"viewportPx":375,"cards":3,"metric":42,"reducedMotion":true,"chart":"weekly usage"}

What to check

Propose `375px: one column`. Display `42` immediately, keep the weekly usage chart, and disable count-up and line-drawing animations.

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

Frequently asked question

How should chart content behave with reduced motion?

Render the final series and keep data tooltips. Enable animation only when the motion preference allows it.

Related skills from this repository