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 rules/tsubotax/melta-ui/componentsgit clone --depth 1 https://github.com/tsubotax/melta-uiWhat 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 | $0.00000 | $0.01351 |
| Opus 5 | $0.00000 | $0.00675 |
| Sonnet 5 | $0.00000 | $0.00270 |
| Haiku 4.5 | $0.00000 | $0.00135 |
Grade A, and why
components 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 2d 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 — 119 lines — stays where its author put it; the contents beside it link to each section on GitHub.
melta UI Component Classes
Button
CTA: inline-flex items-center justify-center gap-2 h-10 px-4 text-[1rem] font-medium bg-primary-500 text-white rounded-lg hover:bg-primary-700 cursor-pointer
Sub: inline-flex items-center justify-center gap-2 h-10 px-4 text-[1rem] font-medium bg-white text-slate-700 border border-slate-200 rounded-lg hover:bg-gray-50 cursor-pointer
Danger: inline-flex items-center justify-center gap-2 h-10 px-4 text-[1rem] font-medium bg-red-500 text-white rounded-lg hover:bg-red-600 cursor-pointer
Sizes: Large h-12 px-6 text-[1rem] | Medium h-10 px-4 text-[1rem] | Small h-8 px-3 text-[0.875rem]
Icon: Large w-12 h-12 | Medium w-10 h-10 | Small w-8 h-8
Icon+Text: pl-3 pr-4 (M) | pl-2.5 pr-3 (S) | pl-5 pr-6 (L) — asymmetric padding
Card
Basic: bg-white rounded-xl border border-slate-200 p-6 shadow-sm
Grid: grid grid-cols-2 md:grid-cols-3 gap-6
Input / TextField
Default: w-full px-3 py-2 text-base border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500/50 caret-primary-500
Wrapper: <div class="leading-normal"> + <label> + <input>
Select (appearance-none REQUIRED)
Default: appearance-none w-full px-3 py-2 text-base border border-slate-300 rounded-lg pr-10
Chevron: <svg class="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400 pointer-events-none">
Table
Wrapper: bg-white rounded-xl border border-slate-200 overflow-hidden
Header: border-b border-slate-200 bg-gray-50
TH: <th scope="col"> text-left py-3 px-4 text-xs font-medium text-slate-500 uppercase tracking-wider
TD: py-3 px-4 text-sm text-slate-900
Row: hover:bg-gray-50 transition-colors
Badge
Success: inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-xs font-medium bg-emerald-50 text-emerald-700
Warning: ... bg-amber-50 text-amber-700
Danger: ... bg-red-50 text-red-700
Neutral: ... bg-slate-100 text-slate-700
Alert
Info: bg-primary-50 border border-primary-200 text-primary-800 rounded-lg p-4
Error: bg-red-50 border border-red-200 text-red-800 rounded-lg p-4
Warning: bg-amber-50 border border-amber-200 text-amber-800 rounded-lg p-4
Success: bg-emerald-50 border border-emerald-200 text-emerald-800 rounded-lg p-4
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.
- 2d ago First seen · 119 lines · 0 tokens per session scan A 5e1294d63b4e
components is a cursor rule published in the GitHub repository tsubotax/melta-ui (196 stars, last pushed 16d ago), licensed MIT. It costs nothing until one of its globs matches a file; then it loads 1,351 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
general
Wonder Blocks design system conventions, component patterns, and coding standards.
building-blocks
Source: docs/agents/building-blocks.md Regenerate: npm run agents:sync -w packages/openbridge-webcomponents -->.
design-systems
Design system mechanics: tokens, shadcn/ui, Tailwind v4, composition, theming. Load for UI implementation — aesthetics and anti-slop live in the anti-slop-design skill.
ui-components
USE WHEN: Building UI components, structuring layouts, and applying styles using Tailwind CSS.
uizze-ui-finish-gate
Apply the UIZZE design contract and finish gate to frontend work.
sigil-design-system
Every custom preset MUST populate ALL 33 token categories and ALL 519 fields.