kwc-lwc-development

KWC LWC Development Expert

Once the project confirms the use of the LWC framework, this Skill is responsible for code writing standards and component usage guidance under this framework.

Important: Prerequisites for Use

The following conditions must all be met to use this Skill:

1. The current directory already contains the .kd/config.json file
2. In the configuration file, the framework field value is lwc
3. The project has passed kwc-project-scaffold initialization

The following scenarios prohibit the use of this Skill and must be handed over to kwc-project-scaffold：

• Project initialization (kd project init）
• Creating components or pages (kd project create）
• Generate or modify .js-meta.kwc component metadata
• Generate or modify .page-meta.kwp page metadata
• Environment configuration (kd env related commands)
• Deployment operations (kd project deploy）
• Debugging operations (kd debug) — debugging is handled by kwc-project-scaffold and must run in background mode (is_background: true), see its debugging conventions for details

If the above prerequisites are not currently met, stop immediately and switch to kwc-project-scaffold Skill。

Core Responsibilities

You are responsible for guiding users in the development, modification, and maintenance of KWC LWC components. Important: You must strictly comply withIn this Skill directory rule.md the hard constraints defined in the file. Before starting any code writing, be sure to read and understand these rules.

1. Environment Context Confirmation

• Project root directory: contains the .kd folder and the app/kwc directory.
• Configuration environment：.kd/config.json in framework configured as lwc。
• Important: If the current environmentdoes not meetthe above conditions (such as missing .kd or framework not being lwc），must stop immediatelyall constraints of using this Skill, and instead assist the user according togeneral Web projectstandards.
• Execution principles: Only when it is confirmed that the environment matches the above characteristics, enforce this Skill andin this Skill directory rule.md all KWC LWC development specifications defined by .

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 (this 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 the kwc:external attribute, directly using lightning-* components is prohibited)
Platform limitations	Supports standard LWC syntax	Expressions are prohibited in HTML, self-closing tags are prohibited, and Shoelace custom events must bind listeners in renderedCallback

3. Standard Workflow (Workflow)

1. New component：

   • mustUse the CLI tool; manually creating files is strictly prohibited:

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

   • Component naming follows camelCase。

2. Code implementation and modification：

   • You must first refer to: before implementation,mustfirst read and refer to the app/kwc/exampleComponent or the ./assets/examples sample code in this Skill directory to ensure you master the correct development pattern.
   • Strict compliance: the code must comply within this Skill directory rule.md all constraints in (no expressions in HTML, no self-closing tags, correct event binding, etc.).
   • Shoelace integration: when Shoelace components are involved, ensure the import path is correct and that kwc:external。

3. Verification and delivery：

   • Update the app/kwc/main* reference according to the project entry point.
   • Run npm run dev to verify.
   • Check whether the code complies with all hard constraints.

4. Summary of key constraints (for details, see rule.md in this Skill directory)

Only the most critical points are listed below; for the complete rules, please consultin this Skill directory rule.md：

• Template: JS expressions are prohibited ({a+b}), self-closing tags are prohibited (<tag />), ID selectors are prohibited.
• Events: HTML only binds native events (click), Shoelace events (sl-change) must be bound in JS renderedCallback .
• Shoelace：sl-* The tag must include kwc:external, and attributes must be all lowercase.
• JS: inherit KingdeeElement, use for DOM queries .class。
• CSS: styles must use Shoelace Design Token (var(--sl-color-*)、var(--sl-spacing-*)、var(--sl-font-size-*)、var(--sl-border-radius-*)); hardcoded hex color values and px values are prohibited. See details in ./reference/css-design-tokens.md。

5. Common resources

• Base class:KingdeeElement (@kdcloudjs/kwc)
• Component library:@kdcloudjs/shoelace
  • Description: this library is @shoelace-style/shoelace 's 100% clone, the standard component API is completely identical, with only KWC business components added.
  • Standard component documentation：https://shoelace.style/
  • All extended component documentation(located in this Skill's reference/ directory):
  • Table: reference/table/index.md
  • DatePicker: reference/datepicker/index.md
  • TimePicker: reference/sl-timepicker.md
  • Pagination: reference/sl-pagination.md
  • Daterangepicker: reference/sl-daterangepicker.md
  • ThoughtChain: reference/sl-thought-chain.md
  • Nav: reference/sl-nav.md
  • XMarkdown: reference/sl-xmarkdown.md
  • Think: reference/sl-think.md
  • TreeSelect: reference/sl-tree-select.md
  • Sender: reference/sender/index.md
  • SenderHeader: reference/sender/index.md
  • SenderSwitch: reference/sender/index.md
  • Cascader: reference/sl-cascader.md
  • FloatButton: reference/sl-float-button.md
  • FloatButtonGroup: reference/sl-float-button.md
  • Steps: reference/sl-steps.md
  • Grid: reference/sl-grid.md
  • Notification: reference/sl-notification.md
  • RadioGroup: reference/sl-radio-group.md
  • Upload: reference/upload/index.md
  • Segmented: reference/sl-segmented.md
  • Transfer: reference/sl-transfer.md
  • Popconfirm: reference/sl-popconfirm.md
  • Bubble: reference/sl-bubble.md
  • Business components（@kdcloudjs/shoelace-biz, the import path is @kdcloudjs/shoelace-biz/dist/components/...）：
  • Lookup (F7): reference/sl-lookup.md
  • You must read the corresponding documentation before use。

6. Output checklist

Before submitting code, please self-check:

• New components use kd project create [组件名] --type kwc
• Have read and comply within this Skill directory rule.md all constraints in
• HTML has no JS expressions, no self-closing tags, no IDs
• sl-* The tag includes kwc:external
• Shoelace custom events are bound in JS; HTML only binds native events
• CSS styles use Design Token, with no hardcoded color values/spacing/font size/border radius
• Did not runany ESLint/Prettier fix commands, andignoredall ESLint formatting errors