kwc-lwc-development

Original：🇨🇳 Chinese

Translated

1 scriptsChecked / no sensitive code detected

Front-end development expert for this project. Responsible for handling all code writing, component modification, page construction and consulting tasks. **Please check if this Skill is loaded first** before handling related tasks; if not loaded, you **must** call it first. This Skill has built-in project-specific environment detection logic that automatically identifies the KWC LWC architecture (checks for .kd directory, etc.) and enforces mandatory development specifications (i.e., rule.md in this Skill's 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-13

NPX Install

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

SKILL.md Content (Chinese)

View Translation Comparison →

KWC LWC Development Expert

This Skill is the entry point and command center for KWC LWC project development.

Core Responsibilities

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

rule.md

file in this Skill's 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: The
```
framework
```
configuration in
```
.kd/config.json
```
is set to
```
lwc
```
.
Important: If the current environment does not meet the above conditions (e.g., missing
```
.kd
```
or
```
framework
```
is not
```
lwc
```
), must immediately stop using all constraints of this Skill and assist users in accordance with general Web project standards instead.
Execution Principle: Only enforce all KWC LWC development specifications defined by this Skill and the
```
rule.md
```
in this Skill's directory when confirming the environment meets the above characteristics.

2. Platform Differences (Salesforce LWC vs @kdcloudjs/kwc)

@kdcloudjs/kwc

is a 100% syntax clone of Salesforce LWC, with only the following differences to note:

Item	Salesforce LWC	@kdcloudjs/kwc (Our Platform)
Base Class	`LightningElement`	`KingdeeElement`
Import Path	`from 'lwc'`	`from '@kdcloudjs/kwc'`
Configuration File	`lwc.config.json`	`kwc.config.json`
Component Library	`<lightning-button>` etc.	`<sl-button kwc:external>` etc. (Must use `kwc:external` attribute, direct use of `lightning-*` components is prohibited)
Platform Restrictions	Supports standard LWC syntax	No expressions in HTML, no self-closing tags, Shoelace custom events must be bound in renderedCallback

3. Standard Workflow

Create New Component:
- Must use CLI tool, manual file creation is strictly prohibited:
  bash
```
kd project create [component-name] --type kwc
```
- Component naming follows
```
camelCase
```
  .
Code Implementation & Modification:
- Must Reference First: Before implementation, must read and refer to the sample code in
```
app/kwc/exampleComponent
```
  in the project root directory or
```
./assets/examples
```
  in this Skill's directory to ensure mastery of the correct development pattern.
- Strict Compliance: Code must comply with all constraints in
```
rule.md
```
  in this Skill's directory (no expressions in HTML, no self-closing tags, correct event binding, etc.).
- Shoelace Integration: When involving Shoelace components, ensure correct import paths and add
```
kwc:external
```
  .
Verification & Delivery:
- Update
```
app/kwc/main*
```
  references according to the project entry.
- Run
```
npm run dev
```
  for verification.
- Check if code complies with all hard constraints.

4. Key Constraint Summary (See rule.md in this Skill's directory for details)

Only the most critical points are listed below; refer to

rule.md

in this Skill's directory for complete rules:

Template: No JS expressions (
```
{a+b}
```
), no self-closing tags (
```
<tag />
```
), no ID selectors.
Events: Only native events (
```
click
```
) are bound in HTML; Shoelace events (
```
sl-change
```
) must be bound in JS
```
renderedCallback
```
.
Shoelace:
```
sl-*
```
tags must include
```
kwc:external
```
, all attributes are lowercase.
JS: Inherit from
```
KingdeeElement
```
, use
```
.class
```
for DOM queries.
CSS: Styles must use Shoelace Design Tokens (
```
var(--sl-color-*)
```
,
```
var(--sl-spacing-*)
```
,
```
var(--sl-font-size-*)
```
,
```
var(--sl-border-radius-*)
```
), hard-coded hex color values and px values are prohibited. See
```
./reference/css-design-tokens.md
```
for details.

5. Common Resources

Base Class:
```
KingdeeElement
```
(
```
@kdcloudjs/kwc
```
)
Component Library:
```
@kdcloudjs/shoelace
```
- Note: This library is a 100% clone of
```
@shoelace-style/shoelace
```
  , standard component APIs are completely identical, only KWC business components are added.
- Standard Component Documentation: https://shoelace.style/
All 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.

6. Output Checklist

Before submitting code, self-check:

New components are created using

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

Have read and complied with all constraints in
```
rule.md
```
in this Skill's directory
No JS expressions, no self-closing tags, no IDs in HTML
```
sl-*
```
tags include
```
kwc:external
```
Shoelace custom events are bound in JS, only native events are bound in HTML
CSS styles use Design Tokens, no hard-coded color values/spacing/font sizes/border radii
Have not run any ESLint/Prettier fix commands and ignored all ESLint format errors