@gong-ym/ai-spec-auto 0.2.14 → 0.2.15

package/.agents/skills/profiles/react/create-api/SKILL.md

@@ -1,145 +1,145 @@
----
-name: create-api
-description: 指导在 React 项目中按团队规范创建和维护 HTTP 接口，包括类型定义、请求封装、命名约定与错误处理。当前端需要新增或调整 API 时使用本技能。
-compatibility: Requires a local React project workspace and the repository's API/rule conventions under .agents/rules/.
----
-
-# 创建与维护 API
-
-## 使用场景
-
-当前端需要：
-
-- 为某个业务模块 **新增接口**
-- 为已有接口 **补充类型定义**
-- **重构接口文件** 或拆分模块
-
-请使用本技能，并同时遵守 `.agents/rules/05-API规范.md` 中的强制规则。
-
----
-
-## 步骤 1：确定接口归属模块
-
-1. 先确定业务模块名称（如 `banner`、`user`、`ai-editor`）。
-2. 对应的文件归属：
-   - 请求封装文件：`src/api/<module>.ts`
-   - 类型定义文件：`src/api/types/<module>.ts`
-
-**约定：**
-
-- 所有请求函数都放在 `src/api/` 下按模块拆分，禁止在组件、page、store 中直接调用 `request`。
-
----
-
-## 步骤 2：定义类型
-
-在 `src/api/types/<module>.ts` 中定义请求/响应类型：
-
-```ts
-// src/api/types/banner.ts
-export interface Banner {
-  id: number;
-  title: string;
-  imageUrl: string;
-  status: number;
-}
-
-export interface GetBannerListParams {
-  page: number;
-  pageSize: number;
-  status?: number;
-}
-
-export interface GetBannerListResult {
-  list: Banner[];
-  total: number;
-}
-
-export type CreateBannerParams = Pick<Banner, 'title' | 'imageUrl'>;
-export type UpdateBannerParams = CreateBannerParams & { id: number };
-```
-
-**注意：**
-
-- 请求参数类型和返回值类型应严格依据 Apifox 等接口文档，**禁止凭空创造字段**。
-- 返回值一般是 `{ code: number; message: string; data: {...} }`，`requestConfig` 的 `API_RESPONSE_TRANSFER_METHOD` 内部已处理 `code` 判断并返回 `data`，因此这里只需定义 `data` 的结构。
-
----
-
-## 步骤 3：创建请求函数
-
-在 `src/api/<module>.ts` 中：
-
-```ts
-// src/api/banner.ts
-import { request } from '@koi-design/vix-tools';
-import type {
-  GetBannerListParams,
-  GetBannerListResult,
-  CreateBannerParams,
-  UpdateBannerParams,
-} from './types/banner';
-
-export function getBannerListApi(data: GetBannerListParams): Promise<GetBannerListResult> {
-  return request({ url: '/api/banner/page', method: 'post', data });
-}
-
-export function getBannerDetailApi(id: number): Promise<Banner> {
-  return request({ url: `/api/banner/${id}`, method: 'get' });
-}
-
-export function createBannerApi(data: CreateBannerParams): Promise<void> {
-  return request({ url: '/api/banner', method: 'post', data });
-}
-
-export function updateBannerApi(data: UpdateBannerParams): Promise<void> {
-  return request({ url: `/api/banner/${data.id}`, method: 'put', data });
-}
-
-export function deleteBannerApi(id: number): Promise<void> {
-  return request({ url: `/api/banner/${id}`, method: 'delete' });
-}
-```
-
----
-
-## 步骤 4：命名与错误处理约定
-
-**命名（必须遵守 `05-API规范` 中的 NON-NEGOTIABLE）：**
-
-- 获取列表：`getXxxListApi`
-- 获取详情：`getXxxDetailApi`
-- 创建：`createXxxApi`
-- 更新：`updateXxxApi`
-- 删除：`deleteXxxApi`
-- 统一使用 `Api` 后缀，**禁止** 使用 `fetchXxx` 等前缀。
-
-**错误处理：**
-
-- 接口错误由 `requestConfig` 统一处理，业务代码中**禁止重复**加 `message.error` 等错误提示。
-- 业务侧只处理成功逻辑，以及**前端自身校验错误**（如表单校验失败）。
-
----
-
-## 步骤 5：在业务代码中使用
-
-在组件或 store 中使用时：
-
-```ts
-import { getBannerListApi } from '@/api/banner';
-
-const loadData = async () => {
-  const res = await getBannerListApi({ page: 1, pageSize: 10 });
-  // res 类型已经是 GetBannerListResult
-};
-```
-
----
-
-## 快速检查清单
-
-- [ ] 类型在 `src/api/types/<module>.ts`，请求在 `src/api/<module>.ts`？
-- [ ] 命名符合 `getXxxApi` / `createXxxApi` / `updateXxxApi` / `deleteXxxApi`？
-- [ ] 使用 `import { request } from '@koi-design/vix-tools'`？
-- [ ] 未重复处理接口错误？
-- [ ] 类型与接口文档一致？
+---
+name: create-api
+description: 指导在 React 项目中按团队规范创建和维护 HTTP 接口，包括类型定义、请求封装、命名约定与错误处理。当前端需要新增或调整 API 时使用本技能。
+compatibility: Requires a local React project workspace and the repository's API/rule conventions under .agents/rules/.
+---
+
+# 创建与维护 API
+
+## 使用场景
+
+当前端需要：
+
+- 为某个业务模块 **新增接口**
+- 为已有接口 **补充类型定义**
+- **重构接口文件** 或拆分模块
+
+请使用本技能，并同时遵守 `.agents/rules/05-API规范.md` 中的强制规则。
+
+---
+
+## 步骤 1：确定接口归属模块
+
+1. 先确定业务模块名称（如 `banner`、`user`、`ai-editor`）。
+2. 对应的文件归属：
+   - 请求封装文件：`src/api/<module>.ts`
+   - 类型定义文件：`src/api/types/<module>.ts`
+
+**约定：**
+
+- 所有请求函数都放在 `src/api/` 下按模块拆分，禁止在组件、page、store 中直接调用 `request`。
+
+---
+
+## 步骤 2：定义类型
+
+在 `src/api/types/<module>.ts` 中定义请求/响应类型：
+
+```ts
+// src/api/types/banner.ts
+export interface Banner {
+  id: number;
+  title: string;
+  imageUrl: string;
+  status: number;
+}
+
+export interface GetBannerListParams {
+  page: number;
+  pageSize: number;
+  status?: number;
+}
+
+export interface GetBannerListResult {
+  list: Banner[];
+  total: number;
+}
+
+export type CreateBannerParams = Pick<Banner, 'title' | 'imageUrl'>;
+export type UpdateBannerParams = CreateBannerParams & { id: number };
+```
+
+**注意：**
+
+- 请求参数类型和返回值类型应严格依据 Apifox 等接口文档，**禁止凭空创造字段**。
+- 返回值一般是 `{ code: number; message: string; data: {...} }`，`requestConfig` 的 `API_RESPONSE_TRANSFER_METHOD` 内部已处理 `code` 判断并返回 `data`，因此这里只需定义 `data` 的结构。
+
+---
+
+## 步骤 3：创建请求函数
+
+在 `src/api/<module>.ts` 中：
+
+```ts
+// src/api/banner.ts
+import { request } from '@koi-design/vix-tools';
+import type {
+  GetBannerListParams,
+  GetBannerListResult,
+  CreateBannerParams,
+  UpdateBannerParams,
+} from './types/banner';
+
+export function getBannerListApi(data: GetBannerListParams): Promise<GetBannerListResult> {
+  return request({ url: '/api/banner/page', method: 'post', data });
+}
+
+export function getBannerDetailApi(id: number): Promise<Banner> {
+  return request({ url: `/api/banner/${id}`, method: 'get' });
+}
+
+export function createBannerApi(data: CreateBannerParams): Promise<void> {
+  return request({ url: '/api/banner', method: 'post', data });
+}
+
+export function updateBannerApi(data: UpdateBannerParams): Promise<void> {
+  return request({ url: `/api/banner/${data.id}`, method: 'put', data });
+}
+
+export function deleteBannerApi(id: number): Promise<void> {
+  return request({ url: `/api/banner/${id}`, method: 'delete' });
+}
+```
+
+---
+
+## 步骤 4：命名与错误处理约定
+
+**命名（必须遵守 `05-API规范` 中的 NON-NEGOTIABLE）：**
+
+- 获取列表：`getXxxListApi`
+- 获取详情：`getXxxDetailApi`
+- 创建：`createXxxApi`
+- 更新：`updateXxxApi`
+- 删除：`deleteXxxApi`
+- 统一使用 `Api` 后缀，**禁止** 使用 `fetchXxx` 等前缀。
+
+**错误处理：**
+
+- 接口错误由 `requestConfig` 统一处理，业务代码中**禁止重复**加 `message.error` 等错误提示。
+- 业务侧只处理成功逻辑，以及**前端自身校验错误**（如表单校验失败）。
+
+---
+
+## 步骤 5：在业务代码中使用
+
+在组件或 store 中使用时：
+
+```ts
+import { getBannerListApi } from '@/api/banner';
+
+const loadData = async () => {
+  const res = await getBannerListApi({ page: 1, pageSize: 10 });
+  // res 类型已经是 GetBannerListResult
+};
+```
+
+---
+
+## 快速检查清单
+
+- [ ] 类型在 `src/api/types/<module>.ts`，请求在 `src/api/<module>.ts`？
+- [ ] 命名符合 `getXxxApi` / `createXxxApi` / `updateXxxApi` / `deleteXxxApi`？
+- [ ] 使用 `import { request } from '@koi-design/vix-tools'`？
+- [ ] 未重复处理接口错误？
+- [ ] 类型与接口文档一致？

