重要前提
安装AI Skills的关键前提是:必须科学上网,且开启TUN模式,这一点至关重要,直接决定安装能否顺利完成,在此郑重提醒三遍:科学上网,科学上网,科学上网。查看完整安装教程 →
lightning-2025-features by josiahsiegel/claude-plugin-marketplace
npx skills add https://github.com/josiahsiegel/claude-plugin-marketplace --skill lightning-2025-features强制规定:在 Windows 上始终对文件路径使用反斜杠
在 Windows 上使用编辑或写入工具时,您必须在文件路径中使用反斜杠(\),而不是正斜杠(/)。
示例:
D:/repos/project/file.tsxD:\repos\project\file.tsx这适用于:
除非用户明确要求,否则切勿创建新的文档文件。
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
新模块取代已弃用的 lightning/uiGraphQLApi:
// ❌ 旧版(已弃用)
import { gql, graphql } from 'lightning/uiGraphQLApi';
// ✅ 新版(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 };
}
}
无需部署即可在本地运行 LWC 组件:
# 启动本地开发服务器
sf lightning dev component
# 在 http://localhost:3333 打开浏览器
# 文件更改时实时重新加载
# 无需部署
# 更快的开发周期
# 指定组件
sf lightning dev component -n myComponent
# 指定目标组织
sf lightning dev component -o myOrg@example.com
优势:
在单个组件预览中访问平台模块:
// 现在可在本地预览中工作
import { getRecord } from 'lightning/uiRecordApi';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import { NavigationMixin } from 'lightning/navigation';
// 以前需要完整的组织部署
// 现在可在 sf lightning dev component 中工作
用于 AI 代理的新 LWC 目标:
<!-- meta.xml -->
<targets>
<!-- Agentforce 的输入组件 -->
<target>lightning__AgentforceInput</target>
<!-- Agentforce 的输出组件 -->
<target>lightning__AgentforceOutput</target>
</targets>
// agentInputComponent.js
import { LightningElement, api } from 'lwc';
export default class AgentInputComponent extends LightningElement {
@api agentContext; // 由 Agentforce 提供
handleSubmit() {
const userInput = this.template.querySelector('input').value;
// 发送到 Agentforce
this.dispatchEvent(new CustomEvent('agentinput', {
detail: { input: userInput }
}));
}
}
使用 Web 组件重新构想的嵌入方式:
<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>
<!-- 基于标准的 Web 组件 -->
<script src="https://MyDomain.lightning.force.com/c/myComponent.js" type="module"></script>
<!-- 作为 Web 组件使用 -->
<c-my-component record-id="001..." ></c-my-component>
<!-- 无 Aura 依赖 -->
<!-- 由 LWR(Lightning Web Runtime)驱动 -->
<!-- 更轻量、更快速 -->
优势:
Salesforce Lightning Design System 2.0:
/* 自定义主题中的深色模式支持 */
:host([data-theme="dark"]) {
--lwc-colorBackground: #16325c;
--lwc-colorTextPrimary: #ffffff;
--lwc-brandPrimary: #1589ee;
}
/* 浅色模式 */
:host([data-theme="light"]) {
--lwc-colorBackground: #ffffff;
--lwc-colorTextPrimary: #181818;
--lwc-brandPrimary: #0176d3;
}
// 切换深色模式
export default class ThemeToggle extends LightningElement {
handleThemeChange(event) {
const theme = event.target.checked ? 'dark' : 'light';
this.template.host.setAttribute('data-theme', theme);
}
}
# 安装 SLDS 代码检查器
npm install -D @salesforce-ux/slds-linter
# 使用自动修复功能进行检查
npx slds-linter --fix src/
# CI/CD 集成
npx slds-linter src/ --format json > slds-report.json
测试发现和测试运行器 API 统一了 Apex 和 Flow 测试:
// 发现所有测试
Test.DiscoveryResult discovery = Test.discoverTests();
// 获取 Apex 测试
List<Test.ApexTestInfo> apexTests = discovery.getApexTests();
// 获取 Flow 测试
List<Test.FlowTestInfo> flowTests = discovery.getFlowTests();
// 从单一位置运行所有测试
Test.RunResult result = Test.runTests(discovery);
// 检查结果
System.debug('Apex passed: ' + result.getApexTestsPassed());
System.debug('Flow passed: ' + result.getFlowTestsPassed());
优势:
通过 API 扭曲实现新的安全保护:
// 自动应用额外的安全保护
export default class SecureComponent extends LightningElement {
connectedCallback() {
// Web API 现在包含安全扭曲
// ESLint 规则验证扭曲合规性
// 示例:安全的 window 访问
const secureWindow = window; // LWS 安全引用
}
}
// .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"
}
}
// 之前(Winter '25)
import { gql, graphql } from 'lightning/uiGraphQLApi';
@wire(graphql, { query: gql`...` })
results;
// 之后(Winter '26)
import { gql, graphql } from 'lightning/graphql';
@wire(graphql, { query: gql`...` })
results;
# 旧工作流(每次更改都部署)
sf project deploy start
# 等待 30-60 秒
# 在组织中测试
# 重复...
# 新工作流(即时反馈)
sf lightning dev component
# 更改立即反映
# 无需部署
# 在本地浏览器中测试
# 仅在准备就绪时部署
<!-- 旧版(Lightning Out 1.0) -->
<script src="/lightning/lightning.out.js"></script>
<script>
$Lightning.use("c:app", function() {
$Lightning.createComponent("c:comp", {}, "div", callback);
});
</script>
<!-- 新版(Lightning Out 2.0) -->
<script src="/c/comp.js" type="module"></script>
<c-comp></c-comp>
每周安装次数
59
仓库
GitHub 星标数
21
首次出现
2026年1月24日
安全审计
安装于
claude-code48
gemini-cli45
opencode45
codex42
cursor40
antigravity38
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>
Weekly Installs
59
Repository
GitHub Stars
21
First Seen
Jan 24, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykWarn
Installed on
claude-code48
gemini-cli45
opencode45
codex42
cursor40
antigravity38
React 组合模式指南:Vercel 组件架构最佳实践,提升代码可维护性
123,700 周安装