kwc-shoelace-react

React component development expert

This Skill is intended for general React Web 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 React Web project
• Need to use @kdcloudjs/shoelace components
• Does not depend on the KWC project directory, page metadata, or KWC scaffolding
• If it is detected that the project is already a KWC React project, switch to kwc-react-development

2. Standard workflow

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

3. Summary of key constraints

• Component imports must use @kdcloudjs/shoelace/dist/react/[component]/index.js
• Type imports must use @kdcloudjs/shoelace/dist/components/[component]/[component].js
• Shoelace events must be mapped to onSl*
• Styles must prioritize Shoelace Design Token to avoid hardcoded colors and spacing
• For extended component APIs, you must first read the local reference/ documentation and must not guess

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

• The current task only handles component integration and does not depend on the KWC project directory or the KWC CLI scaffolding process
• React components are imported from dist/react/.../index.js imports
• Event naming uses onSl*
• The event target has a type assertion
• For extended components, the local documentation has been read first
• Styles prioritize using Design Token