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 skills add clubpay/ronykit --skill ux-qualitygit 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/ux-quality)<a href="https://agentmods.dev/skills/clubpay/ronykit/ux-quality"><img src="https://agentmods.dev/badge/skills/clubpay/ronykit/ux-quality.svg" alt="Measured on agentmods" height="20"></a>- NVIDIA SkillSpector pass
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.00080 | $0.02460 |
| Opus 5 | $0.00040 | $0.01230 |
| Sonnet 5 | $0.00016 | $0.00492 |
| Haiku 4.5 | $0.00008 | $0.00246 |
Grade A, and why
ux-quality 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 8d 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 — 201 lines — stays where its author put it; the contents beside it link to each section on GitHub.
UX Quality
This is the usability layer beneath the visual layer. frontend-design
decides how a UI looks and dashboard-ui decides how data is laid out — this
skill decides whether the result is actually operable: reachable by
keyboard, legible to a screen reader, clear in every state, and forgiving of
mistakes. Most "this feels unprofessional / janky" feedback traces to a gap
here, not to the palette.
Pair with shadcn and nextjs-modern for implementation; cross-reference
frontend-design (look), dashboard-ui (data density), and react-performance
(runtime perf) instead of duplicating them.
When to use
- Building or reviewing forms, modals, menus, tables, multi-step flows, or any interactive component.
- An audit pass: "is this accessible / keyboard-navigable / usable on mobile?"
- Debugging the "looks fine but feels off" class — missing states, no focus ring, layout-shifting press, errors with no recovery path.
- Designing empty / loading / error states for any data surface.
Priority order
Fix top-down — the first two categories are correctness, not polish.
| # | Category | Severity |
|---|---|---|
| 1 | Accessibility | CRITICAL |
| 2 | Interaction & touch | CRITICAL |
| 3 | Forms & feedback | HIGH |
| 4 | Navigation | HIGH |
| 5 | Motion | MEDIUM |
1. Accessibility (CRITICAL)
The floor, not an enhancement. Verify with a keyboard and a screen reader, not by eye.
- Contrast ≥ 4.5:1 for body text (3:1 for large text and meaningful UI glyphs); check light and dark independently — don't assume one transfers.
- Visible focus on every interactive element (2–4px ring); never remove the outline without replacing it. Tab order must match visual order.
- Full keyboard operability — everything clickable is reachable and triggerable by keyboard; no mouse-only or hover-only actions.
- Name every control — icon-only buttons get an
aria-label; inputs get a real<label>; meaningful images get descriptivealt(decorative →alt=""). - Semantic HTML — real
<button>/<a>/<nav>/<h1–h6>; sequential headings, no level skips. Don't rebuild native controls from<div>s. - Color is never the only signal — pair status color with an icon, label, or shape (red border and an error message).
prefers-reduced-motionrespected; support browser zoom / text scaling without clipping or overlap (never disable zoom in the viewport meta).- Live regions — announce async results (
aria-live="polite", orrole="alert"for errors); don't let toasts steal focus.
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.
- 8d ago First seen · 201 lines · 80 tokens per session scan A 0c5f7df2356a
ux-quality is a skill published in the GitHub repository clubpay/ronykit (38 stars, last pushed today), licensed BSD-3-Clause. It adds 80 tokens to every session and 2,460 once invoked, about $0.0004 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
create-remotion-geist
Create Remotion videos using the Geist design system aesthetic. Use when asked to create videos, animations, or motion graphics that should follow Vercel's visual style - dark theme, spring animations, Geist typography, and the Geist color palette.
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…
a2ui-rendering
Use when an agent renders rich UI back to a client surface (cards, dashboards, forms, modals) using the A2UI v0.8.0 declarative protocol. Required whenever the response should display structured components rather than plain text, or whenever the validateandemita2ui tool is in scope.
principle-product-design
UX and product design principles — Nielsen's 10 usability heuristics, visual hierarchy, interaction design patterns, design-system compliance, and responsive layout. Accessibility/WCAG conformance is delegated to swe-workbench:principle-accessibility. Auto-load when reviewing UX, evaluating usability, assessing visual…
principle-accessibility
Accessibility (a11y) principles — WCAG 2.2 AA conformance, semantic HTML, keyboard navigation, focus management, focus traps, color contrast, alt text, screen reader compatibility, reduced motion. Auto-load when reviewing frontend or UI code, evaluating ARIA usage, auditing color contrast, building modals or dialogs…
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.