From fabc2986dcf395800c4a91d53d4401367e033a66 Mon Sep 17 00:00:00 2001
From: Abbas Jafry <abbas.4042@gmail.com>
Date: Wed, 31 Dec 2025 03:50:09 +0530
Subject: [PATCH 1/9] Added instructions for Salesforce LWC development

---
 docs/README.instructions.md      |   1 +
 instructions/lwc.instructions.md | 349 +++++++++++++++++++++++++++++++
 2 files changed, 350 insertions(+)
 create mode 100644 instructions/lwc.instructions.md

diff --git a/docs/README.instructions.md b/docs/README.instructions.md
index 4101f66b3..10b97d60e 100644
--- a/docs/README.instructions.md
+++ b/docs/README.instructions.md
@@ -96,6 +96,7 @@ Team and project-specific instructions to enhance GitHub Copilot's behavior for
 | [Kubernetes Deployment Best Practices](../instructions/kubernetes-deployment-best-practices.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%2Fkubernetes-deployment-best-practices.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%2Fkubernetes-deployment-best-practices.instructions.md) | Comprehensive best practices for deploying and managing applications on Kubernetes. Covers Pods, Deployments, Services, Ingress, ConfigMaps, Secrets, health checks, resource limits, scaling, and security contexts. |
 | [LangChain Python Instructions](../instructions/langchain-python.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%2Flangchain-python.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%2Flangchain-python.instructions.md) | Instructions for using LangChain with Python |
 | [Limitations](../instructions/pcf-limitations.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%2Fpcf-limitations.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%2Fpcf-limitations.instructions.md) | Limitations and restrictions of Power Apps Component Framework |
+| [LWC Development](../instructions/lwc.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%2Flwc.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%2Flwc.instructions.md) | Guidelines and best practices for developing Lightning Web Components (LWC) on Salesforce Platform. |
 | [Makefile Development Instructions](../instructions/makefile.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%2Fmakefile.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%2Fmakefile.instructions.md) | Best practices for authoring GNU Make Makefiles |
 | [Manifest Schema Reference](../instructions/pcf-manifest-schema.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%2Fpcf-manifest-schema.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%2Fpcf-manifest-schema.instructions.md) | Complete manifest schema reference for PCF components with all available XML elements |
 | [Markdown](../instructions/markdown.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%2Fmarkdown.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%2Fmarkdown.instructions.md) | Documentation and content creation standards |
