π¨ CRITICAL GUIDELINES
Windows File Path Requirements
MANDATORY: Always Use Backslashes on Windows for File Paths
When using Edit or Write tools on Windows, you MUST use backslashes (
) in file paths, NOT forward slashes (/
).
Examples:
-
β WRONG: D:/repos/project/file.tsx
-
β CORRECT: D:\repos\project\file.tsx
This applies to:
-
Edit tool file_path parameter
-
Write tool file_path parameter
-
All file operations on Windows systems
Documentation Guidelines
NEVER create new documentation files unless explicitly requested by the user.
-
Priority: Update existing README.md files rather than creating new documentation
-
Repository cleanliness: Keep repository root clean - only README.md unless user requests otherwise
-
Style: Documentation should be concise, direct, and professional - avoid AI-generated tone
-
User preference: Only create additional .md files when user specifically asks for documentation
Lightning Web Components 2025 Features
lightning/graphql Module (Winter '26)
New module replaces deprecated lightning/uiGraphQLApi :
Migration
// β Old (deprecated) import { gql, graphql } from 'lightning/uiGraphQLApi';
// β New (Winter '26) import { gql, graphql } from 'lightning/graphql';
export default class MyComponent extends LightningElement {
@wire(graphql, {
query: gql query getAccount($id: ID!) { uiapi { query { Account(where: { Id: { eq: $id } }) { edges { node { Id Name Industry } } } } } } ,
variables: '$variables'
})
results;
get variables() { return { id: this.recordId }; } }
Benefits
-
Improved performance
-
Better error handling
-
Enhanced type safety
-
Future-proof API
Local Development (sf lightning dev component)
Run LWC components locally without deploying:
Start local dev server
sf lightning dev component
Opens browser at http://localhost:3333
Live reload on file changes
No deployment needed
Faster development cycle
Specify component
sf lightning dev component -n myComponent
Specify target org
sf lightning dev component -o myOrg@example.com
Benefits:
-
Instant feedback (no deployment wait)
-
Debug in real browser DevTools
-
Hot module replacement
-
Work offline
Platform Module Access in Component Preview
Access platform modules in single component preview:
// Works in local preview now import { getRecord } from 'lightning/uiRecordApi'; import { ShowToastEvent } from 'lightning/platformShowToastEvent'; import { NavigationMixin } from 'lightning/navigation';
// Previously required full org deployment // Now works in sf lightning dev component
Agentforce Targets (Winter '26)
New LWC targets for AI agents:
<!-- meta.xml --> <targets> <!-- Input component for Agentforce --> <target>lightning__AgentforceInput</target>
<!-- Output component for Agentforce --> <target>lightning__AgentforceOutput</target> </targets>
// agentInputComponent.js import { LightningElement, api } from 'lwc';
export default class AgentInputComponent extends LightningElement { @api agentContext; // Provided by Agentforce
handleSubmit() { const userInput = this.template.querySelector('input').value; // Send to Agentforce this.dispatchEvent(new CustomEvent('agentinput', { detail: { input: userInput } })); } }
Lightning Out 2.0 (GA Winter '26)
Re-imagined embedding with web components:
Traditional Lightning Out (Legacy)
<script src="https://MyDomain.lightning.force.com/lightning/lightning.out.js"></script> <script> $Lightning.use("c:myApp", function() { $Lightning.createComponent("c:myComponent", { recordId: "001..." }, "lightningContainer", function(cmp) { /* callback */ } ); }); </script> <div id="lightningContainer"></div>
Lightning Out 2.0 (Modern)
<!-- Standards-based web components --> <script src="https://MyDomain.lightning.force.com/c/myComponent.js" type="module"></script>
<!-- Use as web component --> <c-my-component record-id="001..." ></c-my-component>
<!-- No Aura dependency --> <!-- Powered by LWR (Lightning Web Runtime) --> <!-- Lighter and faster -->
Benefits:
-
50-70% smaller bundle size
-
Faster load times
-
Standards-based (no proprietary framework)
-
Better browser compatibility
-
Simplified integration
SLDS 2.0 with Dark Mode (GA Winter '26)
Salesforce Lightning Design System 2.0:
/* Dark mode support in custom themes */ :host([data-theme="dark"]) { --lwc-colorBackground: #16325c; --lwc-colorTextPrimary: #ffffff; --lwc-brandPrimary: #1589ee; }
/* Light mode */ :host([data-theme="light"]) { --lwc-colorBackground: #ffffff; --lwc-colorTextPrimary: #181818; --lwc-brandPrimary: #0176d3; }
// Toggle dark mode export default class ThemeToggle extends LightningElement { handleThemeChange(event) { const theme = event.target.checked ? 'dark' : 'light'; this.template.host.setAttribute('data-theme', theme); } }
SLDS Linter with Fix Option
Install SLDS linter
npm install -D @salesforce-ux/slds-linter
Lint with auto-fix
npx slds-linter --fix src/
CI/CD integration
npx slds-linter src/ --format json > slds-report.json
Unified Testing APIs (Winter '26)
Test Discovery and Test Runner APIs unify Apex and Flow testing:
// Discover all tests Test.DiscoveryResult discovery = Test.discoverTests();
// Get Apex tests List<Test.ApexTestInfo> apexTests = discovery.getApexTests();
// Get Flow tests List<Test.FlowTestInfo> flowTests = discovery.getFlowTests();
// Run all tests from single location Test.RunResult result = Test.runTests(discovery);
// Check results System.debug('Apex passed: ' + result.getApexTestsPassed()); System.debug('Flow passed: ' + result.getFlowTestsPassed());
Benefits:
-
Unified test execution
-
Single test report
-
Simplified CI/CD
-
Better test orchestration
Lightning Web Security Enhancements
New security protections with API distortions:
// Additional secure protections automatically applied export default class SecureComponent extends LightningElement { connectedCallback() { // Web APIs now include security distortions // ESLint rules validate distortion compliance
// Example: Secure window access
const secureWindow = window; // LWS-secured reference
} }
ESLint Rules for Security
// .eslintrc.json { "extends": ["@salesforce/eslint-config-lwc/recommended"], "rules": { "@lwc/lwc/no-inner-html": "error", "@lwc/lwc/no-document-query": "error", "@salesforce/lwc-security/no-unsafe-references": "error" } }
Practical Migration Examples
GraphQL Module Update
// Before (Winter '25) import { gql, graphql } from 'lightning/uiGraphQLApi';
@wire(graphql, { query: gql... })
results;
// After (Winter '26) import { gql, graphql } from 'lightning/graphql';
@wire(graphql, { query: gql... })
results;
Local Development Workflow
Old workflow (deploy every change)
sf project deploy start
Wait 30-60 seconds
Test in org
Repeat...
New workflow (instant feedback)
sf lightning dev component
Changes reflect immediately
No deployment
Test in local browser
Deploy only when ready
Embedding with Lightning Out 2.0
<!-- Old (Lightning Out 1.0) --> <script src="/lightning/lightning.out.js"></script> <script> $Lightning.use("c:app", function() { $Lightning.createComponent("c:comp", {}, "div", callback); }); </script>
<!-- New (Lightning Out 2.0) --> <script src="/c/comp.js" type="module"></script> <c-comp></c-comp>
Resources
-
Lightning Web Components Dev Guide
-
Winter '26 Release Notes
-
SLDS 2.0
-
Lightning Out 2.0