---
paths: ["**/*.html", "**/*.astro", "**/*.css", "**/*.scss", "**/*.tsx", "**/*.jsx", "**/*.vue", "**/*.svelte"]
---

# Web building — no default reflexes + done checklist

## Avoid unless the user asks for them
- Purple gradient, purple/black, neon, washed-out pastels, rainbow.
- Drop shadow on everything; the same border-radius on every element.
- Bento grid, dot grid, glowing background orbs, decorative color strip.
- Sparkle icons, animated arrows, emojis as icons, decorative fake
  terminal window.
- Hover animation on every element; scroll-reveal animations everywhere.
- Three aligned feature cards, three pricing tiers, checkmark bullets.
- Vague hero title ("unleash your potential"): state what the product does.
- Fake testimonials, fake visitor or client counters, invented numbers.
  Never, in any context.
- Inter, Geist or Space Grotesk as the default font: propose an
  alternative and justify it. Existing brand identities keep their fonts.

## Write-time reflexes (stack-agnostic, from ui-skills)
- Full height: `100dvh`, never `100vh`; fixed elements respect
  `safe-area-inset`. Never block paste in inputs.
- Numbers: `tabular-nums`. Headings `text-wrap: balance`, body `pretty`.
  Long labels: truncate or line-clamp, never overflow.
- One z-index scale from tokens, no arbitrary values.
- Motion: transform and opacity only; feedback under 200 ms, ease-out on
  entrances, never from scale(0); `will-change` only during an active
  animation; pause loops off-screen; honor `prefers-reduced-motion`.
- Touch targets 44 px minimum; visible `:focus-visible` ring; status never
  by color alone, add text or an icon.
- Errors next to the field; empty state = one clear action; destructive
  action confirmed first.
- One accent color per view; solid modal backdrop, no full-screen blur.

## Before declaring a public site done
Check: custom 404 · call to action in the first viewport · per-page
title + description · share/OG image · favicons · robots.txt · sitemap ·
alt text on images · layout tested at 375 px · loading states · form
error messages · confirmation page · real legal mentions · cookie banner
with a working refuse option · audience measurement · contact address ·
compressed images.
Report the missing items to the user instead of inventing them. Internal
tools and dashboards: only the relevant items apply. Deep audits stay
with /seo, /harden, /web-validate.