code-review-ui

A set of review rules for frontend code, meaning the part of an application users see and interact with. It covers accessibility, state handling, download size, keyboard use, page loading, and rendering speed.

In plain words
What is it for?
Use it when reviewing UI components or frontend changes, including checks for image descriptions, form labels, keyboard access, color contrast, focus handling, ARIA attributes, and hydration.
Why use it?
It helps catch interface problems that can make a site difficult to use, slow, or inaccessible to people using keyboards or assistive technology.

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/andr-ca/agentharness/code-review-ui
Clone the repo
git clone --depth 1 https://github.com/andr-ca/agentharness

Made for: Cursor.

Per session 46 Only the description is in the session, so the agent can decide to use it. The body loads when it is invoked.
When invoked 1,132 The whole file, excluding the scripts and references it only reads on demand.
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.00046 $0.01132
Opus 5 $0.00023 $0.00566
Sonnet 5 $0.00009 $0.00226
Haiku 4.5 $0.00005 $0.00113

Measured yesterday against content hash cc10af460b59, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, from the pricing page.

Security

Grade A, and why

code-review-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 yesterday.

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/code-review-ui.mdc · 53 lines

How it starts

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

Code Review — UI / Frontend Layer

Focus on accessibility, performance, and correctness at the rendering boundary.

Accessibility (WCAG AA)

  • Missing alt text on images — every <img> needs an alt attribute. Decorative images use alt="". Never alt="image" or alt="photo".
  • Interactive element is not keyboard-accessible — a <div onClick> or <span onClick> is not focusable by default. Use <button> or add role/tabIndex and keyboard event handlers.
  • Color contrast — text must meet 4.5:1 contrast ratio (3:1 for large text). Check with a contrast analyzer before approving color changes.
  • Missing form labels — every <input> needs a visible <label> or aria-label. Placeholder text is not a substitute.
  • Inaccessible error messages — form validation errors must be associated with the input (aria-describedby) and announced to screen readers.
  • Focus management after state change — modals, dialogs, and popups must move focus to the new content on open and restore it on close.
  • Missing ARIA role on custom widget — a custom dropdown, slider, or menu must declare its ARIA role and maintain ARIA state (aria-expanded, aria-selected, etc.).

State Management

  • Server state stored in client state — data fetched from an API stored in useState/useReducer/Vuex instead of a server state cache (React Query, SWR, Apollo). Leads to stale reads and manual invalidation bugs.
  • Derived state stored explicitlyconst [fullName, setFullName] = useState(...) when fullName = firstName + lastName is derivable. Store the minimum, compute the rest.
  • State updated without immutability — mutating a React/Vue state object directly (state.items.push(...)) instead of returning a new reference. Breaks change detection.
  • Global state for local data — adding to a global store (Redux, Zustand, Pinia) something only one component uses. Use useState / component-local state first.
  • Missing loading / error states — async data fetch with no handling of the pending or error case. The UI silently shows nothing or crashes.

Read the full file on GitHub · 53 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. yesterday First seen · 53 lines · 46 tokens per session scan A cc10af460b59

Subscribe to this mod's changes

code-review-ui is a cursor rule published in the GitHub repository andr-ca/agentharness (1 stars, last pushed yesterday), licensed MIT. It adds 46 tokens to every session and 1,132 once invoked, about $0.0002 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-31.