sf-lwc

sf-lwc：Lightning Web Components 开发

当用户需要 Lightning Web Components 时使用此技能：LWC bundle、wire 模式、Apex/GraphQL 集成、SLDS 2 样式、无障碍功能、性能优化或 Jest 单元测试。

此技能适用的任务

当工作涉及以下内容时，使用 sf-lwc：

• lwc/**/*.js、.html、.css、.js-meta.xml
• 组件脚手架和 bundle 设计
• wire 服务、Apex 集成、GraphQL 集成
• SLDS 2、深色模式和无障碍功能
• LWC 的 Jest 单元测试

当用户要进行以下工作时，委派给其他技能：

• 优先编写 Apex 控制器或业务逻辑 → sf-apex
• 构建 Flow XML，而不是 LWC 屏幕组件 → sf-flow
• 部署元数据 → sf-deploy

---

首先收集所需上下文

询问或推断：

• 组件用途和目标界面
• 数据源：LDS、Apex、GraphQL、LMS，或通过 Apex 访问的外部系统
• 用户是否需要测试
• 组件是否必须在 Flow、App Builder、Experience Cloud 或仪表板上下文中运行
• 无障碍和样式方面的预期

---

推荐工作流

1. 选择合适的架构

采用 PICKLES 思路：

• 原型设计
• 集成合适的数据源
• 组合组件边界
• 定义交互模型
• 使用平台库
• 优化执行
• 强制实施安全性

2. 选择合适的数据访问模式

需求	默认模式
单记录 UI	LDS / getRecord
简单 CRUD 表单	基础记录表单组件
复杂服务器查询	Apex @AuraEnabled(cacheable=true)
相关图数据	GraphQL wire 适配器
跨 DOM 通信	Lightning Message Service

3. 适用时从素材开始

使用提供的素材来构建：

• 基础组件 bundle
• 数据表
• 模态框模式
• Flow 屏幕组件
• GraphQL 组件
• LMS 消息通道
• Jest 测试
• 启用 TypeScript 的组件

4. 验证前端质量

检查：

• 无障碍功能
• 是否符合 SLDS 2 / 深色模式要求
• 事件契约
• 性能 / 重新渲染安全性
• 必要时检查 Jest 覆盖率

5. 交接支持性的后端或部署工作

使用：

• sf-apex 编写控制器 / 服务
• sf-deploy 进行部署
• sf-testing 仅用于 Apex 端测试流程，不用于 Jest

---

高优先级规则

• 优先使用平台基础组件，而不是重新实现控件
• 对响应式只读场景使用 @wire；对显式操作和 DML 路径使用命令式调用
• 不要引入缺乏无障碍支持的自定义 UI
• 避免硬编码颜色；使用兼容 SLDS 2 的样式钩子 / 变量
• 避免在 renderedCallback() 中造成重新渲染循环
• 保持组件通信模式明确且精简

---

输出格式

完成时，按以下顺序报告：

1. 创建或更新的组件
2. 所选的数据访问模式
3. 变更的文件
4. 无障碍 / 样式 / 测试说明
5. 下一步实现或部署步骤

建议格式：

LWC work: <summary>
Pattern: <wire / apex / graphql / lms / flow-screen>
Files: <paths>
Quality: <a11y, SLDS2, dark mode, Jest>
Next step: <deploy, add controller, or run tests>

---

本地开发服务器

无需部署，即可通过热重载在本地预览 LWC 组件：

# Preview LWC components in isolation
sf lightning dev component --target-org <alias>

# Preview a Lightning Experience app locally
sf lightning dev app --target-org <alias>

# Preview an Experience Cloud site locally
sf lightning dev site --target-org <alias>

在当前版本的 SF CLI 中，这些 Local Dev 命令会在首次运行时即时安装。它们是长时间运行的进程，会打开带有实时预览的浏览器。对 .js、.html 和 .css 文件的更改会立即自动重新加载。需要连接到活动 org，才能访问数据并进行 Apex 调用。

---

跨技能集成

需求	委派给	原因
Apex 控制器或服务	sf-apex	后端逻辑
嵌入 Flow 屏幕	sf-flow	声明式编排
部署组件 bundle	sf-deploy	org 发布
创建消息通道等元数据	sf-metadata	支持性元数据

---

参考索引

从这里开始

• references/component-patterns.md
• references/slds-design-guide.md
• references/lwc-best-practices.md
• references/scoring-and-testing.md
• references/jest-testing.md

无障碍 / 性能 / 状态

• references/accessibility-guide.md
• references/performance-guide.md
• references/state-management.md
• references/template-anti-patterns.md

集成 / 高级功能

• references/lms-guide.md
• references/flow-integration-guide.md
• references/advanced-features.md
• references/async-notification-patterns.md
• references/triangle-pattern.md
• assets/

---

评分指南

分数	含义
150+	可用于生产环境的 LWC 包
125–149	优秀组件，仅需少量润色
100–124	功能可用，但建议进行审查
< 100	需要大幅改进