kwc-react-development

KWC React Development Expert

Once the project is confirmed to use the React framework, this Skill is responsible for code writing standards and component usage guidance under that framework.

Important: Prerequisites for Use

All of the following conditions must 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 react
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）
• 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 the responsibility of 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 React 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 is react。
• Important: If the current environmentdoes not meetthe above conditions,you must immediately stopusing all constraints of this Skill, and instead assist the user according to thegeneral React Web projectstandards.

2. Standard Workflow

1. Creating 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: preferentially refer to app/kwc/exampleComponent and in this Skill directoryrule.md the development examples in .
   • Strict compliance: the code must conform toin this Skill directory rule.md all constraints in (React Wrapper imports, onSl* events, etc.).
   • Shoelace Integration: when Shoelace components are involved, ensure correct use of React Wrapper and type imports.

3. Verification and Delivery：

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

3. Summary of Key Constraints (for details, see rule.md in this Skill directory)

• Import：import SlInput from '@kdcloudjs/shoelace/dist/react/input/index.js';
• Business component import：import SlLookup from '@kdcloudjs/shoelace-biz/dist/react/lookup/index.js';(Note: the package name is shoelace-biz）
• type：import type SlInputElement from '@kdcloudjs/shoelace/dist/components/input/input.js';
• JSX：<SlInput onSlChange={handleChange} />
• event: must be mapped to onSl*, and use CustomEvent type assertion
• 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. See ./reference/css-design-tokens.md。

4. 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, the import path is @kdcloudjs/shoelace-biz/dist/react/...）：
  • Lookup (F7): reference/sl-lookup.md
  • Before use, you must read the corresponding documentation。
• Standard Component Documentation：https://shoelace.style/

5. Output Checklist

Before submitting code, please self-check:

• Newly created components use kd project create [组件名] --type kwc
• Import paths include /index.js (component) and /[component]/[component].js (type, such as button/button.js)
• Event naming uses the onSl* prefix
• Correct type assertion was performed for the Event Target
• Strictly referenced the rule.md Strict Template in
• Not runany ESLint/Prettier fix commands