Back to Details

kwc-shoelace-react

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

React 组件开发专家

React Component Development Expert

本 Skill 面向通用 React Web 项目，专门处理 
@kdcloudjs/shoelace
标准组件和 KWC 扩展组件的接入、开发与修改。
This Skill is designed for general React Web projects, and specializes in handling the access, development and modification of 
@kdcloudjs/shoelace
standard components and KWC extended components.

1. 适用范围

1. Scope

  • 当前项目是 React Web 项目
  • 需要使用 
    @kdcloudjs/shoelace
    组件
  • 不依赖 KWC 工程目录、页面元数据或 KWC 脚手架
  • 若检测到项目已经是 KWC React 工程，应切换到 
    kwc-react-development
  • 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. 标准工作流

2. Standard Workflow

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

3. Key Constraints Summary

  • 组件导入必须使用 
    @kdcloudjs/shoelace/dist/react/[component]/index.js
  • 类型导入必须使用 
    @kdcloudjs/shoelace/dist/components/[component]/[component].js
  • Shoelace 事件必须映射为 
    onSl*
  • 样式必须优先使用 Shoelace Design Token，避免硬编码颜色和间距
  • 扩展组件 API 必须先看本地 
    reference/
    文档，不能凭空猜测
  • 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. 常用资源

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
  • 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. 输出检查清单

5. Output Checklist

  • 当前任务只处理组件接入，不依赖 KWC 工程目录或 KWC CLI 脚手架流程
  • React 组件从 
    dist/react/.../index.js
    导入
  • 事件命名使用 
    onSl*
  • 事件目标做了类型断言
  • 扩展组件先读过本地文档
  • 样式优先使用 Design Token
  • 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