Back to Details

experience-lwc-generate

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

experience-lwc-generate: Lightning Web Components Development

experience-lwc-generate：Lightning Web Components开发

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）**时使用本技能，包括LWC组件包、wire模式、Apex/GraphQL集成、SLDS 2样式、无障碍优化、性能调优或Jest单元测试。

When This Skill Owns the Task

本技能负责的任务场景

Use 
experience-lwc-generate
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 → platform-apex-generate
  • building Flow XML rather than an LWC screen component → automation-flow-generate
  • deploying metadata → platform-metadata-deploy
当工作涉及以下内容时，使用
experience-lwc-generate
：
  • lwc/**/*.js
    、
    .html
    、
    .css
    、
    .js-meta.xml
    文件
  • 组件脚手架搭建与组件包设计
  • wire服务、Apex集成、GraphQL集成
  • SLDS 2、暗黑模式与无障碍优化
  • LWC的Jest单元测试
当用户进行以下操作时，请转至其他技能：
  • 编写Apex控制器或业务逻辑 → platform-apex-generate
  • 构建Flow XML而非LWC屏幕组件 → automation-flow-generate
  • 部署元数据 → platform-metadata-deploy

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:
  • platform-apex-generate for controllers / services
  • platform-metadata-deploy for deployment
  • platform-apex-test-run only for Apex-side test loops, not Jest
使用以下技能：
  • platform-apex-generate 用于控制器/服务开发
  • platform-metadata-deploy 用于部署
  • platform-apex-test-run 仅用于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 serviceplatform-apex-generatebackend logic
embed in Flow screensautomation-flow-generatedeclarative orchestration
deploy component bundleplatform-metadata-deployorg rollout
create supporting metadata (message channels, objects)platform-metadata-deploymetadata deployment
需求移交至原因
Apex控制器或服务platform-apex-generate后端逻辑开发
嵌入Flow屏幕automation-flow-generate声明式编排
部署组件包platform-metadata-deploy组织内推广
创建支持性元数据（消息通道、对象）platform-metadata-deploy元数据部署

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服务、错误/加载状态、事件派发
  • 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需要大幅改进