claude_mac/rules/web-building.md

paths

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.