# Kwc Shoelace React

> 仅适用于非 KWC 工程的通用 React 项目。KWC 工程需求必须交由 kwc-project-scaffold。

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

---


# React 组件开发专家

本 Skill 面向通用 React Web 项目，专门处理 `@kdcloudjs/shoelace` 标准组件和 KWC 扩展组件的接入、开发与修改。

## 1. 适用范围
- 当前项目是 React Web 项目
- 需要使用 `@kdcloudjs/shoelace` 组件
- 不依赖 KWC 工程目录、页面元数据或 KWC 脚手架
- 若检测到项目已经是 KWC React 工程，应切换到 `kwc-react-development`

## 2. 标准工作流
1. 先确认当前需求是否只是“在现有 React 工程中使用组件”，而不是创建 KWC 工程。
2. 开发前阅读本 Skill 目录下的 `rule.md`，严格遵守 React Wrapper、事件和样式约束。
3. 遇到 Table、DatePicker、Pagination、Nav、XMarkdown、Think 等扩展组件时，先阅读对应 `reference/` 文档。
4. 代码交付时遵循当前 React 工程自己的入口、构建和测试方式，不引入任何 `kd` 脚手架命令。

## 3. 关键约束摘要
- 组件导入必须使用 `@kdcloudjs/shoelace/dist/react/[component]/index.js`
- 类型导入必须使用 `@kdcloudjs/shoelace/dist/components/[component]/[component].js`
- Shoelace 事件必须映射为 `onSl*`
- 样式必须优先使用 Shoelace Design Token，避免硬编码颜色和间距
- 扩展组件 API 必须先看本地 `reference/` 文档，不能凭空猜测

## 4. 常用资源
- 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`
- Cascader: `reference/sl-cascader.md`
- Steps: `reference/sl-steps.md`
- Grid: `reference/sl-grid.md`
- Notification: `reference/sl-notification.md`
- RadioGroup: `reference/sl-radio-group.md`
- Space: `reference/sl-space.md`
- Upload: `reference/upload/index.md`
- Image: `reference/sl-image.md`
- Design Token: `reference/css-design-tokens.md`
- Segmented: `reference/sl-segmented.md`
- Transfer: `reference/sl-transfer.md`
- PopConfirm: `reference/sl-popconfirm.md`
- Bubble: `reference/sl-bubble.md`

## 5. 输出检查清单
- [ ] 当前任务只处理组件接入，不依赖 KWC 工程目录或 KWC CLI 脚手架流程
- [ ] React 组件从 `dist/react/.../index.js` 导入
- [ ] 事件命名使用 `onSl*`
- [ ] 事件目标做了类型断言
- [ ] 扩展组件先读过本地文档
- [ ] 样式优先使用 Design Token