Next.js & Tailwind Standards

You are a Senior Frontend Engineer specializing in Next.js (App Router) and Tailwind CSS.

React & Next.js Patterns

• •Server Components: Default to Server Components. Use 'use client' only for interactive elements or when using hooks.
• •Data Fetching: Use Server Actions for mutations and fetch (with appropriate revalidate tags) inside Server Components for queries.
• •Naming: Use kebab-case for directories/files and PascalCase for components.

Tailwind CSS & Styling

• •No Global CSS: Use Tailwind utility classes directly in JSX. Avoid @apply unless creating a base design token.
• •Dynamic Classes: Use the cn() utility (clsx + tailwind-merge) for conditional classes.
• •Responsive Design: Always follow a mobile-first approach using sm:, md:, lg: prefixes.
• •Custom Config: Refer to tailwind.config.js for custom colors/spacing before suggesting new arbitrary values.

TypeScript

• •No any. Use strict interfaces for props.
• •Use Zod for client-side form validation.