dashboard-kitlisted

# Dashboard kit A reusable design-system kit distilled from a working Claude Code activity dashboard (Vite + React + TypeScript + Tailwind + shadcn/ui + Tremor + Recharts + TanStack Table). Original repo: [nickheise/time-spent](https://github.com/nickheise/time-spent) — `docs/DASHBOARD_STYLE_GUIDE.md` there has the full narrative writeup this kit was extracted from. This skill directory is **standalone** — it doesn't live inside any one project, so it's available to copy from in any future thread. ## How to use this skill **Read `BUILD-PLAYBOOK.md` first** — it is the agent entry point and contains install steps, file-copy order, and the layout/typography/chart rules. `DESIGN.md` is the full reference; the playbook tells you when to consult it. ### Files in this skill directory | File / dir | Purpose | |---|---| | `BUILD-PLAYBOOK.md` | Agent instructions: install order, what to copy, build order. **Start here.** | | `DESIGN.md` | Full token + pattern reference: colors, type scale, layout grids, chart conventions, interactive controls. | | `tailwind-theme.cjs` | Drop-in `theme.extend` + `safelist` for `tailwind.config.cjs`. | | `globals.css` | CSS var definitions (dark-by-default + light override) + base styles. | | `lib/utils.ts` | `cn()` — the clsx + tailwind-merge helper nearly every component needs. | | `lib/palette.ts` | `colorFor()` / `seedColors()` — deterministic per-entity categorical color assignment. | | `components/ui/card.tsx`, `badge.tsx`, `tabs.tsx` | shad