ui

A set of rules for building HTML, templates, and CSS in a dark Bootstrap 5.3 web interface. Bootstrap is a web design toolkit, and CSS controls how pages look and behave.

In plain words
What is it for?
Use it when writing or reviewing page layouts, tables, buttons, filters, colors, spacing, and other interface components for this project.
Why use it?
It keeps the interface consistent and makes important states, actions, and problems easier to understand in an administration tool.

Cursor rule for Cursor

Install

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.

agentmods
npx agentmods add rules/romkey/i2c-directory/ui
Clone the repo
git clone --depth 1 https://github.com/romkey/I2C-Directory

Made for: Cursor.

Per session 2,175 This file is loaded in full into every session.
When invoked 2,175 The same file — it is already loaded in full.
Security scan A 0 findings. Scan, not verified.
Origin original No closer match found in the catalogue.
Token cost

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.

ModelPer sessionOnce invoked
Fable 5 $0.02175 $0.02175
Opus 5 $0.01087 $0.01087
Sonnet 5 $0.00435 $0.00435
Haiku 4.5 $0.00217 $0.00217

Measured 2d ago against content hash 4317e41c99da, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, from the pricing page.

Security

Grade A, and why

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 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.

.cursor/rules/ui.mdc · 174 lines

How it starts

The opening of the file, as written. The whole thing — 174 lines — stays where its author put it; the contents beside it link to each section on GitHub.

UI Design Rules

Apply these rules to any HTML/template/CSS Cursor writes for this project. The system uses Bootstrap 5.3 with data-bs-theme="dark" and a custom refresh.css that defines the component classes referenced below.

Core principles

  1. Color encodes meaning, not category. Reserve color for: red = danger/destructive, amber = warning/needs attention, green = success/active, blue = active/selected/link. Never color-code categories of buttons (e.g., don't make "all parking buttons green"). If color isn't telling the user something specific, it shouldn't be there.

  2. Dim the common case so outliers pop. When 90%+ of values in a column are identical (statuses, amounts, dates), render the common case in muted gray and let exceptions stand out.

  3. One primary action per region. At most one filled btn-primary per page region. Everything else is btn-outline-secondary.

  4. Pages should do work, not just present data. Surface attention counts inline. Make filters surface admin problems. Lead with what the user can act on.

  5. Density beats whitespace. This is an admin tool. Body text is 12-13px in tables. Tighten padding aggressively.

Buttons

  • btn-primary — single most-used action per region only.
  • btn-outline-secondary — everything else.
  • btn-danger / btn-outline-danger — only for genuinely destructive actions (Delete, Ban, Remove). Destructive buttons go in a kebab menu, never bare on the page.
  • Never use btn-success / btn-warning / btn-info as button color labels for categories. Use semantic meaning only.

Status indicators

  • 90%+ rows share a status → render a 6px colored dot (.status-dot.status-success etc.), no label.
  • Exceptional statuses → use a small text-bg-*-subtle badge with a label.
  • Never use saturated bg-success / bg-danger filled badges. Always use the -subtle variants.
  • ALL CAPS status pills are forbidden. Sentence case only.

Numbers and money

  • Right-align numeric columns with class="num" (tabular).
  • Zero values: text-secondary (muted).
  • Outlier values in a column of similar values: add fw-medium.
  • Money: dim repeated parts. <span class="money num"><span class="currency">$</span>40<span class="cents">.00</span></span> — only the dollar value is bright.
  • Never wrap counts in colored badges (e.g., <span class="badge bg-info">42</span>). Plain numerals.

Read the full file on GitHub · 174 lines

Changes

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.

  1. 2d ago First seen · 174 lines · 2,175 tokens per session scan A 4317e41c99da

Subscribe to this mod's changes

ui is a cursor rule published in the GitHub repository romkey/I2C-Directory (11 stars, last pushed 21d ago), licensed MIT. It adds 2,175 tokens to every session, about $0.0109 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.