design-taste-frontend

Start with a brief inference step that identifies page kind, audience, and vibe before coding. Then set variance, motion, and density dials and apply anti-default rules that ban AI-purple gradients, centered heroes, and generic card grids.

For modern SaaS marketing sites, Tailwind v4 utilities with the dark variant are the default. If the brief matches an established product ecosystem, use the official package such as Fluent, Carbon, Primer, or shadcn/ui instead of recreating its CSS.

Yes, it defaults to React Server Components with interactive islands. Any component using Motion, scroll listeners, or pointer physics must be an isolated client component with 'use client', while server components render static layouts only.

Serif is acceptable only when the brand brief explicitly names a serif or the aesthetic is genuinely editorial, luxury, or heritage. For creative agencies, portfolios, and modern brands, sans-serif display fonts like Geist Display or Cabinet Grotesk are the required default.

Common failures include headlines over two lines, subtext over 20 words, top padding above pt-24, more than four text elements, or CTAs hidden below the fold. Reduce font scale or cut copy so the hero fits the initial viewport.

No, the skill enforces one design system per project. Mixing Fluent React with Carbon, or importing shadcn/ui into a Material 3 app, is explicitly prohibited to keep tokens, motion, and accessibility behavior consistent.