diff --git a/instructions/lwc.instructions.md b/instructions/lwc.instructions.md
new file mode 100644
index 000000000..7316752fc
--- /dev/null
+++ b/instructions/lwc.instructions.md
@@ -0,0 +1,349 @@
+---
+description: Guidelines and best practices for developing Lightning Web Components (LWC) on Salesforce Platform.
+applyTo: 'force-app/main/default/lwc/**'
+
+---
+
+# LWC Development
+
+## General Instructions
+
+- Each LWC should reside in its own folder under `force-app/main/default/lwc/`.
+- The folder name should match the component name (e.g., `myComponent` for `myComponent`).
+- Each component folder should contain the following files:
+    - `myComponent.html`: The HTML template file.
+    - `myComponent.js`: The JavaScript controller file.
+    - `myComponent.js-meta.xml`: The metadata configuration file.
+    - Optional: `myComponent.css` for component-specific styles.
+    - Optional: `myComponent.test.js` for Jest unit tests.
+
+## Development Best Practices
+### Component Design
+- **Single Responsibility**: Each component should have a single, well-defined purpose.
+- **Reusability**: Design components to be reusable across different parts of the application.
+- **Composition**: Prefer composing smaller components into larger ones rather than creating monolithic components.
+- **Public API**: Use `@api` decorators to expose properties and methods that need to be accessed by parent components.
+- **Private State**: Use `@track` for reactive properties that are internal to the component.
+
+### Performance Optimization
+- **Lazy Loading**: Load components only when needed to improve initial load times.
+- **Efficient Rendering**: Minimize DOM updates by batching changes and using conditional rendering.
+- **Avoid Unnecessary Re-renders**: Use getters and setters wisely to prevent unnecessary re-renders.
+- **Use Lightning Data Service (LDS)**: Prefer LDS for data access to leverage built-in caching and performance optimizations.
+
+### Security Considerations
+- **Sanitize Inputs**: Always sanitize user inputs to prevent XSS attacks.
+- **Use `@wire`**: Prefer using `@wire` for data access to ensure security and compliance with Salesforce's security model.
+- **Avoid Direct DOM Manipulation**: Use LWC's reactive properties and templates instead of manipulating the DOM directly.
+# Lightning Web Component (LWC) Development Best Practices
+
+## Core Principles
+
+### 1. Use Lightning Components Over HTML Tags
+Always prefer Lightning Web Component library components over plain HTML elements for consistency, accessibility, and future-proofing.
+
+#### ✅ Recommended Approach
+```html
+<!-- Use Lightning components -->
+<lightning-button label="Save" variant="brand" onclick={handleSave}></lightning-button>
+<lightning-input type="text" label="Name" value={name} onchange={handleNameChange}></lightning-input>
+<lightning-combobox label="Type" options={typeOptions} value={selectedType}></lightning-combobox>
+<lightning-radio-group name="duration" label="Duration" options={durationOptions} value={duration} type="radio"></lightning-radio-group>
+```
+
+#### ❌ Avoid Plain HTML
+```html
+<!-- Avoid these -->
+<button onclick={handleSave}>Save</button>
+<input type="text" onchange={handleNameChange} />
+<select onchange={handleTypeChange}>
+    <option value="option1">Option 1</option>
+</select>
+```
+
+### 2. Lightning Component Mapping Guide
+
+| HTML Element | Lightning Component | Key Attributes |
+|--------------|-------------------|----------------|
+| `<button>` | `<lightning-button>` | `variant`, `label`, `icon-name` |
+| `<input>` | `<lightning-input>` | `type`, `label`, `variant` |
+| `<select>` | `<lightning-combobox>` | `options`, `value`, `placeholder` |
+| `<textarea>` | `<lightning-textarea>` | `label`, `max-length` |
+| `<input type="checkbox">` | `<lightning-input type="checkbox">` | `checked`, `label` |
+| `<input type="radio">` | `<lightning-radio-group>` | `options`, `type`, `name` |
+| `<input type="toggle">` | `<lightning-input type="toggle">` | `checked`, `variant` |
+| Custom pills | `<lightning-pill>` | `label`, `name`, `onremove` |
+| Icons | `<lightning-icon>` | `icon-name`, `size`, `variant` |
+
+### 3. SLDS2 Design System Compliance
+
+#### Use SLDS Utility Classes
+Always use Salesforce Lightning Design System utility classes with the `slds-var-` prefix for modern implementations:
+
+```html
+<!-- Spacing -->
+<div class="slds-var-m-around_medium slds-var-p-top_large">
+    <div class="slds-var-m-bottom_small">Content</div>
+</div>
+
+<!-- Layout -->
+<div class="slds-grid slds-wrap slds-gutters_small">
+    <div class="slds-col slds-size_1-of-2 slds-medium-size_1-of-3">
+        <!-- Content -->
+    </div>
+</div>
+
+<!-- Typography -->
+<h2 class="slds-text-heading_medium slds-var-m-bottom_small">Section Title</h2>
+<p class="slds-text-body_regular">Description text</p>
+```
+
+#### SLDS Component Patterns
+```html
+<!-- Card Layout -->
+<article class="slds-card slds-var-m-around_medium">
+    <header class="slds-card__header">
+        <h2 class="slds-text-heading_small">Card Title</h2>
+    </header>
+    <div class="slds-card__body slds-card__body_inner">
+        <!-- Card content -->
+    </div>
+    <footer class="slds-card__footer">
+        <!-- Card actions -->
+    </footer>
+</article>
+
+<!-- Form Layout -->
+<div class="slds-form slds-form_stacked">
+    <div class="slds-form-element">
+        <lightning-input label="Field Label" value={fieldValue}></lightning-input>
+    </div>
+</div>
+```
+
+### 4. Avoid Custom CSS
+
+#### ✅ Use SLDS Classes
+```html
+<!-- Color and theming -->
+<div class="slds-theme_success slds-text-color_inverse slds-var-p-around_small">
+    Success message
+</div>
+
+<div class="slds-theme_error slds-text-color_inverse slds-var-p-around_small">
+    Error message
+</div>
+
+<div class="slds-theme_warning slds-text-color_inverse slds-var-p-around_small">
+    Warning message
+</div>
+```
+
+#### ❌ Avoid Custom CSS
+```css
+/* Don't create custom styles that override SLDS */
+.custom-button {
+    background-color: red;
+    padding: 10px;
+}
+
+.my-special-layout {
+    display: flex;
+    justify-content: center;
+}
+```
+
+#### When Custom CSS is Necessary
+If you must use custom CSS, follow these guidelines:
+- Use CSS custom properties (design tokens) when possible
+- Prefix custom classes to avoid conflicts
+- Never override SLDS base classes
+
+```css
+/* Custom CSS example */
+.my-component-special {
+    border-radius: var(--lwc-borderRadiusMedium);
+    box-shadow: var(--lwc-shadowButton);
+}
+```
+
+### 5. Component Architecture Best Practices
+
+#### Reactive Properties
+```javascript
+import { LightningElement, track, api } from 'lwc';
+
+export default class MyComponent extends LightningElement {
+    // Use @api for public properties
+    @api recordId;
+    @api title;
+
+    // Use @track sparingly - prefer reactive properties
+    @track complexObject = {};
+
+    // Simple reactive properties (no decorator needed)
+    name = '';
+    isLoading = false;
+
+    // Computed properties
+    get displayName() {
+        return this.name ? `Hello, ${this.name}` : 'Hello, Guest';
+    }
+}
+```
+
+#### Event Handling Patterns
+```javascript
+// Custom event dispatch
+handleSave() {
+    const saveEvent = new CustomEvent('save', {
+        detail: {
+            recordData: this.recordData,
+            timestamp: new Date()
+        }
+    });
+    this.dispatchEvent(saveEvent);
+}
+
+// Lightning component event handling
+handleInputChange(event) {
+    const fieldName = event.target.name;
+    const fieldValue = event.target.value;
+
+    // For lightning-input, lightning-combobox, etc.
+    this[fieldName] = fieldValue;
+}
+
+handleRadioChange(event) {
+    // For lightning-radio-group
+    this.selectedValue = event.detail.value;
+}
+
+handleToggleChange(event) {
+    // For lightning-input type="toggle"
+    this.isToggled = event.detail.checked;
+}
+```
+
+### 6. Data Handling and Wire Services
+
+#### Use @wire for Data Access
+```javascript
+import { getRecord } from 'lightning/uiRecordApi';
+import { getObjectInfo } from 'lightning/uiObjectInfoApi';
+
+export default class MyComponent extends LightningElement {
+    @api recordId;
+
+    @wire(getRecord, { recordId: '$recordId', fields: FIELDS })
+    record;
+
+    @wire(getObjectInfo, { objectApiName: 'Account' })
+    objectInfo;
+
+    get recordData() {
+        return this.record.data ? this.record.data.fields : {};
+    }
+}
+```
+
+### 7. Error Handling and User Experience
+
+#### Implement Proper Error Boundaries
+```javascript
+import { ShowToastEvent } from 'lightning/platformShowToastEvent';
+
+export default class MyComponent extends LightningElement {
+    isLoading = false;
+    error = null;
+
+    async handleAsyncOperation() {
+        this.isLoading = true;
+        this.error = null;
+
+        try {
+            const result = await this.performOperation();
+            this.showSuccessToast();
+        } catch (error) {
+            this.error = error;
+            this.showErrorToast(error.body?.message || 'An error occurred');
+        } finally {
+            this.isLoading = false;
+        }
+    }
+
+    showSuccessToast() {
+        const event = new ShowToastEvent({
+            title: 'Success',
+            message: 'Operation completed successfully',
+            variant: 'success'
+        });
+        this.dispatchEvent(event);
+    }
+
+    showErrorToast(message) {
+        const event = new ShowToastEvent({
+            title: 'Error',
+            message: message,
+            variant: 'error',
+            mode: 'sticky'
+        });
+        this.dispatchEvent(event);
+    }
+}
+```
+
+### 8. Performance Optimization
+
+#### Conditional Rendering
+```html
+<!-- Use template directives for conditional rendering -->
+<template if:true={isLoading}>
+    <lightning-spinner alternative-text="Loading..."></lightning-spinner>
+</template>
+
+<template if:false={isLoading}>
+    <template for:each={items} for:item="item">
+        <div key={item.id} class="slds-var-m-bottom_small">
+            {item.name}
+        </div>
+    </template>
+</template>
+
+<template if:true={error}>
+    <div class="slds-theme_error slds-text-color_inverse slds-var-p-around_small">
+        {error.message}
+    </div>
+</template>
+```
+
+### 9. Accessibility Best Practices
+
+#### Use Proper ARIA Labels and Semantic HTML
+```html
+<!-- Use semantic structure -->
+<section aria-label="Product Selection">
+    <h2 class="slds-text-heading_medium">Products</h2>
+
+    <lightning-input
+        type="search"
+        label="Search Products"
+        placeholder="Enter product name..."
+        aria-describedby="search-help">
+    </lightning-input>
+
+    <div id="search-help" class="slds-assistive-text">
+        Type to filter the product list
+    </div>
+</section>
+```
+
+## Common Anti-Patterns to Avoid
+
+1. **❌ Direct DOM Manipulation**: Never use `document.querySelector()` or similar
+2. **❌ jQuery or External Libraries**: Avoid non-Lightning compatible libraries
+3. **❌ Inline Styles**: Use SLDS classes instead of `style` attributes
+4. **❌ Global CSS**: All styles should be scoped to the component
+5. **❌ Hardcoded Values**: Use custom labels, custom metadata, or constants
+6. **❌ Imperative API Calls**: Prefer `@wire` over imperative `import` calls when possible
+7. **❌ Memory Leaks**: Always clean up event listeners in `disconnectedCallback()`

