Quality
Anti-pattern audit
Paste CSS, JSX or HTML and the engine scores it against 22 automated rules — adapted from Hallmark's slop-test gates (MIT), UI UX Pro Max's UX guidelines (MIT), and my own house rules. 9 further rules require human review and are listed below.
Console
Source
11 linesFindings
10 of 22 rulesscore 0
0/100
- criticalInvented metrics & social proofcontent
Fabricated stats ('10× faster', 'trusted by 50,000+ teams'), fake testimonials, Jane Doe.
in-top: 12px } } <p>Trusted by 50,000+ teams — 10x faster than the alternatives.</p>
→ Real numbers, a labelled '— metric to confirm' block, or a macrostructure without a proof slot.
- criticalMissing interaction statesstates
declares :hover but never :focus-visible
→ Implement default·hover·focus·active·disabled·loading·error·success for every interactive component.
- highPurple/blue gradient without rationalecolor
The canonical AI-default gradient (purple→blue, cyan→magenta), including gradient text.
background: linear-gradient(135deg, #8b5cf6 0%, #3b82f6 100%); border-radius: 18px; p
→ Pick one anchor hue from the contract palette; if ambience is wanted, use a single-hue radial ≤20% canvas (ATMOSPHERIC only).
- highMotion without reduced-motion fallbackmotion
keyframe animations exist but no prefers-reduced-motion query found
→ Every motion collapses to ≤150ms opacity (or nothing) under prefers-reduced-motion: reduce.
- highAnimating layout propertiesmotion
width/height/top/left/margin/padding animations cause jank and reflow.
0 0 40px #8b5cf6; } @keyframes float { from { margin-top: 0 } to { margin-top: 12px } } <p→ Animate transform and opacity only.
- mediumEverything rounded 16pxlayout
A single large radius applied indiscriminately (rounded-2xl world).
%, #3b82f6 100%); border-radius: 18px; padding: 17px; } .hero h1 { font-style: italic;→ Radius follows the contract: technical 0–6px, soft 8–10px; 12–16px must be earned by a playful voice.
- mediumOversized hero copytypography
Display clamps beyond fold budget; headline sliced by the fold or >90ch shouting.
font-style: italic; font-size: 10rem; } .card .card { background: rgba(255,255,255,0.08);→ ≤7 words / ≤50 chars at full display size; step down brackets beyond that (Hallmark sizing table).
- mediumtransition: allmotion
Blanket transitions animate layout properties by accident.
lur(12px); } .btn { transition: all 0.3s ease; } .btn:hover { transform: scale(1.05); box-→ Name the properties: transform, opacity, background-color.
- mediumItalic headerstypography
Italic display/headings, incl. the single italicised emphasis word — a top AI tell.
ding: 17px; } .hero h1 { font-style: italic; font-size: 10rem; } .card .card { background:→ Roman headers; emphasis via weight, accent color, or drawn underline.
- lowOff-scale spacinglayout
Arbitrary paddings (17px, 23px) off the 4pt scale.
der-radius: 18px; padding: 17px; } .hero h1 { font-style: italic; font-size: 10rem; } .c→ Snap to the contract's 4pt scale tokens.
Rule corpus
31 rules| Rule | Severity | Category | Detection | Fix | Origin |
|---|---|---|---|---|---|
| Purple/blue gradient without rationale | high | color | linear/radial gradients pairing purple/violet/indigo with blue/cyan; background-clip:text headlines | Pick one anchor hue from the contract palette; if ambience is wanted, use a single-hue radial ≤20% canvas (ATMOSPHERIC only). | hallmark gate 2 · yuuki avoid-list |
| Glassmorphism everywhere | medium | color | 3+ backdrop-filter/backdrop-blur occurrences | At most one glass layer per view (e.g. a floating palette). Surfaces separate by luminance and 1px borders. | yuuki avoid-list |
| Giant cards / cards inside cards | high | layout | rounded+shadow+padding wrappers nested inside each other | Flatten: one surface level per region; use spacing and hairlines, not boxes in boxes. | hallmark gate 4 · yuuki avoid-list |
| Everything rounded 16px | medium | layout | many rounded-2xl/3xl or border-radius ≥16px on non-playful contracts | Radius follows the contract: technical 0–6px, soft 8–10px; 12–16px must be earned by a playful voice. | yuuki avoid-list |
| Three identical feature cards | medium | structure | grid-cols-3 of icon-above-heading tiles | Vary spans (bento), use a different macrostructure, or make one feature primary. | hallmark gate 3 |
| Oversized hero copy | medium | typography | display sizes >9rem or hero headlines over ~90 characters | ≤7 words / ≤50 chars at full display size; step down brackets beyond that (Hallmark sizing table). | hallmark gate 44 · yuuki avoid-list |
| Invented metrics & social proof | critical | content | unsourced superlative numbers in marketing copy; placeholder personas | Real numbers, a labelled '— metric to confirm' block, or a macrostructure without a proof slot. | hallmark gates 19+46 |
| Decorative graphs | high | content | chart components fed literal random/mock arrays in production surfaces | Charts render real data or don't render; empty states replace fake data. | yuuki avoid-list · uipm chart rules |
| Off-scale spacing | low | layout | px values not divisible by 4 in padding/margin/gap | Snap to the contract's 4pt scale tokens. | hallmark gate 24 |
| Mixed icon languages | medium | icons | imports from multiple icon packages; ✨🚀⚡🔥🎯✅ in feature slots | One icon language per contract; custom SVG or typography where the set lacks a glyph. | hallmark gate 30 |
| Color-only statusmanual | high | accessibility | status dots/badges without text/icon/shape channel | Pair every status hue with a label, icon, or shape. | uipm ux-guidelines · WCAG 1.4.1 |
| Missing interaction states | critical | states | sources with hover styling but no focus-visible / active / disabled counterpart | Implement default·hover·focus·active·disabled·loading·error·success for every interactive component. | hallmark gate 26 |
| Mobile horizontal overflow | critical | responsive | bare 1fr image tracks, fixed widths >320px, missing overflow-x:clip | minmax(0,1fr) tracks, overflow-wrap:anywhere on display text, overflow-x:clip on html+body. | hallmark gates 34+50+51 |
| Motion without reduced-motion fallback | high | motion | animation/transition present, no reduced-motion media query | Every motion collapses to ≤150ms opacity (or nothing) under prefers-reduced-motion: reduce. | hallmark gate 27 |
| transition: all | medium | motion | transition-all / transition: all | Name the properties: transform, opacity, background-color. | hallmark gate 10 |
| Uniform hover-scale | low | motion | repeated uniform scale hovers | One hover channel per element, chosen per component role. | hallmark gates 11+13 |
| Animating layout properties | high | motion | those properties in transition lists or keyframes | Animate transform and opacity only. | hallmark gate 14 |
| Pill everything | low | layout | 4+ rounded-full/border-radius:9999px in one surface | Pills are for tags/toggles at most; controls follow the contract radius. | yuuki avoid-list |
| Inter for absolutely everything | medium | typography | those families in display/heading roles | Pick a display face from the contract's typography set; Inter only by explicit decision. | hallmark gate 1 · yuuki avoid-list |
| Italic headers | medium | typography | font-style:italic on headings; <em> inside h1–h3 | Roman headers; emphasis via weight, accent color, or drawn underline. | hallmark gate 38a |
| Identical dashboards across productsmanual | high | structure | cross-project comparison of contract macrostructure fields (manual/registry check) | Different products get different macrostructure, density, nav, and type — enforced by contract diffing. | yuuki philosophy |
| Default AI nav/footer fingerprintmanual | medium | structure | the canonical nav/footer shapes on product pages | Rotate nav/footer archetypes (Hallmark N1b–N13, Ft1–Ft8) per the contract. | hallmark gates 42+43 |
| Re-drawn UI chrome | medium | content | traffic-light dot triples + URL pills in markup | Real screenshots in a <figure> with a hairline border, or no chrome. | hallmark gate 47 |
| Mid-render token improvisationmanual | medium | color | inline color literals outside :root/@theme in component styles | Lift every value into a named token, then reference it. | hallmark gate 48 |
| Contrast failuremanual | critical | accessibility | computed (color, background) pairs below threshold — see contrast lab | Adjust token lightness until AA passes; dark sections must flip text tokens in the same rule. | hallmark gates 40+41 · WCAG 1.4.3 |
| Touch targets under 44px | high | accessibility | buttons/inputs with height <44px without compensating hit area | Min 44px hit area (visual size may be smaller with padding). | uipm ux-guidelines · Apple HIG |
| Tag-left / heading-right section headmanual | medium | structure | multi-column grid on wrappers containing both an eyebrow and a heading | Stack vertically: tag above, heading directly underneath; cap eyebrows at 1–2 per page. | hallmark gate 54 |
| Animated focus ring | medium | states | transitions on outline/box-shadow tied to :focus-visible | Ring appears in 0ms; animate nothing about it. | hallmark gate 15 |
| Wrapping clickable textmanual | medium | responsive | long labels without nowrap in affordances | Shorten the label or white-space:nowrap and let the parent reflow. | hallmark gate 49 |
| Disabled = opacity onlymanual | medium | states | disabled styling without cursor:not-allowed and disabled/aria-disabled | Three channels: opacity 0.55 + cursor:not-allowed + native disabled attr. | hallmark gate 39 |
| Spinner where progress is knowablemanual | low | states | spinners on upload/multi-step flows; no skeletons on content loads | Determinate progress when total is known; content-shaped skeletons for loads. | uipm ux-guidelines |