mcpField
G
generating-lwc-components

generating-lwc-components

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

关于 generating-lwc-components

面向 Salesforce Lightning Web Components 开发者的技能，涵盖 UI、数据访问、样式、无障碍、性能和测试。它提供架构选择建议与可复用资源，并将后端及部署任务交由其他技能处理。

主要功能

  1. 01搭建并设计 LWC bundle
  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为 LWC bundle 添加 Jest 测试
  4. 04在本地预览组件改动

安装

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

$npx skills add https://github.com/forcedotcom/sf-skills --skill generating-lwc-components

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

包含的文件

除 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

详细介绍

generating-lwc-components：Lightning Web Components 开发

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

此技能适用的任务

在工作涉及以下内容时使用 generating-lwc-components：

  • lwc/**/*.js、.html、.css、.js-meta.xml
  • 组件脚手架搭建和包设计
  • 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. 适用时从资源开始

使用提供的资源构建：

  • 基本组件包
  • 数据表
  • 模态框模式
  • 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 文件的更改会立即自动重新加载。需要有效的 org 连接才能访问数据和进行 Apex callout。

跨技能集成

需求委托给原因
Apex 控制器或服务generating-apex后端逻辑
嵌入 Flow 屏幕generating-flow声明式编排
部署组件包deploying-metadata组织部署
创建配套元数据（消息通道、对象）deploying-metadata元数据部署

参考文件索引

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

评分指南

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

评论

支持 Markdown