Enhance GitHub Copilot starter prompt with TypeScript and React coding standards

prompts/github-copilot-starter.prompt.md

@@ -186,19 +186,26 @@ Use this frontmatter structure for all files:
 **Instructions (.instructions.md):**
 ```yaml
 ---
-applyTo: ["**/*.{ext}"]
+applyTo: "**/*.ts,**/*.tsx"
-description: "Description of what this instruction covers"
-tags: ["language", "framework", "best-practices"]
 ---
-```
+# 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']
+tools: ['githubRepo', 'codebase']
-description: 'Brief description of the prompt purpose'
+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: Generate an implementation plan for new features or refactoring existing code.
-description: 'Description of the specialized mode'
+tools: ['codebase', 'fetch', 'findTestFiles', 'githubRepo', 'search', 'usages']
-instructions: 'Link to relevant instruction files'
+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