kwc-shoelace-vue

Vue Component Development Expert

This Skill is intended for generic Vue 3 projects and specifically handles the integration, development, and modification of @kdcloudjs/shoelace standard components and KWC extended components.

1. Scope of Application

• The current project is a Vue 3 Web project
• Need to use @kdcloudjs/shoelace components
• Does not depend on the KWC project directory, page metadata, or the KWC scaffold
• If the project is detected to already be a KWC Vue project, switch to kwc-vue-development

2. Standard Workflow

1. First confirm whether the current requirement is merely "using components in an existing Vue project" rather than creating a KWC project.
2. Before development, read the rule.mdin this Skill directory, and strictly follow the import, event, and property passing constraints.
3. When encountering extended components such as Table, DatePicker, Pagination, Nav, XMarkdown, Think, etc., first read the corresponding reference/ documentation.
4. When delivering code, follow the current Vue project's own entry, build, and test methods, and do not introduce any kd scaffold commands.

3. Key Constraints Summary

• Component imports must use @kdcloudjs/shoelace/dist/components/[component]/[component].js
• Component tags must use kebab-case
• Shoelace events must use @sl-*
• Array and object properties must use camelCase + .prop
• Styles must prioritize Shoelace Design Token

4. Common Resources

• 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. Output Checklist

• The current task only handles component integration and does not depend on the KWC project directory or the KWC CLI scaffold process
• Components have been imported from dist/components/... Imported
• Template tags use kebab-case
• Events use @sl-*
• Array and object properties use camelCase + .prop
• Extended components have had their local documentation read first
• Styles prioritize Design Token