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.
2.4 KiB
2.4 KiB
paths
| paths | ||||||||
|---|---|---|---|---|---|---|---|---|
|
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, never100vh; fixed elements respectsafe-area-inset. Never block paste in inputs. - Numbers:
tabular-nums. Headingstext-wrap: balance, bodypretty. 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-changeonly during an active animation; pause loops off-screen; honorprefers-reduced-motion. - Touch targets 44 px minimum; visible
:focus-visiblering; 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.