design-taste-frontend

Apply bias-correction rules that ban common AI patterns: no Inter font, no purple gradients, no centered heroes, and no 3-column card rows. Use calibrated dials for design variance, motion intensity, and visual density to drive asymmetric layouts and distinctive typography like Geist or Satoshi.

Use spring physics with stiffness 100 and damping 20, plus layout and layoutId props for shared element transitions. For continuous animations like magnetic hover, use useMotionValue and useTransform outside the React render cycle instead of useState to avoid performance collapse.

Yes, but you must check package.json first to lock the version. For v4, do not use the tailwindcss plugin in postcss.config.js; use @tailwindcss/postcss or the Vite plugin instead, and never mix v4 syntax into v3 projects.

Never mix them in the same component tree. Default to Framer Motion for UI and Bento interactions, and use GSAP or Three.js exclusively for isolated full-page scrolltelling or canvas backgrounds wrapped in strict useEffect cleanup blocks.

Mobile browsers like iOS Safari resize the viewport when toolbars show or hide, making h-screen unstable. Use min-h-[100dvh] for full-height hero sections so the layout adapts to the dynamic viewport without catastrophic jumping.

Asymmetric layouts above the md breakpoint must aggressively fall back to a strict single-column layout with w-full, px-4, and py-8 on viewports under 768px. Without this mobile override, fractional grids and overlapping margins cause horizontal scrolling and breakage.