mcpField
K
kwc-shoelace-vue

kwc-shoelace-vue

github.com/kingdeeDevelopment249 installsUpdated 27w ago
Repository

About kwc-shoelace-vue

A skill for developing Vue 3 interfaces with `@kdcloudjs/shoelace` standard and KWC extension components. It provides integration rules and component references without relying on KWC project scaffolding.

Key features

  1. 01Component import path guidance
  2. 02kebab-case component tags
  3. 03Shoelace event conventions
  4. 04Object and array property rules
  5. 05Design Token styling guidance

Use cases

  1. 01Add Shoelace components to a Vue 3 project
  2. 02Implement events and component properties
  3. 03Consult guidance for extension components

Install

Copy the command and run it in a terminal.

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

After installing, type/kwc-shoelace-vuein 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

Vue 组件开发专家

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

1. 适用范围

  • 当前项目是 Vue 3 Web 项目
  • 需要使用 @kdcloudjs/shoelace 组件
  • 不依赖 KWC 工程目录、页面元数据或 KWC 脚手架
  • 若检测到项目已经是 KWC Vue 工程，应切换到 kwc-vue-development

2. 标准工作流

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

3. 关键约束摘要

  • 组件导入必须使用 @kdcloudjs/shoelace/dist/components/[component]/[component].js
  • 组件标签必须使用 kebab-case
  • Shoelace 事件必须使用 @sl-*
  • 数组和对象属性必须使用 camelCase + .prop
  • 样式必须优先使用 Shoelace Design Token

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
  • 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
  • Design Token: reference/css-design-tokens.md

5. 输出检查清单

  • 当前任务只处理组件接入，不依赖 KWC 工程目录或 KWC CLI 脚手架流程
  • 组件已从 dist/components/... 导入
  • 模板标签使用 kebab-case
  • 事件使用 @sl-*
  • 数组和对象属性使用 camelCase + .prop
  • 扩展组件先读过本地文档
  • 样式优先使用 Design Token

Comments

Markdown supported