Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx agentmods add skills/clubpay/ronykit/dashboard-uinpx skills add clubpay/ronykit --skill dashboard-uigit clone --depth 1 https://github.com/clubpay/ronykitWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/clubpay/ronykit/dashboard-ui)<a href="https://agentmods.dev/skills/clubpay/ronykit/dashboard-ui"><img src="https://agentmods.dev/badge/skills/clubpay/ronykit/dashboard-ui.svg" alt="Measured on agentmods" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00064 | $0.02003 |
| Opus 5 | $0.00032 | $0.01001 |
| Sonnet 5 | $0.00013 | $0.00401 |
| Haiku 4.5 | $0.00006 | $0.00200 |
Grade A, and why
dashboard-ui scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 6d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 169 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Dashboard & Admin UI
A dashboard optimizes for repeated decision-making under time pressure, not persuasion. The user returns daily to extract a number, compare it to a target, and act in seconds. That means less hero typography, more data density, a stricter color system, and zero decorative motion.
The job: surface the smallest set of metrics needed to make a decision, in the order the eye scans them, with one accent color and no decorative noise.
When to use
- Building or reviewing an admin panel, back-office console, analytics overview, ops dashboard, or settings/management screen.
- Laying out a screen with KPI cards, charts, data tables, or a sidebar nav.
- Choosing a chart type, color usage, or where an element belongs on the page.
- Designing empty/loading/error states for an operational UI.
Combine with the shadcn and nextjs-modern skills for implementation — this
skill governs layout and information hierarchy; those govern the components and
data wiring.
1. One job per dashboard
Before laying anything out, write one sentence: who looks at this, and what decision do they make from it? ("The on-call engineer opens this during an incident to find which service is degraded.")
- "An overview of the business" / "all the data in one place" is not a job — it's a database with bad lighting.
- Three audiences = three dashboards. Don't serve every stakeholder from one screen; make focused screens and link between them.
2. Lead with 3–5 hero metrics
Pick the smallest set of numbers that, glanced at together, tell you whether the job is going well today. These become the top KPI strip.
- Each KPI card shows three things: the current value (large number), a delta vs. the previous comparable period (small % with a directional arrow), and an inline sparkline / trend.
- Use absolute numbers, not normalized ratios, for the hero metric when stakes
are real (
$1,248,000reads faster than "104% of target"). - Make the delta sign explicit — a green up-arrow next to "+12.5% vs last month" beats a bare "12.5%".
- A KPI card without a sparkline is just a number; the trend earns its 60px.
- Twelve cards is a wall, not a strip — walls don't get scanned. Cut to 4–6.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 6d ago First seen · 169 lines · 64 tokens per session scan A f4f6c22ade6c
dashboard-ui is a skill published in the GitHub repository clubpay/ronykit (38 stars, last pushed 5d ago), licensed BSD-3-Clause. It adds 64 tokens to every session and 2,003 once invoked, about $0.0003 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.
Other skills, from other repositories
multitenant
Multi-tenant / multitenancy patterns in Vovk.ts — hosting multiple tenants from one Next.js app via subdomain routing. Covers the multitenant() helper from vovk, the Next.js proxy.ts file that wires it up, the overrides shape (static / dynamic / nested subdomain patterns), the vovk.config.mjs changes needed (switch to…
nextjs-dashboard
Next.js 15+ App Router dashboard skill — server/client components, mobile nav, polling, data tables, skeleton states, and production-grade dashboard UX patterns.
ux/ui expert
Framework-agnostic frontend + UX/UI skill matrix covering Next.js App Router, Astro, design systems, mobile nav, accessibility, and dashboard patterns.
chakra-ui-builder
Build responsive, accessible UI components and layouts using Chakra UI v3, install or configure Chakra UI in new and existing projects, and design scalable themes using tokens, semantic tokens, recipes, and slot recipes. Use this skill whenever a user asks to build, create, or generate any UI component, page, form…
frontend-visual-qa
Audits already-rendered web, landing-page, HTML deck/slide, browser tool/game, dashboard/admin, design-system, and desktop UIs using real-browser or native-app journeys, inspected screenshots, DOM geometry, responsive or projection viewports, and a bundled Playwright sweep. Use after UI implementation to find…
animation-principles
Apply animation principles — easing, staging, follow-through — to one specific UI motion. Use when tuning how an animation feels. For product-wide duration and easing tokens use motion-system (design-systems); for a full interaction spec use micro-interaction-spec.