# Kwc Lwc Development

> 【由 kwc-project-scaffold 调度】仅负责 LWC 组件代码编写，不直接承接用户需求，不创建文件。所有 KWC 需求和文件创建必须先经 kwc-project-scaffold。

- Skill: `kingdee/kwc-lwc-development` (Agent Skill, multi-file: 77 files)
- Install (CLI): `npx skillmds@latest add kingdee/kwc-lwc-development`
- Raw SKILL.md: https://api.skillmd.com/api/skills/kingdee/kwc-lwc-development/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: kingdee (https://skillmd.com/u/kingdee)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/kingdee/kwc-lwc-development

---


# KWC LWC 开发专家

当项目确认使用 LWC 框架后，本 Skill 负责该框架下的代码编写规范与组件使用指导。

## 重要：使用前置条件

**必须同时满足以下条件才能使用本 Skill：**
1. 当前目录已存在 `.kd/config.json` 文件
2. 配置文件中 `framework` 字段值为 `lwc`
3. 工程已通过 `kwc-project-scaffold` 完成初始化

**以下场景禁止使用本 Skill，必须交由 `kwc-project-scaffold`：**
- 工程初始化（`kd project init`）
- 创建组件或页面（`kd project create`）
- 生成或修改 `.js-meta.kwc` 组件元数据
- 生成或修改 `.page-meta.kwp` 页面元数据
- 环境配置（`kd env` 相关命令）
- 部署操作（`kd project deploy`）
- 调试操作（`kd debug`）— 调试由 kwc-project-scaffold 负责，须以后台模式运行（`is_background: true`），详见其调试约定

若当前不满足上述前置条件，请立即停止并切换到 `kwc-project-scaffold` Skill。

## 核心职责
你负责指导用户进行 KWC LWC 组件的开发、修改和维护。
**重要**：你必须严格遵守**本 Skill 目录下的** `rule.md` 文件中定义的硬性约束。在开始任何代码编写前，请务必阅读并理解这些规则。

## 1. 环境上下文确认
- **项目根目录**：包含 `.kd` 文件夹和 `app/kwc` 目录。
- **配置环境**：`.kd/config.json` 中 `framework` 配置为 `lwc`。
- **重要**：若当前环境**不满足**上述条件（如缺少 `.kd` 或 `framework` 不为 `lwc`），**必须立即停止**使用本 Skill 的所有约束，转而按**通用 Web 项目**标准协助用户。
- **执行原则**：仅在确认环境符合上述特征时，才强制执行本 Skill 及**本 Skill 目录下的** `rule.md` 定义的所有 KWC LWC 开发规范。

## 2. 平台差异说明 (Salesforce LWC vs @kdcloudjs/kwc)
`@kdcloudjs/kwc` 是 Salesforce LWC 的 100% 语法克隆，仅有以下差异需要注意：

| 项目 | Salesforce LWC | @kdcloudjs/kwc（本平台） |
|-----|---------------|------------------------|
| **基类** | `LightningElement` | `KingdeeElement` |
| **导入路径** | `from 'lwc'` | `from '@kdcloudjs/kwc'` |
| **配置文件** | `lwc.config.json` | `kwc.config.json` |
| **组件库** | `<lightning-button>` 等 | `<sl-button kwc:external>` 等（必须使用 `kwc:external` 属性，禁止直接使用 `lightning-*` 组件） |
| **平台限制** | 支持标准 LWC 语法 | HTML 中禁止表达式、禁止自闭合标签、Shoelace自定义事件在renderedCallback中绑定监听 |

## 3. 标准工作流 (Workflow)

1. **新建组件**：
   - **必须**使用 CLI 工具，严禁手工创建文件：
     ```bash
     kd project create [组件名] --type kwc
     ```
   - 组件命名遵循 `camelCase`。

2. **代码实现与修改**：
   - **必须先参考**：在实现前，**必须**先阅读并参考项目根目录下的 `app/kwc/exampleComponent` 或本 Skill 目录下的 `./assets/examples` 示例代码，确保掌握正确的开发模式。
   - **严格合规**：代码必须符合**本 Skill 目录下的** `rule.md` 中的所有约束（html无表达式、无自闭合、正确的事件绑定等）。
   - **Shoelace 集成**：涉及 Shoelace 组件时，确保导入路径正确且添加了 `kwc:external`。

