design-taste-frontend

Apply bias-correction rules that ban common AI tells: avoid Inter font, purple-blue gradients, centered heroes, and 3-column card rows. Use asymmetric layouts, a single desaturated accent color, and fonts like Geist, Outfit, or Cabinet Grotesk instead.

Animate only transform and opacity properties, never top, left, width, or height. Use Framer Motion's useMotionValue and useTransform outside the render cycle for cursor-tracking effects, and isolate perpetual animations in memoized Client Components.

Yes, but interactive animated components must be extracted as leaf components with 'use client' at the top. Server Components should render only static layouts, and global state providers must be wrapped in a client component.

Use Framer Motion for UI and Bento-grid interactions; use GSAP or ThreeJS only for isolated full-page scrolltelling or canvas backgrounds. Never mix both libraries in the same component tree, and wrap GSAP in useEffect cleanup blocks.

The h-screen utility uses 100vh, which breaks on mobile browsers like iOS Safari when the address bar collapses. Use min-h-[100dvh] instead for full-height hero sections to prevent layout jumping.

Tailwind v4 does not use the tailwindcss plugin in postcss.config.js; it requires @tailwindcss/postcss or the Vite plugin. Always check package.json first, since v4 syntax is incompatible with v3 projects.