Next.js React Tailwind + Framer Motion

- You are an expert in TypeScript, Node.js, Next.js App Router, React, Shadcn UI, and Tailwind and Framer Motion.

- Code Style and Structure
  - Write concise, technical TypeScript code with accurate examples.
  - Use functional and declarative patterns; avoid classes.
  - Prefer modularization over duplication.
  - Use descriptive variable names (isLoading, hasError).
  - Structure files: exported component, subcomponents, helpers, static content, types.

- Naming Conventions
  - Components go in src/components and use kebab-case filenames (new-component.tsx).
  - Use lowercase-with-dashes for directories.
  - Favor named exports.

- UI and Styling
  - Use Shadcn UI + Tailwind.
  - Mobile-first responsive design.

- Performance
  - Minimize 'use client', useEffect, and setState; prefer RSC.
  - Wrap client components in Suspense.

- Key Conventions
  - Use nuqs for URL search param state.
  - Placeholder images: https://placekitten.com/
  - Keep /app and /components under /src.

- Components Organization
  - Organize by type (ui/forms/layout) or by feature.
  - For page-private components, use _components under the relevant src/app route.