3. **验证与交付**：
   - 按项目入口更新 `app/kwc/main*` 引用。
   - 运行 `npm run dev` 进行验证。
   - 检查代码是否符合所有硬性约束。

## 4. 关键约束摘要 (详细请见本 Skill 目录下的 rule.md)
以下仅列出最关键的几点，完整规则请查阅**本 Skill 目录下的** `rule.md`：
- **模板**：禁止 JS 表达式 (`{a+b}`)，禁止自闭合 (`<tag />`)，禁止 ID 选择器。
- **事件**：HTML 仅绑定原生事件 (`click`)，Shoelace 事件 (`sl-change`) 必须在 JS `renderedCallback` 中绑定。
- **Shoelace**：`sl-*` 标签必须加 `kwc:external`，属性全小写。
- **JS**：继承 `KingdeeElement`，DOM 查询用 `.class`。
- **CSS**：样式必须使用 Shoelace Design Token（`var(--sl-color-*)`、`var(--sl-spacing-*)`、`var(--sl-font-size-*)`、`var(--sl-border-radius-*)`），禁止硬编码 hex 色值和 px 数值。详见 `./reference/css-design-tokens.md`。

## 5. 常用资源
- 基类：`KingdeeElement` (`@kdcloudjs/kwc`)
- 组件库：`@kdcloudjs/shoelace`
  - **说明**：该库是 `@shoelace-style/shoelace` 的 **100% 克隆**，标准组件 API 完全一致，仅新增了 KWC 业务组件。
  - **标准组件文档**：[https://shoelace.style/](https://shoelace.style/)
  - **所有扩展组件文档**（位于本 Skill 的 `reference/` 目录下）：
  - Table: `reference/table/index.md`
  - DatePicker: `reference/datepicker/index.md`
  - TimePicker: `reference/sl-timepicker.md`
  - Pagination: `reference/sl-pagination.md`
  - Daterangepicker: `reference/sl-daterangepicker.md`
  - ThoughtChain: `reference/sl-thought-chain.md`
  - Nav: `reference/sl-nav.md`
  - XMarkdown: `reference/sl-xmarkdown.md`
  - Think: `reference/sl-think.md`
  - TreeSelect: `reference/sl-tree-select.md`
  - Sender: `reference/sender/index.md`
  - SenderHeader: `reference/sender/index.md`
  - SenderSwitch: `reference/sender/index.md`
  - Cascader: `reference/sl-cascader.md`
  - FloatButton: `reference/sl-float-button.md`
  - FloatButtonGroup: `reference/sl-float-button.md`
  - Steps: `reference/sl-steps.md`
  - Grid: `reference/sl-grid.md`
  - Notification: `reference/sl-notification.md`
  - RadioGroup: `reference/sl-radio-group.md`
  - Upload: `reference/upload/index.md`
  - Segmented: `reference/sl-segmented.md`
  - Transfer: `reference/sl-transfer.md`
  - Popconfirm: `reference/sl-popconfirm.md`
  - Bubble: `reference/sl-bubble.md`
  - **业务组件**（`@kdcloudjs/shoelace-biz`，导入路径为 `@kdcloudjs/shoelace-biz/dist/components/...`）：
  - Lookup (F7): `reference/sl-lookup.md`
  - **使用前必须阅读相应文档**。

## 6. 输出检查清单
提交代码前，请自查：
- [ ] 新建组件使用了 `kd project create [组件名] --type kwc`
- [ ] 已阅读并遵守**本 Skill 目录下的** `rule.md` 中的所有约束
- [ ] HTML 无 JS 表达式、无自闭合标签、无 ID
- [ ] `sl-*` 标签包含 `kwc:external`
- [ ] Shoelace自定义事件在 JS 中绑定，HTML 仅绑定原生事件
- [ ] CSS 样式使用 Design Token，无硬编码色值/间距/字号/圆角
- [ ] **未运行**任何 ESLint/Prettier 修复命令，并**忽略**了所有 ESLint 格式报错