fncreator22 · Oct 16, 2026
@@ -146,7 +146,7 @@ See [CONTRIBUTING.md](../CONTRIBUTING.md#adding-instructions) for guidelines on
 | [MongoDB DBA Chat Mode Instructions](../instructions/mongo-dba.instructions.md)<br />[![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](https://aka.ms/awesome-copilot/install/instructions?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fmongo-dba.instructions.md)<br />[![Install in VS Code Insiders](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](https://aka.ms/awesome-copilot/install/instructions?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fmongo-dba.instructions.md) | Instructions for customizing GitHub Copilot behavior for MONGODB DBA chat mode. |
 | [MS-SQL DBA Chat Mode Instructions](../instructions/ms-sql-dba.instructions.md)<br />[![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](https://aka.ms/awesome-copilot/install/instructions?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fms-sql-dba.instructions.md)<br />[![Install in VS Code Insiders](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](https://aka.ms/awesome-copilot/install/instructions?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fms-sql-dba.instructions.md) | Instructions for customizing GitHub Copilot behavior for MS-SQL DBA chat mode. |
 | [NestJS Development Best Practices](../instructions/nestjs.instructions.md)<br />[![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](https://aka.ms/awesome-copilot/install/instructions?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fnestjs.instructions.md)<br />[![Install in VS Code Insiders](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](https://aka.ms/awesome-copilot/install/instructions?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fnestjs.instructions.md) | NestJS development standards and best practices for building scalable Node.js server-side applications |
-| [Next.js + Tailwind Development Instructions](../instructions/nextjs-tailwind.instructions.md)<br />[![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](https://aka.ms/awesome-copilot/install/instructions?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fnextjs-tailwind.instructions.md)<br />[![Install in VS Code Insiders](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](https://aka.ms/awesome-copilot/install/instructions?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fnextjs-tailwind.instructions.md) | Next.js + Tailwind development standards and instructions |
+| [Next.js 15+ and Tailwind CSS v4 Development Instructions](../instructions/nextjs-tailwind.instructions.md)<br />[![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](https://aka.ms/awesome-copilot/install/instructions?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fnextjs-tailwind.instructions.md)<br />[![Install in VS Code Insiders](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](https://aka.ms/awesome-copilot/install/instructions?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fnextjs-tailwind.instructions.md) | Next.js 15+ App Router and Tailwind CSS v4 development standards |
 | [Next.js Best Practices for LLMs (2026)](../instructions/nextjs.instructions.md)<br />[![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](https://aka.ms/awesome-copilot/install/instructions?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fnextjs.instructions.md)<br />[![Install in VS Code Insiders](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](https://aka.ms/awesome-copilot/install/instructions?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fnextjs.instructions.md) | Best practices for building Next.js (App Router) apps with modern caching, tooling, and server/client boundaries (aligned with Next.js 16.1.1). |
 | [No Heredoc File Operations](../instructions/no-heredoc.instructions.md)<br />[![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](https://aka.ms/awesome-copilot/install/instructions?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fno-heredoc.instructions.md)<br />[![Install in VS Code Insiders](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](https://aka.ms/awesome-copilot/install/instructions?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fno-heredoc.instructions.md) | Prevents terminal heredoc file corruption in VS Code Copilot by enforcing use of file editing tools instead of shell redirections |
 | [Object Calisthenics Rules](../instructions/object-calisthenics.instructions.md)<br />[![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](https://aka.ms/awesome-copilot/install/instructions?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fobject-calisthenics.instructions.md)<br />[![Install in VS Code Insiders](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](https://aka.ms/awesome-copilot/install/instructions?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fobject-calisthenics.instructions.md) | Enforces Object Calisthenics principles for business domain code to ensure clean, maintainable, and robust code |

@@ -1,72 +1,93 @@
 ---
-description: 'Next.js + Tailwind development standards and instructions'
-applyTo: '**/*.tsx, **/*.ts, **/*.jsx, **/*.js, **/*.css'
+description: 'Next.js 15+ App Router and Tailwind CSS v4 development standards'
+applyTo: 'app/**/*.{ts,tsx,js,jsx}, src/app/**/*.{ts,tsx,js,jsx}, components/**/*.{ts,tsx,js,jsx}'
 ---
 
-# Next.js + Tailwind Development Instructions
+# Next.js 15+ and Tailwind CSS v4 Development Instructions
 
-Instructions for high-quality Next.js applications with Tailwind CSS styling and TypeScript.
+Technical standards and guidelines for building production-ready Next.js applications using the App Router, React 19, and Tailwind CSS v4.
 
 ## Project Context
 
-- Latest Next.js (App Router)
-- TypeScript for type safety
-- Tailwind CSS for styling
-
-## Development Standards
-
-### Architecture
-- App Router with server and client components
-- Group routes by feature/domain
-- Implement proper error boundaries
-- Use React Server Components by default
-- Leverage static optimization where possible
-
-### TypeScript
-- Strict mode enabled
-- Clear type definitions
-- Proper error handling with type guards
-- Zod for runtime type validation
-
-### Styling
-- Tailwind CSS with consistent color palette
-- Responsive design patterns
-- Dark mode support
-- Follow container queries best practices
-- Maintain semantic HTML structure
-
-### State Management
-- React Server Components for server state
-- React hooks for client state
-- Proper loading and error states
-- Optimistic updates where appropriate
-
-### Data Fetching
-- Server Components for direct database queries
-- React Suspense for loading states
-- Proper error handling and retry logic
-- Cache invalidation strategies
-
-### Security
-- Input validation and sanitization
-- Proper authentication checks
-- CSRF protection
-- Rate limiting implementation
-- Secure API route handling
-
-### Performance
-- Image optimization with next/image
-- Font optimization with next/font
-- Route prefetching
-- Proper code splitting
-- Bundle size optimization
-
-## Implementation Process
-1. Plan component hierarchy
-2. Define types and interfaces
-3. Implement server-side logic
-4. Build client components
-5. Add proper error handling
-6. Implement responsive styling
-7. Add loading states
-8. Write tests
+- Next.js 15+ (App Router)
+- React 19 (Server Components by default)
+- TypeScript (Strict Mode)
+- Tailwind CSS v4 (CSS-first configuration)
+
+## Core Architectural Standards
+
+### 1. Server and Client Component Boundaries
+- Treat all components inside `app/` as React Server Components (RSC) by default.
+- Place `'use client'` only at the boundary of interactive leaf nodes (event handlers, browser APIs, React client state).
+- Keep data fetching, secrets, and database access strictly on the server.
+- Pass server data to client components as serializable props.
+
+### 2. Asynchronous Request APIs (Next.js 15+)
+- In Next.js 15+, `params`, `searchParams`, `cookies()`, and `headers()` are asynchronous and must be awaited.
+- Standard page signature:
+  ```typescript
+  interface PageProps {
+    params: Promise<{ id: string }>;
+    searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
+  }
+
+  export default async function Page({ params, searchParams }: PageProps) {
+    const { id } = await params;
+    const { query } = await searchParams;
+    // render logic
+  }
+  ```
+- Server Action and Route Handler context:
+  ```typescript
+  import { cookies, headers } from 'next/headers';
+
+  export async function getSession() {
+    const cookieStore = await cookies();
+    const token = cookieStore.get('session_token')?.value;
+    return token;
+  }
+  ```
+
+### 3. Caching and Revalidation
+- Next.js 15 defaults `fetch` requests and `GET` Route Handlers to uncached (`cache: 'no-store'`).
+- Explicitly declare cache strategies when static caching or ISR is required:
+  ```typescript
+  // Static cached fetch
+  const res = await fetch('https://api.example.com/data', {
+    cache: 'force-cache',
+    next: { revalidate: 3600, tags: ['resource-tag'] },
+  });
+  ```
+- Invalidate caches deterministically using `revalidatePath` or `revalidateTag` inside Server Actions.
+
+### 4. Server Actions and Forms (React 19)
+- Declare mutation actions in dedicated server files with `'use server'` or inline inside Server Components.
+- Use React 19 `useActionState` instead of deprecated `useFormState`.
+- Maintain validation safety using Zod or standard schema parsers on all form data before database writes.
+
+## Tailwind CSS v4 Guidelines
+
+### 1. CSS-First Configuration
+- Do not generate `tailwind.config.js`. Tailwind CSS v4 uses native CSS imports and directives in the root stylesheet (e.g. `globals.css`):
+  ```css
+  @import "tailwindcss";
+
+  @theme {
+    --color-brand-primary: #0969da;
+    --color-brand-muted: #57606a;
+    --font-sans: var(--font-inter), system-ui, sans-serif;
+  }
+  ```
+
+### 2. Utility Class Conventions
+- Use Tailwind v4 standard utilities: `size-*` for equal width and height (`size-4` instead of `w-4 h-4`).
+- Support system dark mode with `dark:` variants.
+- Rely on native CSS container queries (`@container` and `@min-[...]`) for responsive components rather than viewport-only breakpoints where modularity matters.
+- Never write inline arbitrary values when a design token exists.
+
+## Performance and Reliability
+
+- Image optimization: Always use `next/image` with explicit `width`, `height`, and `sizes`. Add `priority` for Above-the-Fold Largest Contentful Paint (LCP) images.
+- Font optimization: Load web fonts through `next/font/google` or `next/font/local` using CSS variables to prevent layout shifts.
+- Route boundaries: Colocate `loading.tsx` for React Suspense fallbacks and `error.tsx` (client component) for error isolation.
+- Type safety: Keep strict TypeScript enabled with no implicit `any` in props, API outputs, or form action states.