Salesforce Lightning Web Components Winter '26 and 2025 features
/plugin marketplace add JosiahSiegel/claude-plugin-marketplace/plugin install salesforce-master@claude-plugin-marketplaceThis skill inherits all available tools. When active, it can use any tool Claude has access to.
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:
D:/repos/project/file.tsxD:\repos\project\file.tsxThis applies to:
NEVER create new documentation files unless explicitly requested by the user.
New module replaces deprecated lightning/uiGraphQLApi:
// ❌ 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 };
}
}
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:
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
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 }
}));
}
}
Re-imagined embedding with web components:
<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>
<!-- 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:
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);
}
}
# 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
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:
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
}
}
// .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"
}
}
// 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;
# 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
<!-- 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>
This skill should be used when the user asks to "create a slash command", "add a command", "write a custom command", "define command arguments", "use command frontmatter", "organize commands", "create command with file references", "interactive command", "use AskUserQuestion in command", or needs guidance on slash command structure, YAML frontmatter fields, dynamic arguments, bash execution in commands, user interaction patterns, or command development best practices for Claude Code.
This skill should be used when the user asks to "create an agent", "add an agent", "write a subagent", "agent frontmatter", "when to use description", "agent examples", "agent tools", "agent colors", "autonomous agent", or needs guidance on agent structure, system prompts, triggering conditions, or agent development best practices for Claude Code plugins.
This skill should be used when the user asks to "create a hook", "add a PreToolUse/PostToolUse/Stop hook", "validate tool use", "implement prompt-based hooks", "use ${CLAUDE_PLUGIN_ROOT}", "set up event-driven automation", "block dangerous commands", or mentions hook events (PreToolUse, PostToolUse, Stop, SubagentStop, SessionStart, SessionEnd, UserPromptSubmit, PreCompact, Notification). Provides comprehensive guidance for creating and implementing Claude Code plugin hooks with focus on advanced prompt-based hooks API.