用途：在 KWC 项目中，当工程已确认使用 React 框架后，本 Skill 负责指导 React 组件的代码编写规范与组件使用，属于 kwc-project-scaffold 的下游执行角色，仅承担代码编写和修改，不直接承接用户需求，也不创建文件。
前置条件：必须同时满足当前目录已存在 .kd/config.json、其中 framework 字段为 react、工程已通过 kwc-project-scaffold 完成初始化。若不符合，应停止使用并切换到 kwc-project-scaffold。工程初始化、创建组件或页面、生成或修改 .js-meta.kwc 与 .page-meta.kwp 元数据、环境配置、部署、调试等操作均不在本 Skill 范围内。
主要能力与工作流：新建组件须用 CLI 而非手工创建：kd project create [组件名] --type kwc，组件命名遵循 PascalCase。代码实现与修改参考 app/kwc/exampleComponent 及本 Skill 的 rule.md 开发范例，并遵守其硬性约束。涉及 Shoelace 组件时需正确使用 React Wrapper 与类型导入。完成后按项目入口更新 app/kwc/main* 引用，并运行 npm run dev 验证。
关键约束：组件导入使用 import SlInput from '@kdcloudjs/shoelace/dist/react/input/index.js'; 业务组件导入使用 import SlLookup from '@kdcloudjs/shoelace-biz/dist/react/lookup/index.js'; 类型导入示例 import type SlInputElement from '@kdcloudjs/shoelace/dist/components/input/input.js'; JSX 事件须映射为 onSl*，如 <SlInput onSlChange={handleChange} />，并使用 CustomEvent 类型断言。CSS 必须使用 Shoelace Design Token，如 var(--sl-color-)、var(--sl-spacing-)、var(--sl-font-size-)、var(--sl-border-radius-)，禁止硬编码 hex 色值和 px 数值，详见 ./reference/css-design-tokens.md。
资源：reference/ 目录提供基础扩展组件与业务组件文档（如 Table、DatePicker、Upload、Lookup 等），使用前须阅读对应文档；标准组件参考 https://shoelace.style/。提交前需按输出检查清单自查，且不运行任何 ESLint/Prettier 修复命令。