kwc-react-development

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

KWC React 开发专家

KWC React Development Expert

本 Skill 是 KWC React 项目开发的入口与总指挥。

This Skill is the entry point and commander-in-chief for KWC React project development.

核心职责

Core Responsibilities

你负责指导用户进行 KWC React 组件的开发、修改和维护。重要：你必须严格遵守本 Skill 目录下的

rule.md

文件中定义的硬性约束。在开始任何代码编写前，请务必阅读并理解这些规则。

You are responsible for guiding users in the development, modification and maintenance of KWC React components. Important: You must strictly comply with the hard constraints defined in the

rule.md

file under this Skill directory. Be sure to read and understand these rules before starting any code writing.

1. 环境上下文确认

1. Environment Context Confirmation

项目根目录：包含
```
.kd
```
文件夹和
```
app/kwc
```
目录。
配置环境：
```
.kd/config.json
```
中
```
framework
```
为
```
react
```
。
重要：若当前环境不满足上述条件，必须立即停止使用本 Skill 的所有约束，转而按通用 React Web 项目标准协助用户。

Project Root Directory: Contains
```
.kd
```
folder and
```
app/kwc
```
directory.
Configuration Environment:
```
framework
```
in
```
.kd/config.json
```
is set to
```
react
```
.
Important: If the current environment does not meet the above conditions, you must immediately stop using all constraints of this Skill, and instead assist users in accordance with general React Web project standards.

2. 标准工作流 (Workflow)

2. Standard Workflow

新建组件：
- 必须使用 CLI 工具，严禁手工创建文件：
  bash
```
kd project create [组件名] --type kwc
```
- 组件命名遵循
```
PascalCase
```
  。
代码实现与修改：
- 学习：优先参考
```
app/kwc/exampleComponent
```
  和 本 Skill 目录下的
```
rule.md
```
  中的开发范例。
- 严格合规：代码必须符合本 Skill 目录下的
```
rule.md
```
  中的所有约束（React Wrapper 导入、onSl* 事件等）。
- Shoelace 集成：涉及 Shoelace 组件时，确保正确使用 React Wrapper 和类型导入。
验证与交付：
- 按项目入口更新
```
app/kwc/main*
```
  引用。
- 运行
```
npm run dev
```
  进行验证。

Create New Component:
- Must use the CLI tool; manual file creation is strictly prohibited:
  bash
```
kd project create [component-name] --type kwc
```
- Component naming follows the
```
PascalCase
```
  convention.
Code Implementation and Modification:
- Learning: Prioritize referencing
```
app/kwc/exampleComponent
```
  and development examples in rule.md under this Skill directory.
- Strict Compliance: Code must adhere to all constraints specified in rule.md under this Skill directory (such as React Wrapper imports, onSl* events, etc.).
- Shoelace Integration: When working with Shoelace components, ensure correct usage of React Wrappers and type imports.
Verification and Delivery:
- Update references in
```
app/kwc/main*
```
  according to the project entry point.
- Run
```
npm run dev
```
  for verification.

3. 关键约束摘要 (详细请见本 Skill 目录下的 rule.md)

3. Key Constraint Summary (See rule.md under this Skill directory for details)

导入：

import SlInput from '@kdcloudjs/shoelace/dist/react/input/index.js';

类型：

import type SlInputElement from '@kdcloudjs/shoelace/dist/components/input/input.js';

JSX：
```
<SlInput onSlChange={handleChange} />
```
事件：必须映射为
```
onSl*
```
，且使用
```
CustomEvent
```
类型断言
CSS：样式必须使用 Shoelace Design Token（
```
var(--sl-color-*)
```
、
```
var(--sl-spacing-*)
```
、
```
var(--sl-font-size-*)
```
、
```
var(--sl-border-radius-*)
```
），禁止硬编码 hex 色值和 px 数值。详见
```
./reference/css-design-tokens.md
```
。

Import:

import SlInput from '@kdcloudjs/shoelace/dist/react/input/index.js';

Type:

import type SlInputElement from '@kdcloudjs/shoelace/dist/components/input/input.js';

JSX:
```
<SlInput onSlChange={handleChange} />
```
Events: Must use the
```
onSl*
```
prefix, and apply
```
CustomEvent
```
type assertion
CSS: Styles must utilize Shoelace Design Tokens (
```
var(--sl-color-*)
```
,
```
var(--sl-spacing-*)
```
,
```
var(--sl-font-size-*)
```
,
```
var(--sl-border-radius-*)
```
). Hard-coded hex color values and px units are prohibited. See
```
./reference/css-design-tokens.md
```
for details.

4. 常用资源

4. Common Resources

扩展组件文档（位于本 Skill 的
```
reference/
```
目录下）：
- Table:
```
reference/table/index.md
```
- DatePicker:
```
reference/datepicker/index.md
```
- TimePicker:
```
reference/sl-timepicker.md
```
- Pagination:
```
reference/sl-pagination.md
```
- 使用前必须阅读相应文档。
标准组件文档：https://shoelace.style/

Extended Component Documentation (located in the
```
reference/
```
directory of this Skill):
- Table:
```
reference/table/index.md
```
- DatePicker:
```
reference/datepicker/index.md
```
- TimePicker:
```
reference/sl-timepicker.md
```
- Pagination:
```
reference/sl-pagination.md
```
- Must read the corresponding documentation before use.
Standard Component Documentation: https://shoelace.style/

5. 输出检查清单

5. Output Checklist

提交代码前，请自查：

新建组件使用了

kd project create [组件名] --type kwc

导入路径包含

/index.js

(组件) 和

/[component]/[component].js

(类型，如

button/button.js

)

事件命名使用
```
onSl*
```
前缀
针对 Event Target 进行了正确的类型断言
严格参考了
```
rule.md
```
中的 Strict Template
未运行任何 ESLint/Prettier 修复命令

Before submitting code, please perform the following self-checks:

New components are created using

kd project create [component-name] --type kwc

Import paths include
```
/index.js
```
(for components) and
```
/[component]/[component].js
```
(for types, e.g.,
```
button/button.js
```
)
Event names use the
```
onSl*
```
prefix
Correct type assertion is applied to the Event Target
Strictly followed the Strict Template in
```
rule.md
```
Did not run any ESLint/Prettier fix commands