From f253456fd714c6fa8a15d872581b707e0a0f1292 Mon Sep 17 00:00:00 2001
From: Abbas Jafry <abbas.4042@gmail.com>
Date: Wed, 31 Dec 2025 03:57:25 +0530
Subject: [PATCH 2/9] Updated instruction file

---
 instructions/lwc.instructions.md | 23 +++++++++++------------
 1 file changed, 11 insertions(+), 12 deletions(-)

diff --git a/instructions/lwc.instructions.md b/instructions/lwc.instructions.md
index 7316752fc..65795d383 100644
--- a/instructions/lwc.instructions.md
+++ b/instructions/lwc.instructions.md
@@ -42,7 +42,7 @@ applyTo: 'force-app/main/default/lwc/**'
 ### 1. Use Lightning Components Over HTML Tags
 Always prefer Lightning Web Component library components over plain HTML elements for consistency, accessibility, and future-proofing.
 
-#### ✅ Recommended Approach
+#### Recommended Approach
 ```html
 <!-- Use Lightning components -->
 <lightning-button label="Save" variant="brand" onclick={handleSave}></lightning-button>
@@ -51,7 +51,7 @@ Always prefer Lightning Web Component library components over plain HTML element
 <lightning-radio-group name="duration" label="Duration" options={durationOptions} value={duration} type="radio"></lightning-radio-group>
 ```
 
