docyrus-dashboard-design
Installation
SKILL.md
Docyrus Dashboard Design
Build dashboards, analytics, and reporting UIs for Docyrus-backed React apps with one fixed component stack. This skill is intentionally opinionated: when a dashboard surface is in scope, these three choices are mandatory, not suggestions.
| Surface | MANDATORY component | Library | Install |
|---|---|---|---|
| Every chart / data-viz | Bklit charts (LineChart, BarChart, AreaChart, PieChart, RingChart, GaugeChart, …) |
Bklit UI (@bklit registry) |
npx shadcn@latest add @bklit/<slug> |
| Every dashboard card / panel | AwesomeCard (+ AwesomeCardHeader / Body / Value / Trend) |
docyrus-ui | pnpm dlx @docyrus/cli add @docyrus/ui-awesome-card |
| Every stat / KPI / metric card | AwesomeStats (data-driven metric cards) |
docyrus-ui | pnpm dlx @docyrus/cli add @docyrus/ui-awesome-stats |
This overrides the default guidance in
docyrus-app-dev-react("Prefer Recharts / shadcn chart", genericCard). On dashboard/analytics/reporting work, do not reach for Recharts, the shadcnchartprimitive, raw<Card>, or hand-rolled stat tiles. Use the stack above.
The One Rule
Do not invent dashboard primitives. Charts come from Bklit, cards come from AwesomeCard, stat tiles come from AwesomeStats. If a need seems unmet, read the component's docs first — it is almost always already supported via props.