KWC React 开发专家
本 Skill 是 KWC React 项目开发的入口与总指挥。
核心职责
你负责指导用户进行 KWC React 组件的开发、修改和维护。
重要：你必须严格遵守本 Skill 目录下的 rule.md 文件中定义的硬性约束。在开始任何代码编写前，请务必阅读并理解这些规则。
1. 环境上下文确认
- 项目根目录：包含
.kd文件夹和app/kwc目录。 - 配置环境：
.kd/config.json中framework为react。 - 重要：若当前环境不满足上述条件，必须立即停止使用本 Skill 的所有约束，转而按通用 React Web 项目标准协助用户。
2. 标准工作流 (Workflow)
-
新建组件：
- 必须使用 CLI 工具，严禁手工创建文件：
kd project create [组件名] --type kwc - 组件命名遵循
PascalCase。
- 必须使用 CLI 工具，严禁手工创建文件：
-
代码实现与修改：
- 学习：优先参考
app/kwc/exampleComponent和 本 Skill 目录下的rule.md中的开发范例。 - 严格合规：代码必须符合本 Skill 目录下的
rule.md中的所有约束（React Wrapper 导入、onSl* 事件等）。 - Shoelace 集成：涉及 Shoelace 组件时，确保正确使用 React Wrapper 和类型导入。
- 学习：优先参考
-
验证与交付：
- 按项目入口更新
app/kwc/main*引用。 - 运行
npm run dev进行验证。
- 按项目入口更新
3. 关键约束摘要 (详细请见本 Skill 目录下的 rule.md)
- 导入：
import SlInput from '@kdcloudjs/shoelace/dist/react/input/index.js'; - 类型：
import type SlInputElement from '@kdcloudjs/shoelace/dist/components/input/input.js'; - JSX：
<SlInput onSlChange={handleChange} /> - 事件：必须映射为
onSl*，且使用CustomEvent类型断言 - 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。
4. 常用资源
- 扩展组件文档（位于本 Skill 的
reference/目录下）：- Table:
reference/table/index.md - DatePicker:
reference/datepicker/index.md - TimePicker:
reference/sl-timepicker.md - Pagination:
reference/sl-pagination.md - Nav:
reference/sl-nav.md - 使用前必须阅读相应文档。
- Table:
- 标准组件文档：https://shoelace.style/
5. 输出检查清单
提交代码前，请自查：
- 新建组件使用了
kd project create [组件名] --type kwc - 导入路径包含
/index.js(组件) 和/[component]/[component].js(类型，如button/button.js) - 事件命名使用
onSl*前缀 - 针对 Event Target 进行了正确的类型断言
- 严格参考了
rule.md中的 Strict Template - 未运行任何 ESLint/Prettier 修复命令