-#### ❌ Avoid Plain HTML
+#### Avoid Plain HTML
 ```html
 <!-- Avoid these -->
 <button onclick={handleSave}>Save</button>
@@ -123,7 +123,7 @@ Always use Salesforce Lightning Design System utility classes with the `slds-var
 
 ### 4. Avoid Custom CSS
 
-#### ✅ Use SLDS Classes
+#### Use SLDS Classes
 ```html
 <!-- Color and theming -->
 <div class="slds-theme_success slds-text-color_inverse slds-var-p-around_small">
@@ -139,7 +139,7 @@ Always use Salesforce Lightning Design System utility classes with the `slds-var
 </div>
 ```
 
-#### ❌ Avoid Custom CSS
+#### Avoid Custom CSS
 ```css
 /* Don't create custom styles that override SLDS */
 .custom-button {
@@ -339,11 +339,10 @@ export default class MyComponent extends LightningElement {
 ```
 
 ## Common Anti-Patterns to Avoid
-
-1. **❌ Direct DOM Manipulation**: Never use `document.querySelector()` or similar
-2. **❌ jQuery or External Libraries**: Avoid non-Lightning compatible libraries
-3. **❌ Inline Styles**: Use SLDS classes instead of `style` attributes
-4. **❌ Global CSS**: All styles should be scoped to the component
-5. **❌ Hardcoded Values**: Use custom labels, custom metadata, or constants
-6. **❌ Imperative API Calls**: Prefer `@wire` over imperative `import` calls when possible
-7. **❌ Memory Leaks**: Always clean up event listeners in `disconnectedCallback()`
+1. **Direct DOM Manipulation**: Never use `document.querySelector()` or similar
+2. **jQuery or External Libraries**: Avoid non-Lightning compatible libraries
+3. **Inline Styles**: Use SLDS classes instead of `style` attributes
+4. **Global CSS**: All styles should be scoped to the component
+5. **Hardcoded Values**: Use custom labels, custom metadata, or constants
+6. **Imperative API Calls**: Prefer `@wire` over imperative `import` calls when possible
+7. **Memory Leaks**: Always clean up event listeners in `disconnectedCallback()`

From 996a3571cfe4056eb7aeac85b7b383216c72b872 Mon Sep 17 00:00:00 2001
From: Abbas Jafry <abbas.4042@gmail.com>
Date: Wed, 31 Dec 2025 09:12:34 +0530
Subject: [PATCH 3/9] Updated instructions

---
 instructions/lwc.instructions.md | 40 ++++++++------------------------
 1 file changed, 10 insertions(+), 30 deletions(-)

diff --git a/instructions/lwc.instructions.md b/instructions/lwc.instructions.md
index 65795d383..6d87af9a6 100644
--- a/instructions/lwc.instructions.md
+++ b/instructions/lwc.instructions.md
@@ -1,6 +1,6 @@
 ---
-description: Guidelines and best practices for developing Lightning Web Components (LWC) on Salesforce Platform.
-applyTo: 'force-app/main/default/lwc/**'
+description: "Guidelines and best practices for developing Lightning Web Components (LWC) on Salesforce Platform."
+applyTo: "force-app/main/default/lwc/**"
 
 ---
 
@@ -17,26 +17,6 @@ applyTo: 'force-app/main/default/lwc/**'
     - Optional: `myComponent.css` for component-specific styles.
     - Optional: `myComponent.test.js` for Jest unit tests.
 
-## Development Best Practices
-### Component Design
-- **Single Responsibility**: Each component should have a single, well-defined purpose.
-- **Reusability**: Design components to be reusable across different parts of the application.
-- **Composition**: Prefer composing smaller components into larger ones rather than creating monolithic components.
-- **Public API**: Use `@api` decorators to expose properties and methods that need to be accessed by parent components.
-- **Private State**: Use `@track` for reactive properties that are internal to the component.
-
-### Performance Optimization
-- **Lazy Loading**: Load components only when needed to improve initial load times.
-- **Efficient Rendering**: Minimize DOM updates by batching changes and using conditional rendering.
-- **Avoid Unnecessary Re-renders**: Use getters and setters wisely to prevent unnecessary re-renders.
-- **Use Lightning Data Service (LDS)**: Prefer LDS for data access to leverage built-in caching and performance optimizations.
-
-### Security Considerations
-- **Sanitize Inputs**: Always sanitize user inputs to prevent XSS attacks.
-- **Use `@wire`**: Prefer using `@wire` for data access to ensure security and compliance with Salesforce's security model.
-- **Avoid Direct DOM Manipulation**: Use LWC's reactive properties and templates instead of manipulating the DOM directly.
-# Lightning Web Component (LWC) Development Best Practices
-
 ## Core Principles
 
 ### 1. Use Lightning Components Over HTML Tags
@@ -139,7 +119,7 @@ Always use Salesforce Lightning Design System utility classes with the `slds-var
 </div>
 ```
 
-#### Avoid Custom CSS
+#### Avoid Custom CSS (Anti-Pattern)
 ```css
 /* Don't create custom styles that override SLDS */
 .custom-button {
@@ -339,10 +319,10 @@ export default class MyComponent extends LightningElement {
 ```
 
 ## Common Anti-Patterns to Avoid
-1. **Direct DOM Manipulation**: Never use `document.querySelector()` or similar
-2. **jQuery or External Libraries**: Avoid non-Lightning compatible libraries
-3. **Inline Styles**: Use SLDS classes instead of `style` attributes
-4. **Global CSS**: All styles should be scoped to the component
-5. **Hardcoded Values**: Use custom labels, custom metadata, or constants
-6. **Imperative API Calls**: Prefer `@wire` over imperative `import` calls when possible
-7. **Memory Leaks**: Always clean up event listeners in `disconnectedCallback()`
+- **Direct DOM Manipulation**: Never use `document.querySelector()` or similar
+- **jQuery or External Libraries**: Avoid non-Lightning compatible libraries
+- **Inline Styles**: Use SLDS classes instead of `style` attributes
+- **Global CSS**: All styles should be scoped to the component
+- **Hardcoded Values**: Use custom labels, custom metadata, or constants
+- **Imperative API Calls**: Prefer `@wire` over imperative `import` calls when possible
+- **Memory Leaks**: Always clean up event listeners in `disconnectedCallback()`

From 0acc20a0792f32c67dccb63ff30c6c181f9bc952 Mon Sep 17 00:00:00 2001
From: Abbas <abbas.4042@gmail.com>
Date: Wed, 31 Dec 2025 09:21:37 +0530
Subject: [PATCH 4/9] Update instructions/lwc.instructions.md

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 instructions/lwc.instructions.md | 1 -
 1 file changed, 1 deletion(-)

diff --git a/instructions/lwc.instructions.md b/instructions/lwc.instructions.md
index 6d87af9a6..8d144837d 100644
--- a/instructions/lwc.instructions.md
+++ b/instructions/lwc.instructions.md
@@ -1,7 +1,6 @@
 ---
 description: "Guidelines and best practices for developing Lightning Web Components (LWC) on Salesforce Platform."
 applyTo: "force-app/main/default/lwc/**"
-
 ---
 
 # LWC Development

From 751e36650e0aa40937c718ca2c8e81cdf5e05e74 Mon Sep 17 00:00:00 2001
From: Abbas Jafry <abbas.4042@gmail.com>
Date: Wed, 31 Dec 2025 09:34:16 +0530
Subject: [PATCH 5/9] Copilot suggestion updated

---
 instructions/lwc.instructions.md | 25 ++++++++++++-------------
 1 file changed, 12 insertions(+), 13 deletions(-)

diff --git a/instructions/lwc.instructions.md b/instructions/lwc.instructions.md
index 6d87af9a6..a53e78576 100644
--- a/instructions/lwc.instructions.md
+++ b/instructions/lwc.instructions.md
@@ -1,7 +1,6 @@
 ---
-description: "Guidelines and best practices for developing Lightning Web Components (LWC) on Salesforce Platform."
-applyTo: "force-app/main/default/lwc/**"
-
+description: 'Guidelines and best practices for developing Lightning Web Components (LWC) on Salesforce Platform.'
+applyTo: 'force-app/main/default/lwc/**'
 ---
 
 # LWC Development
@@ -9,7 +8,7 @@ applyTo: "force-app/main/default/lwc/**"
 ## General Instructions
 
 - Each LWC should reside in its own folder under `force-app/main/default/lwc/`.
-- The folder name should match the component name (e.g., `myComponent` for `myComponent`).
+- The folder name should match the component name (e.g., `myComponent` folder for the `myComponent` component).
 - Each component folder should contain the following files:
     - `myComponent.html`: The HTML template file.
     - `myComponent.js`: The JavaScript controller file.
@@ -276,25 +275,25 @@ export default class MyComponent extends LightningElement {
 ### 8. Performance Optimization
 
 #### Conditional Rendering
+Prefer `lwc:if`, `lwc:elseif` and `lwc:else` for conditional rendering (API v58.0+). Legacy `if:true` / `if:false` are still supported but should be avoided in new components.
+
 ```html
 <!-- Use template directives for conditional rendering -->
-<template if:true={isLoading}>
+<template lwc:if={isLoading}>
     <lightning-spinner alternative-text="Loading..."></lightning-spinner>
 </template>
-
-<template if:false={isLoading}>
+<template lwc:elseif={error}>
+    <div class="slds-theme_error slds-text-color_inverse slds-var-p-around_small">
+        {error.message}
+    </div>
+</template>
+<template lwc:else>
     <template for:each={items} for:item="item">
         <div key={item.id} class="slds-var-m-bottom_small">
             {item.name}
         </div>
     </template>
 </template>
-
-<template if:true={error}>
-    <div class="slds-theme_error slds-text-color_inverse slds-var-p-around_small">
-        {error.message}
-    </div>
-</template>
 ```
 
 ### 9. Accessibility Best Practices

From 2d36943446aee120ce52c3a150bbaa8b8e39c940 Mon Sep 17 00:00:00 2001
From: Abbas Jafry <abbas.4042@gmail.com>
Date: Wed, 31 Dec 2025 09:49:01 +0530
Subject: [PATCH 6/9] Updated instructions to more specific examples for
 decorators

---
 instructions/lwc.instructions.md | 105 ++++++++++++++++++++++++++++---
 1 file changed, 98 insertions(+), 7 deletions(-)

diff --git a/instructions/lwc.instructions.md b/instructions/lwc.instructions.md
index a53e78576..336a4a5e0 100644
--- a/instructions/lwc.instructions.md
+++ b/instructions/lwc.instructions.md
@@ -54,7 +54,7 @@ Always prefer Lightning Web Component library components over plain HTML element
 | Custom pills | `<lightning-pill>` | `label`, `name`, `onremove` |
 | Icons | `<lightning-icon>` | `icon-name`, `size`, `variant` |
 
-### 3. SLDS2 Design System Compliance
+### 3. Lightning Design System Compliance
 
 #### Use SLDS Utility Classes
 Always use Salesforce Lightning Design System utility classes with the `slds-var-` prefix for modern implementations:
@@ -157,17 +157,89 @@ export default class MyComponent extends LightningElement {
     @api recordId;
     @api title;
 
-    // Use @track sparingly - prefer reactive properties
-    @track complexObject = {};
-
-    // Simple reactive properties (no decorator needed)
-    name = '';
-    isLoading = false;
+    // Primitive properties (string, number, boolean) are automatically reactive
+    // No decorator needed - reassignment triggers re-render
+    simpleValue = 'initial';
+    count = 0;
 
     // Computed properties
     get displayName() {
         return this.name ? `Hello, ${this.name}` : 'Hello, Guest';
     }
+
+    // @track is NOT needed for simple property reassignment
+    // This will trigger reactivity automatically:
+    handleUpdate() {
+      this.simpleValue = 'updated'; // Reactive without @track
+      this.count++; // Reactive without @track
+    }
+
+    // @track IS needed when mutating nested properties without reassignment
+    @track complexData = {
+      user: {
+        name: 'John',
+        preferences: {
+          theme: 'dark'
+        }
+      }
+    };
+
+    handleDeepUpdate() {
+      // Requires @track because we're mutating a nested property
+      this.complexData.user.preferences.theme = 'light';
+    }
+
+    // BETTER: Avoid @track by using immutable patterns
+    regularData = {
+      user: {
+        name: 'John',
+        preferences: {
+          theme: 'dark'
+        }
+      }
+    };
+
+    handleImmutableUpdate() {
+      // No @track needed - we're creating a new object reference
+      this.regularData = {
+        ...this.regularData,
+        user: {
+          ...this.regularData.user,
+          preferences: {
+            ...this.regularData.user.preferences,
+            theme: 'light'
+          }
+        }
+      };
+    }
+
+    // Arrays: @track is needed only for mutating methods
+    @track items = ['a', 'b', 'c'];
+
+    handleArrayMutation() {
+      // Requires @track
+      this.items.push('d');
+      this.items[0] = 'z';
+    }
+
+    // BETTER: Use immutable array operations
+    regularItems = ['a', 'b', 'c'];
+
+    handleImmutableArray() {
+      // No @track needed
+      this.regularItems = [...this.regularItems, 'd'];
+      this.regularItems = this.regularItems.map((item, idx) =>
+        idx === 0 ? 'z' : item
+      );
+    }
+
+    // Use @track only for complex objects/arrays when you mutate nested properties.
+    // For example, updating complexObject.details.status without reassigning complexObject.
+    @track complexObject = {
+      details: {
+        status: 'new'
+      }
+    };
 }
 ```
 
@@ -296,6 +368,25 @@ Prefer `lwc:if`, `lwc:elseif` and `lwc:else` for conditional rendering (API v58.
 </template>
 ```
 
+```html
+<!-- Legacy approach (avoid in new components) -->
+<template if:true={isLoading}>
+    <lightning-spinner alternative-text="Loading..."></lightning-spinner>
+</template>
+<template if:true={error}>
+    <div class="slds-theme_error slds-text-color_inverse slds-var-p-around_small">
+        {error.message}
+    </div>
+</template>
+<template if:false={isLoading} if:false={error}>
+    <template for:each={items} for:item="item">
+        <div key={item.id} class="slds-var-m-bottom_small">
+            {item.name}
+        </div>
+    </template>
+</template>
+```
+
 ### 9. Accessibility Best Practices
 
 #### Use Proper ARIA Labels and Semantic HTML

From 01c9be7c082429804a63203c7f4522e59fb3d7a4 Mon Sep 17 00:00:00 2001
From: Abbas Jafry <abbas.4042@gmail.com>
Date: Wed, 31 Dec 2025 09:57:31 +0530
Subject: [PATCH 7/9] Updated example codes

---
 instructions/lwc.instructions.md | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/instructions/lwc.instructions.md b/instructions/lwc.instructions.md
index 336a4a5e0..3675b0da2 100644
--- a/instructions/lwc.instructions.md
+++ b/instructions/lwc.instructions.md
@@ -283,6 +283,8 @@ handleToggleChange(event) {
 import { getRecord } from 'lightning/uiRecordApi';
 import { getObjectInfo } from 'lightning/uiObjectInfoApi';
 
+const FIELDS = ['Account.Name', 'Account.Industry', 'Account.AnnualRevenue'];
+
 export default class MyComponent extends LightningElement {
     @api recordId;
 
@@ -323,6 +325,10 @@ export default class MyComponent extends LightningElement {
         }
     }
 
+    performOperation() {
+      // Developer-defined async operation
+    }
+
     showSuccessToast() {
         const event = new ShowToastEvent({
             title: 'Success',
@@ -378,12 +384,14 @@ Prefer `lwc:if`, `lwc:elseif` and `lwc:else` for conditional rendering (API v58.
         {error.message}
     </div>
 </template>
-<template if:false={isLoading} if:false={error}>
+<template if:false={isLoading}>
+  <template if:false={error}>
     <template for:each={items} for:item="item">
         <div key={item.id} class="slds-var-m-bottom_small">
             {item.name}
         </div>
     </template>
+  </template>
 </template>
 ```
 

From 2cff1e2589bb313385c010363ca5ac5e2baae4e5 Mon Sep 17 00:00:00 2001
From: Abbas <abbas.4042@gmail.com>
Date: Wed, 31 Dec 2025 10:01:00 +0530
Subject: [PATCH 8/9] Update instructions/lwc.instructions.md

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 instructions/lwc.instructions.md | 28 ++++++++++++++--------------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/instructions/lwc.instructions.md b/instructions/lwc.instructions.md
index 3675b0da2..d146b5606 100644
--- a/instructions/lwc.instructions.md
+++ b/instructions/lwc.instructions.md
@@ -170,33 +170,33 @@ export default class MyComponent extends LightningElement {
     // @track is NOT needed for simple property reassignment
     // This will trigger reactivity automatically:
     handleUpdate() {
-      this.simpleValue = 'updated'; // Reactive without @track
-      this.count++; // Reactive without @track
+        this.simpleValue = 'updated'; // Reactive without @track
+        this.count++; // Reactive without @track
     }
 
     // @track IS needed when mutating nested properties without reassignment
     @track complexData = {
-      user: {
-        name: 'John',
-        preferences: {
-          theme: 'dark'
+        user: {
+            name: 'John',
+            preferences: {
+                theme: 'dark'
+            }
         }
-      }
     };
 
     handleDeepUpdate() {
-      // Requires @track because we're mutating a nested property
-      this.complexData.user.preferences.theme = 'light';
+        // Requires @track because we're mutating a nested property
+        this.complexData.user.preferences.theme = 'light';
     }
 
     // BETTER: Avoid @track by using immutable patterns
     regularData = {
-      user: {
-        name: 'John',
-        preferences: {
-          theme: 'dark'
+        user: {
+            name: 'John',
+            preferences: {
+                theme: 'dark'
+            }
         }
-      }
     };
 
     handleImmutableUpdate() {

From 5e941719dd111106bb775b57608902429b8d3072 Mon Sep 17 00:00:00 2001
From: Abbas <abbas.4042@gmail.com>
Date: Wed, 31 Dec 2025 10:01:21 +0530
Subject: [PATCH 9/9] Update instructions/lwc.instructions.md

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 instructions/lwc.instructions.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/instructions/lwc.instructions.md b/instructions/lwc.instructions.md
index d146b5606..2c4f2e280 100644
--- a/instructions/lwc.instructions.md
+++ b/instructions/lwc.instructions.md
@@ -326,7 +326,7 @@ export default class MyComponent extends LightningElement {
     }
 
     performOperation() {
-      // Developer-defined async operation
+        // Developer-defined async operation
     }
 
     showSuccessToast() {