Design lint

tool-gates scans UI file write/edit bodies for generic, templated design patterns and missing UI-quality basics. It covers Claude Write/Edit and Codex apply_patch added lines on the PostToolUse path, the same path as the security-reminder nudges. Antigravity has no PostToolUse hook, so design-lint does not run there. Findings are a single tier: every match attaches a post-write nudge so the next action can self-correct. Nothing is blocked. The gate is opt-in (default off) and only scans UI extensions (.tsx, .jsx, .vue, .svelte, .astro, .html, .css, .scss, and similar).

Why it is opt-in

A design opinion you switch on per project.

Security reminders enforce a safety floor everywhere. These rules encode a house style for frontend output: avoid the patterns that read as generic or templated, and keep the accessibility basics. That is a deliberate choice a project opts into, so the gate defaults off. When enabled, each match attaches a <system-reminder> via additionalContext after the write lands. Raw color values inside a :root token definition are exempt: defining a brand token is legitimate; reaching for the same value in markup is what gets flagged.

Color

post-write nudge · PostToolUse

color/cliche-gradient

Nudge

Overused #667eea / #764ba2 'tech' gradient. Use a solid color or a narrow-band gradient.

color/purple-gradient

Nudge

Purple, violet, or indigo gradient. Favor a flat surface with intentional typography; if the brand truly uses violet, define it as a token and reference it via var().

color/overused-palette

Nudge

Overused beige / brass / espresso 'premium' palette. Choose colors that reflect the actual brand.

color/default-indigo

Nudge

Default Tailwind indigo accent. Use a theme token; define indigo in the theme if the brand genuinely calls for it.

color/hardcoded-palette

Nudge

Hardcoded Tailwind palette color. Use semantic theme tokens (bg-background, text-foreground, ...).

color/raw-hex

Nudge

Raw hex in an inline style. Use a theme token.

color/theme-accessor

Nudge

theme(colors.*) in raw CSS. Reference the CSS variable directly, e.g. var(--color-muted).

color/maxed-saturation

Nudge

Pure screen-primary color (#f00, #00ff00, ...). Use an OKLCH value with moderate chroma in a safe lightness range.

Typography

post-write nudge · PostToolUse

typography/default-font

Nudge

Inter as the display font. Choose a typeface suited to the product's character.

typography/small-body-text

Nudge

text-xs / text-sm on a <p>. Body text should be 16px or larger; reserve smaller sizes for metadata.

typography/script-font

Nudge

Script or handwriting font used as display type (Pacifico, Caveat, Comic Sans, ...). Reserve script faces for genuine handwriting context.

Content

post-write nudge · PostToolUse

content/placeholder-name

Nudge

Placeholder or stock person/company name. Use real content or an explicit [placeholder].

content/fabricated-stat

Nudge

Round, unsourced statistic. Use a real measured number or remove it.

content/filler-copy

Nudge

Generic marketing filler ('Elevate', 'Seamless', 'Unleash', ...). State a concrete outcome instead.

content/dash

Nudge

Em or en dash in rendered text. Use a period, comma, colon, or parentheses.

content/emoji-decoration

Nudge

Emoji decorating a heading or button. Reads casual in most product and editorial UI; remove unless the brand uses emoji deliberately.

Motion

post-write nudge · PostToolUse

motion/transition-all

Nudge

transition: all (or the transition-all utility) animates every property, including layout. List the specific properties to transition.

motion/scale-hover

Nudge

Default scale(1.05) / scale(1.1) hover. Differentiate hover by element: a color shift for links, a ring for buttons.

Structure & accessibility

post-write nudge · PostToolUse

layout/accent-stripe

Nudge

Card with a 4px left accent stripe. Use a tonal background or a thin bottom border instead.

behavior/scroll-into-view

Nudge

scrollIntoView mutates ancestor scroll position in embedded contexts. Use scrollTo with a computed offset.

assets/hotlinked-image

Nudge

Hotlinked external image. Download and self-host the asset.

a11y/focus-visible

Nudge

Focus outline removed with no focus-visible replacement. Add a visible focus style.

Configure

documented

[features]
design_lint = true
[design_lint]
disable_rules = ["color/default-indigo"]

Opt-in. Set design_lint = true under [features] to turn the gate on; it is off by default.

Disable individual rules by id (for example color/default-indigo or content/dash) when a project deliberately uses that pattern.

Only UI file extensions are scanned. CSS custom-property definitions in a :root block are exempt from the raw-color rules, so defining a brand token is never flagged, while the same value used in markup or inline styles still is.

Edit docs/src/design-lint.md on GitHub

Keyboard shortcuts

tool-gates

Design lint

A design opinion you switch on per project.