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 frontend-designgit 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/frontend-design)<a href="https://agentmods.dev/skills/clubpay/ronykit/frontend-design"><img src="https://agentmods.dev/badge/skills/clubpay/ronykit/frontend-design.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.00077 | $0.01878 |
| Opus 5 | $0.00039 | $0.00939 |
| Sonnet 5 | $0.00015 | $0.00376 |
| Haiku 4.5 | $0.00008 | $0.00188 |
Grade A, and why
frontend-design 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 7d 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 — 163 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Frontend Design
Bootstrap gate (read this first — enforced)
Do not run create-next-app, create vite, or write UI until:
- You have asked the user design questions (aesthetic, audience, light/dark, brand constraints, v1 screens).
- You have written
docs/design/<app>-frontend-design.mdwith a token plan and design-system rules (MCPdesign-frontend, templatearchitecture/frontend-design-template). - The user has set
status: approvedin the doc frontmatter.
Also read design-tokens and typography skills before implementing. frontend/verify.sh enforces the approved design doc.
Approach this as the design lead at a small studio: every client gets a visual identity that could not be mistaken for anyone else's. Make deliberate, opinionated choices about palette, type, and layout that are specific to this brief, and take one real aesthetic risk you can justify.
The failure mode to avoid is AI slop — the statistical center of every UI the model has seen (Inter, a purple gradient, evenly-spaced rounded cards). It looks generated, not designed. This skill pulls you off that center.
When to use
- Building or restyling a landing page, marketing site, hero, pricing page, docs home, or brand-forward product surface.
- Choosing aesthetic direction, palette, typography, layout, or motion.
- Reviewing UI that feels generic, templated, or "AI-generated".
For data-dense internal/operational UI (admin panels, KPI strips, data
tables, ops consoles) use dashboard-ui instead — that optimizes for scanning
and decisions, this optimizes for identity. Pair both with shadcn and
nextjs-modern for implementation; this skill governs the look, those govern
the components and wiring.
1. Ground it in the subject
Before designing, name the subject (what it is), the audience, and the page's single job — and state your choice if the brief left it open.
- Distinctive choices come from the subject's own world — its materials, instruments, artifacts, and vernacular. A vinyl marketplace and a tax tool should not share a mood board.
- Use any known context about the user's product or prior designs as a hint.
- Build with the brief's real content throughout — not lorem ipsum that you swap later. Placeholder content hides the design's real problems.
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.
- 7d ago First seen · 163 lines · 77 tokens per session scan A f7721f414d60
frontend-design is a skill published in the GitHub repository clubpay/ronykit (38 stars, last pushed 6d ago), licensed BSD-3-Clause. It adds 77 tokens to every session and 1,878 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
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…
frontmcp-development
Use when building any FrontMCP server component other than a tool (for tools, use create-tool). Covers @Resource static resources and parameterized URI templates; @Prompt reusable prompts (RAG, multi-turn); @Provider singleton dependency-injection providers (database pools, API clients); @Agent autonomous LLM agents…
procedure
Vovk.ts procedures — atomic unit of server-side logic in Vovk project. Use whenever user asks to build ANYTHING producing or consuming data on server — page loading data ("users page", "dashboard", "product list"), endpoint, API handler, server action, form submission, controller, validation with Zod / Valibot /…
rpc
Vovk.ts RPC client — how vovk generate turns controllers into type-safe client modules, composed vovk-client vs segmented clients, call shape (apiRoot, params, body, query, meta, init, disableClientValidation, validateOnClient, interpretAs, transform, fetcher), customizing generation via outputConfig.imports.fetcher +…
tools
Building LLM tools with Vovk.ts — deriveTools() (procedures → tools), createTool() (standalone tools, no controller/procedure needed), @operation.tool({ name, title, description, hidden }) decorator, x-tool metadata, ToModelOutput.DEFAULT vs ToModelOutput.MCP formatters, the tools + toolsByName return shape, the meta…
decorators
Vovk.ts decorators — built-in (@prefix, @operation, @get/@post/@put/@patch/@del, .auto()) and custom via createDecorator. Covers authorization / auth decorators, middleware-style wrapping (pre-handler + post-handler logic), req.vovk.meta() for cross-decorator state, stacking order, the decorate() alternative for…