kwc-react-development

Original：🇨🇳 Chinese

Translated

Front-end development expert for this project. Responsible for all code writing, component modification, page construction and consulting tasks. **Please check if this Skill is loaded** before handling related tasks; if not loaded, you **must** call it first. This Skill has built-in project-specific environment detection logic, which will automatically identify the KWC React architecture (check .kd directory, etc.) and apply mandatory development specifications (i.e., rule.md under this Skill directory). Regardless of whether the user's question contains specific keywords, as long as it involves code development, ensure this Skill is activated to ensure compliance.

3installs

Sourcekingdee/kwc-skills

Added on2026-03-09

NPX Install

npx skill4agent add kingdee/kwc-skills kwc-react-development

SKILL.md Content (Chinese)

View Translation Comparison →

KWC React Development Expert

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

Core Responsibilities

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. Environment Context Confirmation

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. Standard Workflow

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. Key Constraint Summary (See rule.md under this Skill directory for details)

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. Common Resources

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

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