SuperAPI AI Directory
Partner with us中文AI newsFavorites
Skillskwc-vue-development

kwc-vue-development

Frontend & websites

View repository

Updated 10-16 08:08

About this skill

KWC Vue Development Expert

Once the project has been confirmed to use the Vue framework, this Skill is responsible for code writing standards and component usage guidance under that framework. Based on Vue 3 (Composition API + <script setup>) for development.

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 vue
  3. The project has been initialized via kwc-project-scaffold Complete initialization

This Skill is prohibited in the following scenarios and must be handed over to kwc-project-scaffold：

  • Project initialization (kd project init）
  • Create 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）
  • Debug operations (kd debug) — Debugging is handled by kwc-project-scaffold and must be 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 Vue components. Important: You must strictly comply withthe hard constraints defined in the rule.md file in this Skill's directory. 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 is vue。
  • Important: If the current environmentdoes not meetthe above conditions,you must immediately stopusing all constraints of this Skill, and instead assist the user according togeneric Vue Web projectstandards.

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,prohibitedto use the Options API (export default { data(), methods, computed, watch }）
  • Reactivity: use ref() / reactive() to declare reactive state,prohibitedto use this. When passing complex data (objects/arrays) to Web Components, because the underlying layer needs to detect reference changes,absolutely prohibited push or splice in-place modification; new references must be produced by reassignment (e.g., data.value = [...data.value, new]) to trigger rendering.
  • Lifecycle: use onMounted() / onUnmounted() and other Composition API hooks
  • Template Syntax：
    • Attribute binding::prop="value"
    • Event binding:@sl-change="handler"(Shoelace components use the @sl-* prefix)
    • Passing object/array properties to a Web Component: must use camelCase + .prop modifier： 
      【✅ 正确】 <sl-table :dataSource.prop="rows" :columns.prop="cols" :rowSelection.prop="sel"></sl-table>
【❌ 错误】 <sl-table :data-source="rows" :row-selection="sel"></sl-table>
    • Numeric properties use camelCase without .prop(e.g., :pageSize="20"）；String/boolean properties must use camelCase(e.g., rowKey="id"、showHeader、simpleMode），Prohibited kebab-case (e.g., row-key、show-header）
  • TypeScript: Recommended to use <script setup lang="ts">

3. Standard Workflow

  1. Create a new component：

    • Mustuse the CLI tool; manually creating files is strictly prohibited: 
      kd project create [组件名] --type kwc
    • Component naming follows PascalCase。

  2. Code implementation and modification：

    • Learning: Prioritize referring to app/kwc/exampleComponent。
    • Strict compliance: Code must comply withthe rule.md all constraints (import specifications, event binding, etc.).
    • Shoelace integration: When Shoelace components are involved, ensure to import from the correct path.

  3. Verification and delivery：

    • Update app/kwc/main* references according to the project entry.
    • Run npm run dev for verification.

4. Key Constraints Summary (For details, see rule.md under this Skill directory)

  • Import：import '@kdcloudjs/shoelace/dist/components/input/input.js';
  • Business component import：import '@kdcloudjs/shoelace-biz/dist/components/lookup/lookup.js';(Note the package name is shoelace-biz）
  • Template: Use <sl-input> (kebab-case)。
  • Event: Use @sl-change 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 values is prohibited. For details, see ./reference/css-design-tokens.md。

5. Common Resources

  • Extended component documentation(located in this Skill's reference/ directory):
    • Basic extended components（@kdcloudjs/shoelace）：
    • 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
    • Cascader: reference/sl-cascader.md
    • FloatButton: reference/sl-float-button.md
    • FloatButtonGroup: reference/sl-float-button.md
    • Sender: reference/sender/index.md
    • SenderHeader: reference/sender/index.md
    • SenderSwitch: reference/sender/index.md
    • Steps: reference/sl-steps.md
    • Grid: reference/sl-grid.md
    • Notification: reference/sl-notification.md
    • RadioGroup: reference/sl-radio-group.md
    • Space: reference/sl-space.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, import path is @kdcloudjs/shoelace-biz/dist/components/...）：
    • Lookup (F7): reference/sl-lookup.md
    • Must read the corresponding documentation before use。
  • Standard component documentation：https://shoelace.style/

6. Output Checklist

Before submitting code, please self-check:

  • Used Vue 3 Composition API (<script setup>), did not use Options API
  • New component used kd project create [组件名] --type kwc
  • Have read and complied withthe rule.md all constraints
  • Imported all used Web Components
  • Template tags are kebab-case
  • Events use @sl-*
  • Did not runany ESLint/Prettier fix commands, andignoredall ESLint format errors