Merge branch 'main' into new-prompt-github-actions-workflow-specifcation

README.md

@@ -36,6 +36,7 @@ Team and project-specific instructions to enhance GitHub Copilot's behavior for
 | [DevOps Core Principles](instructions/devops-core-principles.instructions.md) | Foundational instructions covering core DevOps principles, culture (CALMS), and key metrics (DORA) to guide GitHub Copilot in understanding and promoting effective software delivery. | [![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](https://vscode.dev/redirect?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fdevops-core-principles.instructions.md) [![Install in VS Code](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](https://insiders.vscode.dev/redirect?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fdevops-core-principles.instructions.md) |
 | [DDD Systems & .NET Guidelines](instructions/dotnet-architecture-good-practices.instructions.md) | DDD and .NET architecture guidelines | [![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](https://vscode.dev/redirect?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fdotnet-architecture-good-practices.instructions.md) [![Install in VS Code](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](https://insiders.vscode.dev/redirect?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fdotnet-architecture-good-practices.instructions.md) |
 | [.NET MAUI](instructions/dotnet-maui.instructions.md) | .NET MAUI component and application patterns | [![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](https://vscode.dev/redirect?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fdotnet-maui.instructions.md) [![Install in VS Code](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](https://insiders.vscode.dev/redirect?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fdotnet-maui.instructions.md) |
+| [.NET WPF](instructions/dotnet-wpf.instructions.md) | .NET WPF component and application patterns | [![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](https://vscode.dev/redirect?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fdotnet-wpf.instructions.md) [![Install in VS Code](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](https://insiders.vscode.dev/redirect?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fdotnet-wpf.instructions.md) |
 | [Genaiscript](instructions/genaiscript.instructions.md) | AI-powered script generation guidelines | [![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](https://vscode.dev/redirect?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fgenaiscript.instructions.md) [![Install in VS Code](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](https://insiders.vscode.dev/redirect?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fgenaiscript.instructions.md) |
 | [Generate Modern Terraform Code For Azure](instructions/generate-modern-terraform-code-for-azure.instructions.md) | Guidelines for generating modern Terraform code for Azure | [![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](https://vscode.dev/redirect?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fgenerate-modern-terraform-code-for-azure.instructions.md) [![Install in VS Code](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](https://insiders.vscode.dev/redirect?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fgenerate-modern-terraform-code-for-azure.instructions.md) |
 | [Gilfoyle Code Review Instructions](instructions/gilfoyle-code-review.instructions.md) | Gilfoyle-style code review instructions that channel the sardonic technical supremacy of Silicon Valley's most arrogant systems architect. | [![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](https://vscode.dev/redirect?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fgilfoyle-code-review.instructions.md) [![Install in VS Code](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](https://insiders.vscode.dev/redirect?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fgilfoyle-code-review.instructions.md) |
@@ -50,6 +51,7 @@ Team and project-specific instructions to enhance GitHub Copilot's behavior for
 | [Memory Bank](instructions/memory-bank.instructions.md) | Bank specific coding standards and best practices | [![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](https://vscode.dev/redirect?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fmemory-bank.instructions.md) [![Install in VS Code](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](https://insiders.vscode.dev/redirect?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fmemory-bank.instructions.md) |
 | [MS-SQL DBA Chat Mode Instructions](instructions/ms-sql-dba.instructions.md) | Instructions for customizing GitHub Copilot behavior for MS-SQL DBA chat mode. | [![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](https://vscode.dev/redirect?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fms-sql-dba.instructions.md) [![Install in VS Code](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](https://insiders.vscode.dev/redirect?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fms-sql-dba.instructions.md) |
 | [Next.js + Tailwind Development Instructions](instructions/nextjs-tailwind.instructions.md) | Next.js + Tailwind development standards and instructions | [![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](https://vscode.dev/redirect?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fnextjs-tailwind.instructions.md) [![Install in VS Code](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](https://insiders.vscode.dev/redirect?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fnextjs-tailwind.instructions.md) |
+| [Next.js Best Practices for LLMs (2025)](instructions/nextjs.instructions.md) | (2025) specific coding standards and best practices | [![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](https://vscode.dev/redirect?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fnextjs.instructions.md) [![Install in VS Code](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](https://insiders.vscode.dev/redirect?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fnextjs.instructions.md) |
 | [Code Generation Guidelines](instructions/nodejs-javascript-vitest.instructions.md) | Guidelines for writing Node.js and JavaScript code with Vitest testing | [![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](https://vscode.dev/redirect?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fnodejs-javascript-vitest.instructions.md) [![Install in VS Code](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](https://insiders.vscode.dev/redirect?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fnodejs-javascript-vitest.instructions.md) |
 | [Performance Optimization Best Practices](instructions/performance-optimization.instructions.md) | The most comprehensive, practical, and engineer-authored performance optimization instructions for all languages, frameworks, and stacks. Covers frontend, backend, and database best practices with actionable guidance, scenario-based checklists, troubleshooting, and pro tips. | [![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](https://vscode.dev/redirect?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fperformance-optimization.instructions.md) [![Install in VS Code](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](https://insiders.vscode.dev/redirect?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fperformance-optimization.instructions.md) |
 | [Playwright Typescript](instructions/playwright-typescript.instructions.md) | Playwright test generation instructions | [![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](https://vscode.dev/redirect?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fplaywright-typescript.instructions.md) [![Install in VS Code](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](https://insiders.vscode.dev/redirect?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fplaywright-typescript.instructions.md) |

chatmodes/implementation-plan.chatmode.md

@@ -63,6 +63,10 @@ All implementation plans must strictly adhere to the following template. Each se
 - Tables must include all required columns with specific task details
 - No placeholder text may remain in the final output
 
+## Status
+
+The status of the implementation plan must be clearly defined in the front matter and must reflect the current state of the plan. The status can be one of the following (status_color in brackets): `Completed` (bright green badge), `In progress` (yellow badge), `Planned` (blue badge), `Deprecated` (red badge), or `On Hold` (orange badge). It should also be displayed as a badge in the introduction section.
+
 ```md
 ---
 goal: [Concise Title Describing the Package Plan's Goal]
@@ -70,11 +74,14 @@ version: [Optional: e.g., 1.0, Date]
 date_created: [YYYY-MM-DD]
 last_updated: [Optional: YYYY-MM-DD]
 owner: [Optional: Team/Individual responsible for this spec]
+status: 'Completed'|'In progress'|'Planned'|'Deprecated'|'On Hold'
 tags: [Optional: List of relevant tags or categories, e.g., `feature`, `upgrade`, `chore`, `architecture`, `migration`, `bug` etc]
 ---
 
 # Introduction
 
+![Status: <status>](https://img.shields.io/badge/status-<status>-<status_color>)
+
 [A short concise introduction to the plan and the goal it is intended to achieve.]
 
 ## 1. Requirements & Constraints

instructions/dotnet-wpf.instructions.md

@@ -0,0 +1,79 @@
+---
+description: '.NET WPF component and application patterns'
+applyTo: '**/*.xaml, **/*.cs'
+---
+
+## Summary
+
+These instructions guide GitHub Copilot to assist with building high-quality, maintainable, and performant WPF applications using the MVVM pattern. It includes best practices for XAML, data binding, UI responsiveness, and .NET performance.
+
+## Ideal project types
+
+- Desktop applications using C# and WPF
+- Applications following the MVVM (Model-View-ViewModel) design pattern
+- Projects using .NET 8.0 or later
+- UI components built in XAML
+- Solutions emphasizing performance and responsiveness
+
+## Goals
+
+- Generate boilerplate for `INotifyPropertyChanged` and `RelayCommand`
+- Suggest clean separation of ViewModel and View logic
+- Encourage use of `ObservableCollection<T>`, `ICommand`, and proper binding
+- Recommend performance tips (e.g., virtualization, async loading)
+- Avoid tightly coupling code-behind logic
+- Produce testable ViewModels
+
+## Example prompt behaviors
+
+### ✅ Good Suggestions
+- "Generate a ViewModel for a login screen with properties for username and password, and a LoginCommand"
+- "Write a XAML snippet for a ListView that uses UI virtualization and binds to an ObservableCollection"
+- "Refactor this code-behind click handler into a RelayCommand in the ViewModel"
+- "Add a loading spinner while fetching data asynchronously in WPF"
+
+### ❌ Avoid
+- Suggesting business logic in code-behind
+- Using static event handlers without context
+- Generating tightly coupled XAML without binding
+- Suggesting WinForms or UWP approaches
+
+## Technologies to prefer
+- C# with .NET 8.0+
+- XAML with MVVM structure
+- `CommunityToolkit.Mvvm` or custom `RelayCommand` implementations
+- Async/await for non-blocking UI
+- `ObservableCollection`, `ICommand`, `INotifyPropertyChanged`
+
+## Common Patterns to Follow
+- ViewModel-first binding
+- Dependency Injection using .NET or third-party containers (e.g., Autofac, SimpleInjector)
+- XAML naming conventions (PascalCase for controls, camelCase for bindings)
+- Avoiding magic strings in binding (use `nameof`)
+
+## Sample Instruction Snippets Copilot Can Use
+
+```csharp
+public class MainViewModel : ObservableObject
+{
+    [ObservableProperty]
+    private string userName;
+
+    [ObservableProperty]
+    private string password;
+
+    [RelayCommand]
+    private void Login()
+    {
+        // Add login logic here
+    }
+}
+```
+
+```xml
+<StackPanel>
+    <TextBox Text="{Binding UserName, UpdateSourceTrigger=PropertyChanged}" />
+    <PasswordBox x:Name="PasswordBox" />
+    <Button Content="Login" Command="{Binding LoginCommand}" />
+</StackPanel>
+```

instructions/nextjs.instructions.md

@@ -0,0 +1,143 @@
+---
+applyTo: '**'
+---
+
+# Next.js Best Practices for LLMs (2025)
+
+_Last updated: July 2025_
+
+This document summarizes the latest, authoritative best practices for building, structuring, and maintaining Next.js applications. It is intended for use by LLMs and developers to ensure code quality, maintainability, and scalability.
+
+---
+
+## 1. Project Structure & Organization
+
+- **Use the `app/` directory** (App Router) for all new projects. Prefer it over the legacy `pages/` directory.
+- **Top-level folders:**
+  - `app/` — Routing, layouts, pages, and route handlers
+  - `public/` — Static assets (images, fonts, etc.)
+  - `lib/` — Shared utilities, API clients, and logic
+  - `components/` — Reusable UI components
+  - `contexts/` — React context providers
+  - `styles/` — Global and modular stylesheets
+  - `hooks/` — Custom React hooks
+  - `types/` — TypeScript type definitions
+- **Colocation:** Place files (components, styles, tests) near where they are used, but avoid deeply nested structures.
+- **Route Groups:** Use parentheses (e.g., `(admin)`) to group routes without affecting the URL path.
+- **Private Folders:** Prefix with `_` (e.g., `_internal`) to opt out of routing and signal implementation details.
+
+- **Feature Folders:** For large apps, group by feature (e.g., `app/dashboard/`, `app/auth/`).
+- **Use `src/`** (optional): Place all source code in `src/` to separate from config files.
+
+## 2.1. Server and Client Component Integration (App Router)
+
+**Never use `next/dynamic` with `{ ssr: false }` inside a Server Component.** This is not supported and will cause a build/runtime error.
+
+**Correct Approach:**
+- If you need to use a Client Component (e.g., a component that uses hooks, browser APIs, or client-only libraries) inside a Server Component, you must:
+  1. Move all client-only logic/UI into a dedicated Client Component (with `'use client'` at the top).
+  2. Import and use that Client Component directly in the Server Component (no need for `next/dynamic`).
+  3. If you need to compose multiple client-only elements (e.g., a navbar with a profile dropdown), create a single Client Component that contains all of them.
+
+**Example:**
+
+```tsx
+// Server Component
+import DashboardNavbar from '@/components/DashboardNavbar';
+
+export default async function DashboardPage() {
+  // ...server logic...
+  return (
+    <>
+      <DashboardNavbar /> {/* This is a Client Component */}
+      {/* ...rest of server-rendered page... */}
+    </>
+  );
+}
+```
+
+**Why:**
+- Server Components cannot use client-only features or dynamic imports with SSR disabled.
+- Client Components can be rendered inside Server Components, but not the other way around.
+
+**Summary:**
+Always move client-only UI into a Client Component and import it directly in your Server Component. Never use `next/dynamic` with `{ ssr: false }` in a Server Component.
+
+---
+
+## 2. Component Best Practices
+
+- **Component Types:**
+  - **Server Components** (default): For data fetching, heavy logic, and non-interactive UI.
+  - **Client Components:** Add `'use client'` at the top. Use for interactivity, state, or browser APIs.
+- **When to Create a Component:**
+  - If a UI pattern is reused more than once.
+  - If a section of a page is complex or self-contained.
+  - If it improves readability or testability.
+- **Naming Conventions:**
+  - Use `PascalCase` for component files and exports (e.g., `UserCard.tsx`).
+  - Use `camelCase` for hooks (e.g., `useUser.ts`).
+  - Use `snake_case` or `kebab-case` for static assets (e.g., `logo_dark.svg`).
+  - Name context providers as `XyzProvider` (e.g., `ThemeProvider`).
+- **File Naming:**
+  - Match the component name to the file name.
+  - For single-export files, default export the component.
+  - For multiple related components, use an `index.ts` barrel file.
+- **Component Location:**
+  - Place shared components in `components/`.
+  - Place route-specific components inside the relevant route folder.
+- **Props:**
+  - Use TypeScript interfaces for props.
+  - Prefer explicit prop types and default values.
+- **Testing:**
+  - Co-locate tests with components (e.g., `UserCard.test.tsx`).
+
+## 3. Naming Conventions (General)
+
+- **Folders:** `kebab-case` (e.g., `user-profile/`)
+- **Files:** `PascalCase` for components, `camelCase` for utilities/hooks, `kebab-case` for static assets
+- **Variables/Functions:** `camelCase`
+- **Types/Interfaces:** `PascalCase`
+- **Constants:** `UPPER_SNAKE_CASE`
+
+## 4. API Routes (Route Handlers)
+
+- **Prefer API Routes over Edge Functions** unless you need ultra-low latency or geographic distribution.
+- **Location:** Place API routes in `app/api/` (e.g., `app/api/users/route.ts`).
+- **HTTP Methods:** Export async functions named after HTTP verbs (`GET`, `POST`, etc.).
+- **Request/Response:** Use the Web `Request` and `Response` APIs. Use `NextRequest`/`NextResponse` for advanced features.
+- **Dynamic Segments:** Use `[param]` for dynamic API routes (e.g., `app/api/users/[id]/route.ts`).
+- **Validation:** Always validate and sanitize input. Use libraries like `zod` or `yup`.
+- **Error Handling:** Return appropriate HTTP status codes and error messages.
+- **Authentication:** Protect sensitive routes using middleware or server-side session checks.
+
+## 5. General Best Practices
+
+- **TypeScript:** Use TypeScript for all code. Enable `strict` mode in `tsconfig.json`.
+- **ESLint & Prettier:** Enforce code style and linting. Use the official Next.js ESLint config.
+- **Environment Variables:** Store secrets in `.env.local`. Never commit secrets to version control.
+- **Testing:** Use Jest, React Testing Library, or Playwright. Write tests for all critical logic and components.
+- **Accessibility:** Use semantic HTML and ARIA attributes. Test with screen readers.
+- **Performance:**
+  - Use built-in Image and Font optimization.
+  - Use Suspense and loading states for async data.
+  - Avoid large client bundles; keep most logic in Server Components.
+- **Security:**
+  - Sanitize all user input.
+  - Use HTTPS in production.
+  - Set secure HTTP headers.
+- **Documentation:**
+  - Write clear README and code comments.
+  - Document public APIs and components.
+
+# Avoid Unnecessary Example Files
+
+Do not create example/demo files (like ModalExample.tsx) in the main codebase unless the user specifically requests a live example, Storybook story, or explicit documentation component. Keep the repository clean and production-focused by default.
+
+# Always use the latest documentation and guides
+- For every nextjs related request, begin by searching for the most current nextjs documentation, guides, and examples.
+- Use the following tools to fetch and search documentation if they are available:
+  - `resolve_library_id` to resolve the package/library name in the docs.
+  - `get_library_docs` for up to date documentation.
+
+

prompts/create-implementation-plan.prompt.md

@@ -6,9 +6,11 @@ tools: ['changes', 'codebase', 'editFiles', 'extensions', 'fetch', 'githubRepo',
 # Create Implementation Plan
 
 ## Primary Directive
+
 Your goal is to create a new implementation plan file for `${input:PlanPurpose}`. Your output must be machine-readable, deterministic, and structured for autonomous execution by other AI systems or humans.
 
 ## Execution Context
+
 This prompt is designed for AI-to-AI communication and automated processing. All instructions must be interpreted literally and executed systematically without human interpretation or clarification.
 
 ## Core Requirements
@@ -19,6 +21,7 @@ This prompt is designed for AI-to-AI communication and automated processing. All
 - Ensure complete self-containment with no external dependencies for understanding
 
 ## Plan Structure Requirements
+
 Plans must consist of discrete, atomic phases containing executable tasks. Each phase must be independently processable by AI agents or humans without cross-phase dependencies unless explicitly declared.
 
 ## Phase Architecture
@@ -47,6 +50,7 @@ Plans must consist of discrete, atomic phases containing executable tasks. Each
 - File must be valid Markdown with proper front matter structure
 
 ## Mandatory Template Structure
+
 All implementation plans must strictly adhere to the following template. Each section is required and must be populated with specific, actionable content. AI agents must validate template compliance before execution.
 
 ## Template Validation Rules
@@ -57,6 +61,10 @@ All implementation plans must strictly adhere to the following template. Each se
 - Tables must include all required columns
 - No placeholder text may remain in the final output
 
+## Status
+
+The status of the implementation plan must be clearly defined in the front matter and must reflect the current state of the plan. The status can be one of the following (status_color in brackets): `Completed` (bright green badge), `In progress` (yellow badge), `Planned` (blue badge), `Deprecated` (red badge), or `On Hold` (orange badge). It should also be displayed as a badge in the introduction section.
+
 ```md
 ---
 goal: [Concise Title Describing the Package Implementation Plan's Goal]
@@ -64,11 +72,14 @@ version: [Optional: e.g., 1.0, Date]
 date_created: [YYYY-MM-DD]
 last_updated: [Optional: YYYY-MM-DD]
 owner: [Optional: Team/Individual responsible for this spec]
+status: 'Completed'|'In progress'|'Planned'|'Deprecated'|'On Hold'
 tags: [Optional: List of relevant tags or categories, e.g., `feature`, `upgrade`, `chore`, `architecture`, `migration`, `bug` etc]
 ---
 
 # Introduction
 
+![Status: <status>](https://img.shields.io/badge/status-<status>-<status_color>)
+
 [A short concise introduction to the plan and the goal it is intended to achieve.]
 
 ## 1. Requirements & Constraints

prompts/update-implementation-plan.prompt.md

@@ -61,6 +61,10 @@ All implementation plans must strictly adhere to the following template. Each se
 - Tables must include all required columns
 - No placeholder text may remain in the final output
 
+## Status
+
+The status of the implementation plan must be clearly defined in the front matter and must reflect the current state of the plan. The status can be one of the following (status_color in brackets): `Completed` (bright green badge), `In progress` (yellow badge), `Planned` (blue badge), `Deprecated` (red badge), or `On Hold` (orange badge). It should also be displayed as a badge in the introduction section.
+
 ```md
 ---
 goal: [Concise Title Describing the Package Implementation Plan's Goal]
@@ -68,11 +72,14 @@ version: [Optional: e.g., 1.0, Date]
 date_created: [YYYY-MM-DD]
 last_updated: [Optional: YYYY-MM-DD]
 owner: [Optional: Team/Individual responsible for this spec]
+status: 'Completed'|'In progress'|'Planned'|'Deprecated'|'On Hold'
 tags: [Optional: List of relevant tags or categories, e.g., `feature`, `upgrade`, `chore`, `architecture`, `migration`, `bug` etc]
 ---
 
 # Introduction
 
+![Status: <status>](https://img.shields.io/badge/status-<status>-<status_color>)
+
 [A short concise introduction to the plan and the goal it is intended to achieve.]
 
 ## 1. Requirements & Constraints