React Component Development Expert

@kdcloudjs/shoelace

1. Scope

• The current project is a React Web project
• Need to use

  @kdcloudjs/shoelace

  components
• Does not rely on KWC project directories, page metadata or KWC scaffolding
• If the project is detected to be a KWC React project, you should switch to

  kwc-react-development

2. Standard Workflow

1. First confirm whether the current requirement is only "using components in an existing React project" instead of creating a KWC project.
2. Read

   rule.md

   under this Skill directory before development, and strictly comply with React Wrapper, event and style constraints.
3. When encountering extended components such as Table, DatePicker, Pagination, Nav, XMarkdown, Think, etc., read the corresponding

   reference/

   documentation first.
4. When delivering code, follow the entry, build and test methods of the current React project, and do not introduce any

   kd

   scaffolding commands.

3. Key Constraints Summary

• 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, avoid hard-coded colors and spacing
• Extended component APIs must refer to the local

  reference/

  documentation first, do not guess arbitrarily

4. Common Resources

• 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

• Steps:

  reference/sl-steps.md

• Design Token:

  reference/css-design-tokens.md

5. Output Checklist

• The current task only handles component access, does not rely on KWC project directories or KWC CLI scaffolding processes
• React components are imported from

  dist/react/.../index.js

• Event naming uses

  onSl*

• Type assertion is added for event targets
• Local documentation has been read for extended components
• Styles prioritize Design Token