design-taste-frontend

Apply explicit design constraints: ban default fonts like Inter in favor of Geist or Satoshi, limit accents to one desaturated color, avoid centered heroes, and replace 3-column card rows with asymmetric grids. This Skill encodes those rules as enforceable generation directives.

Animate only transform and opacity, never top, left, width, or height. Use useMotionValue and useTransform for continuous effects instead of useState, and isolate perpetual animations in memoized client components so parent layouts never re-render.

Yes, but the Skill requires checking package.json first and never using v4 syntax in v3 projects. For v4, it mandates @tailwindcss/postcss or the Vite plugin instead of the legacy tailwindcss PostCSS plugin.

Yes. The Skill defaults to React Server Components and requires interactive or animated elements to be extracted into isolated leaf components with 'use client' at the top, keeping server components limited to static layouts.

Mobile browsers like iOS Safari dynamically resize the viewport when toolbars show or hide, so h-screen produces incorrect heights and visible jumps. The Skill mandates min-h-[100dvh] for full-height sections to track the dynamic viewport.

Do not force these rules when an existing brand system, product convention, or platform guideline requires a different visual direction. The Skill also does not replace accessibility review, user testing, or project-specific requirements.