mcpField
K
kwc-shoelace-react

kwc-shoelace-react

github.com/kingdeeDevelopment256 installsUpdated 28w ago
Repository

About kwc-shoelace-react

A skill for using and modifying @kdcloudjs/shoelace components in existing React web projects. It emphasizes documented APIs, React event conventions, and Shoelace design tokens, without relying on KWC scaffolding.

Key features

  1. 01Component setup in React projects
  2. 02React Wrapper import conventions
  3. 03Shoelace event mapping
  4. 04Design Token styling guidance
  5. 05Reference docs for extensions

Use cases

  1. 01Adding Shoelace components to a React app
  2. 02Implementing Table or DatePicker extensions
  3. 03Checking event and styling conventions

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/kingdee/kwc-skills --skill kwc-shoelace-react

After installing, type/kwc-shoelace-reactin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

reference/
css-design-tokens.md
sl-bubble.md
sl-cascader.md
sl-daterangepicker.md
sl-dialog.md
sl-float-button.md
sl-grid.md
reference/datepicker/
index.md
reference/datepicker/features/
basic-usage.md
date-range.md
datetime-mode.md
events.md
form-integration.md
format.md
styling.md
validation.md
reference/sender/
index.md
reference/sender/features/
basic-usage.md
custom-footer.md
custom-header.md
custom-suffix.md
events.md
paste-files.md
prefix-slot.md
ref-actions.md
sender-switch.md
skill-tag.md
slot-config.md
speech-input.md
submit-type.md

Details

From the project README

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

Comments

Markdown supported