kwc-vue-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 Vue architecture (check .kd directory, etc.) and apply mandatory development specifications (i.e., rule.md in 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-13

NPX Install

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

SKILL.md Content (Chinese)

View Translation Comparison →

KWC Vue Development Expert

This Skill is the entry point and commander-in-chief for KWC Vue project development. Development is based on Vue 3 (Composition API +

<script setup>

).

Core Responsibilities

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

rule.md

file in 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
```
vue
```
.
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 according to general Vue Web project standards.

2. Vue 3 Development Basics

This project is based on Vue 3, and the following basic principles must be followed:

Composition API: Uniformly use

<script setup>

syntax, forbid using Options API (

export default { data(), methods, computed, watch }

)

Reactivity: Use
```
ref()
```
/
```
reactive()
```
to declare reactive states, forbid using
```
this
```
. When passing complex data (objects/arrays) to Web Components, since the underlying layer needs to detect reference changes, absolutely forbid in-place modifications like
```
push
```
or
```
splice
```
, and must trigger rendering by reassigning to generate a new reference (e.g.,
```
data.value = [...data.value, new]
```
).
Lifecycle: Use Composition API hooks such as
```
onMounted()
```
/
```
onUnmounted()
```

Template Syntax:

Property Binding:
```
:prop="value"
```
Event Binding:
```
@sl-change="handler"
```
(Shoelace components use the
```
@sl-*
```
prefix)

Passing object/array properties to Web Components: Must use camelCase +
.prop
modifier:

html

【✅ Correct】 <sl-table :dataSource.prop="rows" :columns.prop="cols" :rowSelection.prop="sel"></sl-table>
【❌ Wrong】 <sl-table :data-source="rows" :row-selection="sel"></sl-table>

Numeric type properties use camelCase without
```
.prop
```
(e.g.,
```
:pageSize="20"
```
); string/boolean properties must use camelCase (e.g.,
```
rowKey="id"
```
,
```
showHeader
```
,
```
simpleMode
```
), forbid kebab-case (e.g.,
```
row-key
```
,
```
show-header
```
)

TypeScript: Recommended to use
```
<script setup lang="ts">
```

3. Standard Workflow (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
```
PascalCase
```
  .
Code Implementation and Modification:
- Learning: Prioritize referencing
```
app/kwc/exampleComponent
```
  .
- Strict Compliance: Code must comply with all constraints in rule.md in this Skill directory (import specifications, event binding, etc.).
- Shoelace Integration: When involving Shoelace components, ensure import from the correct path.
Verification and Delivery:
- Update
```
app/kwc/main*
```
  references according to the project entry.
- Run
```
npm run dev
```
  for verification.

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

Import:

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

Template: Use
```
<sl-input>
```
(kebab-case).
Events: Use
```
@sl-change
```
for binding.
CSS: Styles must use Shoelace Design Token (
```
var(--sl-color-*)
```
,
```
var(--sl-spacing-*)
```
,
```
var(--sl-font-size-*)
```
,
```
var(--sl-border-radius-*)
```
), hardcoding hex color values and px numbers is forbidden. See
```
./reference/css-design-tokens.md
```
for details.

5. 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/

6. Output Checklist

Before submitting code, self-check:

Used Vue 3 Composition API (
```
<script setup>
```
), did not use Options API

Used

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

for new components

Read and complied with all constraints in rule.md in this Skill directory
Imported all used Web Components
Template tags are kebab-case
Events use
```
@sl-*
```
Did not run any ESLint/Prettier fix commands, and ignored all ESLint format errors