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.
git clone --depth 1 https://github.com/krivoox/agent-stack-templateWrote 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/rules/krivoox/agent-stack-template/ui-design-system)<a href="https://agentmods.dev/rules/krivoox/agent-stack-template/ui-design-system"><img src="https://agentmods.dev/badge/rules/krivoox/agent-stack-template/ui-design-system/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/rules/krivoox/agent-stack-template/ui-design-system"><img src="https://agentmods.dev/badge/rules/krivoox/agent-stack-template/ui-design-system.svg" alt="Reviewed on agentmods" width="80" 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.00000 | $0.00474 |
| Opus 5.5 | $0.00000 | $0.00190 |
| Sonnet 5.5 | $0.00000 | $0.00095 |
| Haiku 4.5 | $0.00000 | $0.00047 |
Grade A, and why
ui-design-system 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 1mo 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.
What it actually says
UI
Source of truth: DESIGN.md. Theme tokens: src/app/globals.css.
Before writing UI
- Reuse
src/components/ui/*. Extend with a CVAvariant/sizerather than a one-offclassName. - Reuse the shell:
ContentPanel,SurfaceSection,FormSheet,FormField. - No business rules in React.
Mobile-first
Base styles target a phone (< 640px); enrich upward with sm: / md: / lg:.
Designing for desktop and patching with max-md: is the wrong direction.
- Tables: only identity + the primary value in the base layout; everything else
hidden sm:table-cell. - Forms: one column at base; grids from
sm:. - Primary controls at least ~40px tall on touch.
Colour
Semantic classes only: bg-background, bg-card, text-foreground,
text-muted-foreground, bg-primary, border-border, ring-ring,
sidebar-*, and the accent tokens (info, success, warning,
destructive).
Forbidden in product UI: hex, raw rgb(), and Tailwind colour scales
(bg-zinc-50, text-blue-600). A new colour is a token in :root / .dark
plus an entry in @theme inline — never an inline value.
Repetition
If a style combination appears three times, it becomes a CVA variant or a component. Two is a coincidence; three is a pattern.
States and motion
Every interactive element needs hover, focus-visible, disabled and loading.
Every list needs an empty state and an error state. Animate only transform
and opacity, under 300ms, and respect prefers-reduced-motion.
Navigation
A new destination goes in src/components/app-shell/nav-config.ts. A link
added directly in a component never gets prefetched and never gets a title.
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.
- 1mo ago First seen · 54 lines · 0 tokens per session scan A 6d08176345db
ui-design-system is a cursor rule published in the GitHub repository krivoox/agent-stack-template (31 stars, last pushed 17d ago), licensed MIT. It costs nothing until one of its globs matches a file; then it loads 474 tokens. 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 cursor rules, from other repositories
upgrade-tests
// ✅ CORRECT: Upgrade package pattern await using ctx = testReactResource(appRouter, { server: { // server configuration }, client(opts) { return { links: [ httpLink({ url: opts.httpUrl, // client configuration }), ], }; }, }).
react-query-tests
// ✅ CORRECT: Legacy React Query pattern const ctx = konn() .beforeEach(() => createAppRouter()) .afterEach((ctx) => ctx?.close?.()) .done().
tanstack-react-query-tests
// ✅ CORRECT: Use await using for automatic cleanup await using ctx = testReactResource(appRouter, { server: { // server configuration }, client(opts) { return { links: [ httpLink({ url: opts.httpUrl, // client configuration }), ], }; }, }).
pnpm
Always use pnpm as a package manager instead of yarn, bun, or npm.
nextjs-react-tailwind-cursorrules-prompt-file
Cursor rules for Next.js development with React and Tailwind CSS integration.
react-components-creation-cursorrules-prompt-file
Cursor rules for React component creation and development.