package/.agents/skills/profiles/react/create-component/SKILL.md

@@ -1,160 +1,160 @@
----
-name: create-component
-description: 指导在前端项目中按团队规范创建和拆分 React 组件，包括目录结构、文件命名、样式与主题变量使用。当前端需要新增或重构组件时使用本技能。
-compatibility: Requires a local React project workspace and the repository's component/style conventions under .agents/rules/.
----
-
-# 创建与拆分组件
-
-## 使用场景
-
-当你需要：
-
-- 新增一个**可复用通用组件**
-- 为某个页面新增**页面级组件**
-- 拆分过大的页面/组件文件
-
-请使用本技能，并同时遵守 `.agents/rules/03-项目结构.md` 与 `.agents/rules/04-组件规范.md`。
-
-## 注意事项
-
-- 不要把页面私有组件错误放进全局 `src/components/`
-- 样式还原场景下禁止直接硬编码主题主色
-
----
-
-## 组件放在哪里？
-
-详见 `.agents/rules/04-组件规范.md` 中的"组件放置决策树"。
-
-- **通用组件**（跨页面复用）：`src/components/<component-name>/`
-- **页面级组件**（只在单页使用）：`src/pages/<page>/components/`
-
-命名约定：
-
-- 目录名：`kebab-case`，例如 `error-boundary`
-- React 组件名：`PascalCase`，例如 `ErrorBoundary`
-
----
-
-## 标准目录结构
-
-通用组件示例：
-
-```text
-src/components/shentu-button/
-  ├─ index.tsx
-  └─ index.module.scss
-```
-
-页面级组件示例：
-
-```text
-src/pages/home/components/header/
-  ├─ index.tsx
-  └─ index.module.scss
-```
-
----
-
-## 步骤 1：创建组件骨架
-
-```tsx
-// src/components/shentu-button/index.tsx
-import React from 'react';
-import classNames from 'classnames';
-import styles from './index.module.scss';
-
-interface ShentuButtonProps {
-  onClick: () => void;
-  className?: string;
-}
-
-export const ShentuButton: React.FC<ShentuButtonProps> = ({onClick, className, children}) => {
-  return (
-    <button
-      type="button"
-      className={classNames(styles.shentuButton, className)}
-      onClick={onClick}
-    >
-      {children}
-    </button>
-  );
-};
-```
-
-并在 `src/components/index.ts` 中集中导出：
-
-```ts
-// src/components/index.ts
-export * from './shentu-button';
-```
-
----
-
-## 步骤 2：样式与主题变量
-
-在 `index.module.scss` 中：
-
-```scss
-// src/components/shentu-button/index.module.scss
-.shentuButton {
-  padding: 8px 16px;
-  border-radius: 4px;
-  border: none;
-  cursor: pointer;
-
-  // 必须使用主题变量，禁止硬编码主色
-  background-color: var(--ant-color-primary);
-  color: var(--ant-color-text);
-}
-```
-
-**原则：**
-
-- 必须使用 SCSS Modules：`index.module.scss`
-- 自定义颜色必须使用主题 CSS 变量：
-  - Ant Design 变量：`var(--ant-color-primary)`、`var(--ant-color-text)` 等
-  - 自定义变量：`var(--shentu-card-bg)`、`var(--shentu-border-radius)` 等
-- 禁止在组件样式中直接硬编码主色，如 `#1677ff`。
-
-**样式还原检查**：涉及 UI 还原的组件样式开发，请参考 `.agents/skills/create-proposal/SKILL.md` 中的「样式还原验证检查清单」及对应页面的 `docs/样式还原/<名称>-UI分析清单.md`。
-
----
-
-## 步骤 3：组件职责与拆分
-
-- 单个 `.tsx` 文件建议不超过 **400 行**，超过时优先考虑拆分为子组件。
-- 拆分时遵循：
-  - **页面级组件**：只在一个页面使用 → 放在该页面的 `components/` 下。
-  - **通用组件**：在多个页面使用 → 提取到 `src/components`。
-- 一个组件应聚焦单一职责（一个明确的 UI 区块或交互单元）。
-
----
-
-## 步骤 4：与 Ant Design 协同
-
-通用交互控件应基于 Antd 进行二次封装：
-
-```tsx
-import React from 'react';
-import {Button, ButtonProps} from 'antd';
-
-type ShentuButtonProps = ButtonProps & {
-  // 可以扩展一些自定义属性
-};
-
-export const ShentuButton: React.FC<ShentuButtonProps> = (props) => {
-  return <Button type="primary" {...props} />;
-};
-```
-
----
-
-## 快速检查清单
-
-- [ ] 组件目录是否放在了正确位置（通用 vs 页面级）？
-- [ ] 是否使用了 `index.tsx + index.module.scss` 的结构？
-- [ ] 是否通过 `src/components/index.ts` 集中导出通用组件？
-- [ ] 样式是否全部使用 SCSS Modules，且颜色使用主题变量？
-- [ ] 组件文件是否过大，是否需要拆分子组件？
+---
+name: create-component
+description: 指导在前端项目中按团队规范创建和拆分 React 组件，包括目录结构、文件命名、样式与主题变量使用。当前端需要新增或重构组件时使用本技能。
+compatibility: Requires a local React project workspace and the repository's component/style conventions under .agents/rules/.
+---
+
+# 创建与拆分组件
+
+## 使用场景
+
+当你需要：
+
+- 新增一个**可复用通用组件**
+- 为某个页面新增**页面级组件**
+- 拆分过大的页面/组件文件
+
+请使用本技能，并同时遵守 `.agents/rules/03-项目结构.md` 与 `.agents/rules/04-组件规范.md`。
+
+## 注意事项
+
+- 不要把页面私有组件错误放进全局 `src/components/`
+- 样式还原场景下禁止直接硬编码主题主色
+
+---
+
+## 组件放在哪里？
+
+详见 `.agents/rules/04-组件规范.md` 中的"组件放置决策树"。
+
+- **通用组件**（跨页面复用）：`src/components/<component-name>/`
+- **页面级组件**（只在单页使用）：`src/pages/<page>/components/`
+
+命名约定：
+
+- 目录名：`kebab-case`，例如 `error-boundary`
+- React 组件名：`PascalCase`，例如 `ErrorBoundary`
+
+---
+
+## 标准目录结构
+
+通用组件示例：
+
+```text
+src/components/shentu-button/
+  ├─ index.tsx
+  └─ index.module.scss
+```
+
+页面级组件示例：
+
+```text
+src/pages/home/components/header/
+  ├─ index.tsx
+  └─ index.module.scss
+```
+
+---
+
+## 步骤 1：创建组件骨架
+
+```tsx
+// src/components/shentu-button/index.tsx
+import React from 'react';
+import classNames from 'classnames';
+import styles from './index.module.scss';
+
+interface ShentuButtonProps {
+  onClick: () => void;
+  className?: string;
+}
+
+export const ShentuButton: React.FC<ShentuButtonProps> = ({onClick, className, children}) => {
+  return (
+    <button
+      type="button"
+      className={classNames(styles.shentuButton, className)}
+      onClick={onClick}
+    >
+      {children}
+    </button>
+  );
+};
+```
+
+并在 `src/components/index.ts` 中集中导出：
+
+```ts
+// src/components/index.ts
+export * from './shentu-button';
+```
+
+---
+
+## 步骤 2：样式与主题变量
+
+在 `index.module.scss` 中：
+
+```scss
+// src/components/shentu-button/index.module.scss
+.shentuButton {
+  padding: 8px 16px;
+  border-radius: 4px;
+  border: none;
+  cursor: pointer;
+
+  // 必须使用主题变量，禁止硬编码主色
+  background-color: var(--ant-color-primary);
+  color: var(--ant-color-text);
+}
+```
+
+**原则：**
+
+- 必须使用 SCSS Modules：`index.module.scss`
+- 自定义颜色必须使用主题 CSS 变量：
+  - Ant Design 变量：`var(--ant-color-primary)`、`var(--ant-color-text)` 等
+  - 自定义变量：`var(--shentu-card-bg)`、`var(--shentu-border-radius)` 等
+- 禁止在组件样式中直接硬编码主色，如 `#1677ff`。
+
+**样式还原检查**：涉及 UI 还原的组件样式开发，请参考 `.agents/skills/create-proposal/SKILL.md` 中的「样式还原验证检查清单」及对应页面的 `docs/样式还原/<名称>-UI分析清单.md`。
+
+---
+
+## 步骤 3：组件职责与拆分
+
+- 单个 `.tsx` 文件建议不超过 **400 行**，超过时优先考虑拆分为子组件。
+- 拆分时遵循：
+  - **页面级组件**：只在一个页面使用 → 放在该页面的 `components/` 下。
+  - **通用组件**：在多个页面使用 → 提取到 `src/components`。
+- 一个组件应聚焦单一职责（一个明确的 UI 区块或交互单元）。
+
+---
+
+## 步骤 4：与 Ant Design 协同
+
+通用交互控件应基于 Antd 进行二次封装：
+
+```tsx
+import React from 'react';
+import {Button, ButtonProps} from 'antd';
+
+type ShentuButtonProps = ButtonProps & {
+  // 可以扩展一些自定义属性
+};
+
+export const ShentuButton: React.FC<ShentuButtonProps> = (props) => {
+  return <Button type="primary" {...props} />;
+};
+```
+
+---
+
+## 快速检查清单
+
+- [ ] 组件目录是否放在了正确位置（通用 vs 页面级）？
+- [ ] 是否使用了 `index.tsx + index.module.scss` 的结构？
+- [ ] 是否通过 `src/components/index.ts` 集中导出通用组件？
+- [ ] 样式是否全部使用 SCSS Modules，且颜色使用主题变量？
+- [ ] 组件文件是否过大，是否需要拆分子组件？