From dab45c67c3f91b627f5f5c726b7611fb7b25e16b Mon Sep 17 00:00:00 2001
From: Guillaume <guigui42@users.noreply.github.com>
Date: Sat, 27 Sep 2025 16:24:45 +0200
Subject: [PATCH] Enhance GitHub Copilot starter prompt with TypeScript and
 React coding standards

---
 prompts/github-copilot-starter.prompt.md | 65 ++++++++++++++++++------
 1 file changed, 49 insertions(+), 16 deletions(-)

diff --git a/prompts/github-copilot-starter.prompt.md b/prompts/github-copilot-starter.prompt.md
index b34a315..c800067 100644
--- a/prompts/github-copilot-starter.prompt.md
+++ b/prompts/github-copilot-starter.prompt.md
@@ -186,19 +186,26 @@ Use this frontmatter structure for all files:
 **Instructions (.instructions.md):**
 ```yaml
 ---
-applyTo: ["**/*.{ext}"]
-description: "Description of what this instruction covers"
-tags: ["language", "framework", "best-practices"]
+applyTo: "**/*.ts,**/*.tsx"
 ---
-```
+# Project coding standards for TypeScript and React
+
+Apply the [general coding guidelines](./general-coding.instructions.md) to all code.
+
+## TypeScript Guidelines
+- Use TypeScript for all new code
+- Follow functional programming principles where possible
+- Use interfaces for data structures and type definitions
+- Prefer immutable data (const, readonly)
+- Use optional chaining (?.) and nullish coalescing (??) operators
+
+## React Guidelines
+- Use functional components with hooks
+- Follow the React hooks rules (no conditional hooks)
+- Use React.FC type for components with children
+- Keep components small and focused
+- Use CSS modules for component styling
 
-**Note**: For `code-review.instructions.md`, use:
-```yaml
----
-applyTo: ["**/*"]
-description: "Code review standards and GitHub review guidelines"
-tags: ["code-review", "github", "quality-assurance"]
----
 ```
 
 **Prompts (.prompt.md):**
@@ -206,18 +213,44 @@ tags: ["code-review", "github", "quality-assurance"]
 ---
 mode: 'agent'
 model: Claude Sonnet 4
-tools: ['edit', 'githubRepo', 'changes', 'problems', 'search', 'fetch']
-description: 'Brief description of the prompt purpose'
+tools: ['githubRepo', 'codebase']
+description: 'Generate a new React form component'
 ---
+Your goal is to generate a new React form component based on the templates in #githubRepo contoso/react-templates.
+
+Ask for the form name and fields if not provided.
+
+Requirements for the form:
+* Use form design system components: [design-system/Form.md](../docs/design-system/Form.md)
+* Use `react-hook-form` for form state management:
+* Always define TypeScript types for your form data
+* Prefer *uncontrolled* components using register
+* Use `defaultValues` to prevent unnecessary rerenders
+* Use `yup` for validation:
+* Create reusable validation schemas in separate files
+* Use TypeScript types to ensure type safety
+* Customize UX-friendly validation rules
+
 ```
 
 **Chat Modes (.chatmode.md):**
 ```yaml
 ---
-mode: 'ask'
-description: 'Description of the specialized mode'
-instructions: 'Link to relevant instruction files'
+description: Generate an implementation plan for new features or refactoring existing code.
+tools: ['codebase', 'fetch', 'findTestFiles', 'githubRepo', 'search', 'usages']
+model: Claude Sonnet 4
 ---
+# Planning mode instructions
+You are in planning mode. Your task is to generate an implementation plan for a new feature or for refactoring existing code.
+Don't make any code edits, just generate a plan.
+
+The plan consists of a Markdown document that describes the implementation plan, including the following sections:
+
+* Overview: A brief description of the feature or refactoring task.
+* Requirements: A list of requirements for the feature or refactoring task.
+* Implementation Steps: A detailed list of steps to implement the feature or refactoring task.
+* Testing: A list of tests that need to be implemented to verify the feature or refactoring task.
+
 ```
 
 ## Execution Steps