design-taste-frontend-v1

Apply explicit design constraints covering typography, color, and layout rather than accepting defaults. This Skill bans patterns like Inter font, purple gradients, centered heroes, and three-column card rows, replacing them with asymmetric grids, curated font stacks, and single-accent palettes.

Extract interactive components into isolated leaf components with 'use client' at the top, since Server Components cannot hold animation state. Use spring physics with stiffness 100 and damping 20, and memoize perpetual animations to prevent parent re-renders.

Yes, but you must check package.json first because the syntax differs between versions. For v4, do not use the tailwindcss plugin in postcss.config.js; use @tailwindcss/postcss or the Vite plugin instead.

Yes, shadcn/ui is allowed but never in its generic default state. You must customize the radii, colors, and shadows to match the project's aesthetic before shipping the components.

Using h-screen causes layout jumping on mobile browsers like iOS Safari because the viewport height changes when browser chrome appears. Use min-h-[100dvh] instead for stable full-height sections.

Use GSAP or ThreeJS only for isolated full-page scrolltelling or canvas backgrounds, wrapped in useEffect cleanup blocks. Never mix them with Framer Motion in the same component tree; Framer Motion remains the default for UI and Bento interactions.