Back to Details

generating-lwc-components

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

generating-lwc-components: Lightning Web Components Development

generating-lwc-components：Lightning Web Components（LWC）开发

Use this skill when the user needs Lightning Web Components: LWC bundles, wire patterns, Apex/GraphQL integration, SLDS 2 styling, accessibility, performance work, or Jest unit tests.
当用户需要Lightning Web Components相关能力时使用此技能：LWC组件包、wire模式、Apex/GraphQL集成、SLDS 2样式、无障碍访问、性能优化或Jest单元测试。

When This Skill Owns the Task

此技能负责的任务场景

Use 
generating-lwc-components
when the work involves:
  • lwc/**/*.js
    , 
    .html
    , 
    .css
    , 
    .js-meta.xml
  • component scaffolding and bundle design
  • wire service, Apex integration, GraphQL integration
  • SLDS 2, dark mode, and accessibility work
  • Jest unit tests for LWC
Delegate elsewhere when the user is:
  • writing Apex controllers or business logic first → generating-apex
  • building Flow XML rather than an LWC screen component → generating-flow
  • deploying metadata → deploying-metadata
当工作涉及以下内容时，使用
generating-lwc-components
：
  • lwc/**/*.js
    、
    .html
    、
    .css
    、
    .js-meta.xml
    文件
  • 组件脚手架与组件包设计
  • wire service、Apex集成、GraphQL集成
  • SLDS 2、深色模式与无障碍访问优化
  • LWC的Jest单元测试
当用户进行以下操作时，请转交至其他技能：
  • 编写Apex控制器或业务逻辑 → generating-apex
  • 构建Flow XML而非LWC屏幕组件 → generating-flow
  • 部署元数据 → deploying-metadata

Required Context to Gather First

需优先收集的必要上下文

Ask for or infer:
  • component purpose and target surface
  • data source: LDS, Apex, GraphQL, LMS, or external system via Apex
  • whether the user needs tests
  • whether the component must run in Flow, App Builder, Experience Cloud, or dashboard contexts
  • accessibility and styling expectations
询问或推断以下信息：
  • 组件用途与目标展示场景
  • 数据源：LDS、Apex、GraphQL、LMS或通过Apex连接的外部系统
  • 用户是否需要测试
  • 组件是否必须在Flow、App Builder、Experience Cloud或仪表板环境中运行
  • 无障碍访问与样式预期

Recommended Workflow

推荐工作流程

1. Choose the right architecture

1. 选择合适的架构

Use the PICKLES mindset:
  • prototype
  • integrate the right data source
  • compose component boundaries
  • define interaction model
  • use platform libraries
  • optimize execution
  • enforce security
采用PICKLES思维模式：
  • 制作原型
  • 集成合适的数据源
  • 定义组件边界
  • 设计交互模型
  • 使用平台库
  • 优化执行效率
  • 强化安全机制

2. Choose the right data access pattern

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

NeedDefault pattern
single-record UILDS / 
getRecord
simple CRUD formbase record form components
complex server queryApex 
@AuraEnabled(cacheable=true)
related graph dataGraphQL wire adapter
cross-DOM communicationLightning Message Service
需求默认模式
单记录UILDS / 
getRecord
简单CRUD表单基础记录表单组件
复杂服务器查询Apex 
@AuraEnabled(cacheable=true)
关联图数据GraphQL wire适配器
跨DOM通信Lightning Message Service

3. Start from an asset when useful

3. 按需从资产模板开始开发

Use provided assets for:
  • basic component bundles
  • datatables
  • modal patterns
  • Flow screen components
  • GraphQL components
  • LMS message channels
  • Jest tests
  • TypeScript-enabled components
使用提供的资产模板开发以下内容：
  • 基础组件包
  • 数据表格
  • 模态框模式
  • Flow屏幕组件
  • GraphQL组件
  • LMS消息通道
  • Jest测试
  • 支持TypeScript的组件

4. Validate for frontend quality

4. 验证前端质量

Check:
  • accessibility
  • SLDS 2 / dark mode compliance
  • event contracts
  • performance / rerender safety
  • Jest coverage when required
检查以下内容：
  • 无障碍访问
  • SLDS 2 / 深色模式合规性
  • 事件契约
  • 性能 / 重渲染安全性
  • 必要时的Jest覆盖率

5. Hand off supporting backend or deploy work

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

