bastien
a2e654d89f
Fourteen lines of stack-agnostic micro-rules (dvh, safe-area, paste, tabular-nums, text-wrap, z-index scale, compositor-only motion, 44 px targets, focus-visible, status not by color alone, errors by the field, one accent per view). Case 3 of the 6-repo review: nothing installed.
46 lines
2.4 KiB
Markdown
46 lines
2.4 KiB
Markdown
---
|
|
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.
|