2. 标准工作流 (Workflow)

1. 新建组件 ：

   • 必须 使用 CLI 工具，严禁手工创建文件：

     kd project create [组件名] --type kwc
     

   • 组件命名遵循 PascalCase。

2. 代码实现与修改 ：

   • 学习 ：优先参考 app/kwc/exampleComponent 和 本 Skill 目录下的rule.md 中的开发范例。
   • 严格合规 ：代码必须符合本 Skill 目录下的 rule.md 中的所有约束（React Wrapper 导入、onSl* 事件等）。
   • Shoelace 集成 ：涉及 Shoelace 组件时，确保正确使用 React Wrapper 和类型导入。

3. 验证与交付 ：

   • 按项目入口更新 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
  • XMarkdown: reference/sl-xmarkdown.md
  • Think: reference/sl-think.md
  • Sender: reference/sender/index.md
  • SenderHeader: reference/sender/index.md
  • SenderSwitch: reference/sender/index.md
  • 使用前必须阅读相应文档 。
• 标准组件文档 ：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 修复命令

Weekly Installs

71

Repository

kingdee/kwc-skills

First Seen

Mar 8, 2026

Security Audits

Gen Agent Trust HubPassSocketPassSnykPass

Installed on

kimi-cli71

gemini-cli71

amp71

cline71

github-copilot71

codex71