Use:
  • generating-apex for controllers / services
  • deploying-metadata for deployment
  • running-apex-tests only for Apex-side test loops, not Jest
使用以下技能：
  • generating-apex 用于控制器/服务开发
  • deploying-metadata 用于部署
  • running-apex-tests 仅用于Apex端测试循环，不用于Jest

High-Signal Rules

高优先级规则

  • prefer platform base components over reinventing controls
  • use 
    @wire
    for reactive read-only use cases; imperative calls for explicit actions and DML paths
  • do not introduce inaccessible custom UI
  • avoid hardcoded colors; use SLDS 2-compatible styling hooks / variables
  • avoid rerender loops in 
    renderedCallback()
  • keep component communication patterns explicit and minimal
  • 优先使用平台基础组件，而非重新实现控件
  • 对于响应式只读场景使用
    @wire
    ；对于显式操作和DML路径使用命令式调用
  • 不得引入无法访问的自定义UI
  • 避免硬编码颜色；使用兼容SLDS 2的样式钩子/变量
  • 避免在
    renderedCallback()
    中出现重渲染循环
  • 保持组件通信模式清晰且最小化

Output Format

输出格式

When finishing, report in this order:
  1. Component(s) created or updated
  2. Data access pattern chosen
  3. Files changed
  4. Accessibility / styling / testing notes
  5. Next implementation or deploy step
Suggested shape:
text
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>
完成工作后，按以下顺序汇报：
  1. 创建或更新的组件
  2. 选择的数据访问模式
  3. 修改的文件
  4. 无障碍访问/样式/测试说明
  5. 下一步实现或部署步骤
建议格式：
text
LWC工作：<摘要>
模式：<wire / apex / graphql / lms / flow-screen>
文件：<路径>
质量：<a11y, SLDS2, 深色模式, Jest>
下一步：<部署、添加控制器或运行测试>

Local Development Server

本地开发服务器

Preview LWC components locally with hot reload — no deployment needed. Run the commands in 
scripts/local-dev-preview.sh
to start a local dev session for a component, app, or Experience Cloud site.
Local Dev commands install just-in-time on first run. They are long-running processes that open a browser with live preview. Changes to 
.js
, 
.html
, and 
.css
files auto-reload instantly. Requires an active org connection for data and Apex callouts.
无需部署即可通过热重载预览LWC组件。运行
scripts/local-dev-preview.sh
中的命令，启动组件、应用或Experience Cloud站点的本地开发会话。
本地开发命令会在首次运行时即时安装。它们是长期运行的进程，会打开带有实时预览的浏览器。修改
.js
、
.html
和
.css
文件后会自动即时重载。需要活跃的组织连接以获取数据和进行Apex调用。

Cross-Skill Integration

跨技能集成

NeedDelegate toReason
Apex controller or servicegenerating-apexbackend logic
embed in Flow screensgenerating-flowdeclarative orchestration
deploy component bundledeploying-metadataorg rollout
create supporting metadata (message channels, objects)deploying-metadatametadata deployment
需求转交至原因
Apex控制器或服务generating-apex后端逻辑开发
嵌入Flow屏幕generating-flow声明式编排
部署组件包deploying-metadata组织内推广
创建支持性元数据（消息通道、对象）deploying-metadata元数据部署

Reference File Index

参考文件索引

Start here

入门参考

  • references/component-patterns.md — component architecture patterns and bundle design
  • references/slds-design-guide.md — SLDS 2 styling, dark mode, CSS hooks
  • references/lwc-best-practices.md — high-signal rules and anti-patterns
  • references/scoring-and-testing.md — 165-point scoring rubric across 8 categories
  • references/jest-testing.md — Jest unit test patterns and async rendering helpers
  • references/slds-blueprints.json — machine-readable SLDS component blueprints
  • references/cli-commands.md — SF CLI commands for LWC development
  • references/component-patterns.md — 组件架构模式与组件包设计
  • references/slds-design-guide.md — SLDS 2样式、深色模式、CSS钩子
  • references/lwc-best-practices.md — 高优先级规则与反模式
  • references/scoring-and-testing.md — 涵盖8个类别的165分评分标准
  • references/jest-testing.md — Jest单元测试模式与异步渲染助手
  • references/slds-blueprints.json — 机器可读的SLDS组件蓝图
  • references/cli-commands.md — 用于LWC开发的SF CLI命令

Accessibility / performance / state

