A set of rules for keeping an application's colors in one CSS theme file and referring to them by named variables.

Use it when adding or changing interface colors, organizing theme variables, or checking that templates and components follow the color rules.

It prevents scattered color values and keeps the interface's palette easier to maintain consistently.

ui-designer — Cursor rule for Cursor by dfirtnt

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.

Clone the repo

git clone --depth 1 https://github.com/dfirtnt/Huntable-CTI-Studio

Made for: Cursor.

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

README.md

[![agentmods](https://agentmods.dev/badge/rules/dfirtnt/huntable-cti-studio/ui-designer/github.svg)](https://agentmods.dev/rules/dfirtnt/huntable-cti-studio/ui-designer)

Your own site

<a href="https://agentmods.dev/rules/dfirtnt/huntable-cti-studio/ui-designer"><img src="https://agentmods.dev/badge/rules/dfirtnt/huntable-cti-studio/ui-designer/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.

Your own site · 80×15

<a href="https://agentmods.dev/rules/dfirtnt/huntable-cti-studio/ui-designer"><img src="https://agentmods.dev/badge/rules/dfirtnt/huntable-cti-studio/ui-designer.svg" alt="Reviewed on agentmods" width="80" height="20"></a>

Per session 1,007 This file is loaded in full into every session.

When invoked 1,007 The same file — it is already loaded in full.

Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe.

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.

Model	Per session	Once invoked
Fable 5.1	$0.01007	$0.01007
Opus 5	$0.00504	$0.00504
Sonnet 5	$0.00201	$0.00201
Haiku 4.5	$0.00101	$0.00101

Measured 10d ago against content hash 80ff3e715bee, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-09, from the pricing page.

Security

Grade A, and why

ui-designer 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 10d 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-designer.mdc · 45 lines

How it starts

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

UI Designer Rules (Color & Theme)

Authoritative source: docs/contracts/ui-designer.md (the full UX contract). This file covers theme-variables.css authoring/maintenance specifically -- template/component usage rules (cards, typography, modals, a11y) live in the canonical doc; don't restate them here.

1. Where colors live

Single source of truth: src/web/static/css/theme-variables.css. No literal hex/rgb()/rgba() in app templates, JS, or component CSS -- see the canonical doc's "Colors -- CSS variables only" rule.
Exception: Browser extension may keep literal hex; it is exempt from var() enforcement but must remain palette-aligned.

2. Theme file structure

Keep the 12-section layout: Panel backgrounds → Text → Brand purple → Semantic actions → Step colors → Step status → Badges → Borders & surfaces → Shadows → Charts → Component-specific → Utility classes.
Use hex (lowercase) for all solid colors.
Use rgba() only for real transparency (opacity < 1). Never rgba(..., 1); use hex instead.
Keep the file under ~300 lines; consolidate before adding more vars.

3. Naming and consolidation

Actions: --action-{semantic} (e.g. success, warning, info, danger, execute) with -dark, -bg, -fill, -hover only when needed. Prefer one “dark” var for both hover and dark state (e.g. --action-execute-dark, not a separate hover var).
No duplicate semantics: One variable per role (e.g. chart green → --action-success-light). If two vars would have the same value, keep one and reference it; add a short comment if the alias is intentional.
Chart fills: One opacity per base color (e.g. 0.6 for chart fills). Do not keep both 0.6 and 0.8 for the same color.

4. Charts, print, and component-specific

Charts: In JS, read theme via getThemeColor('--...') (with a literal fallback only when vars might be missing). Prefer semantic vars (e.g. --action-success-light, --action-warning, --purple-deep) over chart-only names unless the shade is truly chart-specific (e.g. --chart-cyan for a series).
Print / plain view: Use theme vars (e.g. --text-print, --surface-print, --border-print) so print stays consistent.
Component-specific (eval, MLOps, modals): May live in the theme file with a short comment (“global to avoid per-page CSS” or “used by X”). Do not move them to component CSS unless we also load that CSS everywhere the var is used.

Read the full file on GitHub · 45 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.

10d ago First seen · 45 lines · 1,007 tokens per session scan A 80ff3e715bee

Subscribe to this mod's changes

ui-designer is a cursor rule published in the GitHub repository dfirtnt/Huntable-CTI-Studio (11 stars, last pushed 2d ago), licensed MIT. It adds 1,007 tokens to every session, about $0.0050 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.

CSS and styling Design and UX Frontend blue-team cybersecurity detection-as-code detection-engineering detection-rules fastapi

ui-designer

Getting it into your agent

Wrote this? Show the measurements

What it costs to keep this loaded

Grade A, and why

Nothing flagged

How it starts

UI Designer Rules (Color & Theme)

1. Where colors live

2. Theme file structure

3. Naming and consolidation

4. Charts, print, and component-specific

What this file has done since we first saw it

Other cursor rules, from other repositories

color-tokens

desktop-layout

opensquad-ui

external-scale

codex-premium-website-skills

ui-components