mcpField
E
experience-lwc-generate

experience-lwc-generate

github.com/forcedotcom开发1.1k6.2k 次安装1 天前更新
代码仓库

关于 experience-lwc-generate

面向 Salesforce Lightning Web Components 开发的技能，适用于构建组件、集成数据源及完善前端质量。提供组件模式与模板，并涵盖 SLDS 2、无障碍、性能和 Jest 测试。

主要功能

  1. 01搭建 Lightning Web Components 组件
  2. 02集成 LDS、Apex、GraphQL 与 LMS
  3. 03使用 SLDS 2 并处理深色模式
  4. 04检查无障碍性和渲染性能
  5. 05编写 Jest 单元测试
  6. 06本地预览组件并热重载

适用场景

  1. 01构建 Salesforce 记录界面或表单
  2. 02制作 Flow 屏幕组件
  3. 03为组件添加 GraphQL 或消息服务
  4. 04验证组件的无障碍性与 Jest 测试

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/forcedotcom/sf-skills --skill experience-lwc-generate

安装后在 Claude Code 中输入/experience-lwc-generate确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

assets/apex-controller/
LwcController.cls
assets/basic-component/
basicComponent.css
basicComponent.html
basicComponent.js
basicComponent.js-meta.xml
assets/datatable-component/
datatableComponent.html
datatableComponent.js
assets/flow-screen-component/
flowScreenComponent.css
flowScreenComponent.html
flowScreenComponent.js
flowScreenComponent.js-meta.xml
assets/form-component/
formComponent.html
formComponent.js
assets/graphql-component/
graphqlComponent.html
graphqlComponent.js
assets/jest-test/
componentName.test.js.example
assets/message-channel/
lmsPublisher.js
lmsSubscriber.js
RecordSelected.messageChannel-meta.xml
assets/modal-component/
modalComponent.html
modalComponent.js
assets/record-picker/
recordPicker.html
recordPicker.js
assets/state-store/
store.js
assets/typescript-component/
typescriptComponent.css
typescriptComponent.html
typescriptComponent.js-meta.xml
typescriptComponent.test.ts.example
typescriptComponent.ts
assets/workspace-api/
workspaceComponent.html

详细介绍

experience-lwc-generate：Lightning Web Components 开发

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

此技能负责的任务

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

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

以下情况应委派给其他技能：

首先需要收集的上下文

询问或推断：

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

推荐工作流

1. 选择合适的架构

采用 PICKLES 思路：

  • 构建原型
  • 集成合适的数据源
  • 组合组件边界
  • 定义交互模型
  • 使用平台库
  • 优化执行
  • 强制实施安全措施
2. 选择合适的数据访问模式
需求默认模式
单记录 UILDS / getRecord
简单 CRUD 表单基础记录表单组件
复杂服务端查询Apex @AuraEnabled(cacheable=true)
相关图数据GraphQL wire adapter
跨 DOM 通信Lightning Message Service
3. 适用时从资源开始

使用提供的资源来构建：

  • 基础组件 bundle
  • 数据表
  • 模态框模式
  • Flow 屏幕组件
  • GraphQL 组件
  • LMS 消息通道
  • Jest 测试
  • 启用 TypeScript 的组件
4. 验证前端质量

检查：

  • 无障碍支持
  • 是否符合 SLDS 2 / 深色模式规范
  • 事件约定
  • 性能 / 重新渲染安全性
  • 所需的 Jest 覆盖率
5. 移交辅助后端或部署工作

使用：

高优先级规则

  • 优先使用平台基础组件，不要重复造控件
  • 对响应式只读用例使用 @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 组件，无需部署。运行 scripts/local-dev-preview.sh 中的命令，为组件、应用或 Experience Cloud 站点启动本地开发会话。

Local Dev 命令会在首次运行时按需安装。这些命令会启动长期运行的进程，并在浏览器中打开实时预览。对 .js、.html 和 .css 文件的更改会立即自动重新加载。数据和 Apex 调用需要有效的 org 连接。

跨技能集成

需求委派给原因
Apex 控制器或服务platform-apex-generate后端逻辑
嵌入 Flow 屏幕automation-flow-generate声明式编排
部署组件包platform-metadata-deploy组织部署
创建支持性元数据（消息通道、对象）platform-metadata-deploy元数据部署

参考文件索引

从这里开始
无障碍 / 性能 / 状态
集成 / 高级功能
资源模板
脚本

评分指南

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

评论

支持 Markdown