无障碍访问/性能/状态管理

  • references/accessibility-guide.md — WCAG, ARIA, keyboard navigation patterns
  • references/performance-guide.md — lazy loading, debouncing, rerender safety
  • references/state-management.md — reactive state patterns and LMS
  • references/template-anti-patterns.md — common HTML template mistakes to avoid
  • references/accessibility-guide.md — WCAG、ARIA、键盘导航模式
  • references/performance-guide.md — 懒加载、防抖、重渲染安全性
  • references/state-management.md — 响应式状态模式与LMS
  • references/template-anti-patterns.md — 需避免的常见HTML模板错误

Integration / advanced features

集成/高级功能

  • references/lms-guide.md — Lightning Message Service patterns
  • references/flow-integration-guide.md — Flow screen component design
  • references/advanced-features.md — Spring '26 features: TypeScript, lwc:on, GraphQL mutations
  • references/async-notification-patterns.md — toast, notifications, async flows
  • references/triangle-pattern.md — parent-child-sibling communication triangle
  • references/lms-guide.md — Lightning Message Service模式
  • references/flow-integration-guide.md — Flow屏幕组件设计
  • references/advanced-features.md — Spring '26功能：TypeScript、lwc:on、GraphQL mutations
  • references/async-notification-patterns.md — 提示框、通知、异步流程
  • references/triangle-pattern.md — 父子组件与兄弟组件通信三角模式

Asset templates

资产模板

  • assets/basic-component/basicComponent.js — wire service, error/loading states, event dispatching
  • assets/datatable-component/datatableComponent.js — datatable with inline editing
  • assets/flow-screen-component/flowScreenComponent.js — Flow screen with input/output properties
  • assets/form-component/formComponent.js — form validation and DML patterns
  • assets/graphql-component/graphqlComponent.js — GraphQL wire adapter with cursor-based pagination
  • assets/jest-test/componentName.test.js.example — Jest test template (copy and rename, remove 
    .example
    suffix)
  • assets/message-channel/lmsPublisher.js — LMS publisher pattern
  • assets/message-channel/lmsSubscriber.js — LMS subscriber pattern
  • assets/modal-component/modalComponent.js — modal with focus trap and ESC handling
  • assets/record-picker/recordPicker.js — record picker with search
  • assets/state-store/store.js — reactive state store for cross-component state
  • assets/typescript-component/typescriptComponent.ts — TypeScript-enabled component (Spring '26)
  • assets/workspace-api/workspaceComponent.js — workspace API for tab and focus management
  • assets/apex-controller/LwcController.cls — Apex controller with 
    @AuraEnabled(cacheable=true)
    patterns
  • assets/basic-component/basicComponent.js — wire service、错误/加载状态、事件分发
  • assets/datatable-component/datatableComponent.js — 支持内联编辑的数据表格
  • assets/flow-screen-component/flowScreenComponent.js — 带输入/输出属性的Flow屏幕
  • assets/form-component/formComponent.js — 表单验证与DML模式
  • assets/graphql-component/graphqlComponent.js — 带基于游标分页的GraphQL wire适配器
  • assets/jest-test/componentName.test.js.example — Jest测试模板（复制并重命名，移除
    .example
    后缀）
  • assets/message-channel/lmsPublisher.js — LMS发布者模式
  • assets/message-channel/lmsSubscriber.js — LMS订阅者模式
  • assets/modal-component/modalComponent.js — 带焦点捕获与ESC键处理的模态框
  • assets/record-picker/recordPicker.js — 带搜索功能的记录选择器
  • assets/state-store/store.js — 用于跨组件状态管理的响应式状态存储
  • assets/typescript-component/typescriptComponent.ts — 支持TypeScript的组件（Spring '26）
  • assets/workspace-api/workspaceComponent.js — 用于标签与焦点管理的workspace API
  • assets/apex-controller/LwcController.cls — 带
    @AuraEnabled(cacheable=true)
    模式的Apex控制器

Scripts

脚本

  • scripts/local-dev-preview.sh — local dev server commands for component, app, and site preview
  • scripts/local-dev-preview.sh — 用于组件、应用和站点预览的本地开发服务器命令

Score Guide

评分指南

ScoreMeaning
150+production-ready LWC bundle
125–149strong component with minor polish left
100–124functional but review recommended
< 100needs significant improvement
分数含义
150+可用于生产环境的LWC组件包
125–149优秀组件，仅需少量优化
100–124功能可用，但建议进行评审
< 100需要大幅改进