design-taste-frontend-v1

Apply explicit design constraints: ban default fonts like Inter in favor of Geist or Satoshi, limit accent colors to one desaturated hue, forbid centered hero layouts, and replace 3-column card rows with asymmetric grids. This Skill encodes all of these rules as mandatory generation directives.

Use useMotionValue and useTransform outside the React render cycle for continuous animations like magnetic hover, never useState. Animate only transform and opacity, memoize perpetual loops in isolated client components, and add useEffect cleanup functions.

Yes, but the Skill enforces a version lock: it checks package.json first and forbids v4 syntax in v3 projects. For Tailwind v4, it requires @tailwindcss/postcss or the Vite plugin instead of the legacy tailwindcss PostCSS plugin.

Yes, shadcn/ui is allowed but never in its generic default state. You must customize border radii, colors, and shadows to match the project aesthetic so the output does not carry the recognizable default shadcn look.

h-screen causes layout jumping on mobile browsers like iOS Safari because the viewport height changes as toolbars show and hide. min-h-[100dvh] uses dynamic viewport units, keeping full-height sections stable during scrolling.

Choose v1 only when a project depends on its exact behavior and you need backward compatibility. The v2 release is a substantial rewrite and is the current default for new work.