@gong-ym/ai-spec-auto 0.2.3

package/.agents/skills/domains/web/web-design-guidelines/SKILL.md

@@ -0,0 +1,40 @@
+---
+name: web-design-guidelines
+description: Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".
+compatibility: Requires network access to fetch the latest Web Interface Guidelines and local file access to the code or patterns being reviewed.
+metadata:
+  author: vercel
+  version: "1.0.0"
+  argument-hint: <file-or-pattern>
+---
+
+# Web Interface Guidelines
+
+Review files for compliance with Web Interface Guidelines.
+
+## How It Works
+
+1. Fetch the latest guidelines from the source URL below
+2. Read the specified files (or prompt user for files/pattern)
+3. Check against all rules in the fetched guidelines
+4. Output findings in the terse `file:line` format
+
+## Guidelines Source
+
+Fetch fresh guidelines before each review:
+
+```
+https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md
+```
+
+Use WebFetch to retrieve the latest rules. The fetched content contains all the rules and output format instructions.
+
+## Usage
+
+When a user provides a file or pattern argument:
+1. Fetch guidelines from the source URL above
+2. Read the specified files
+3. Apply all rules from the fetched guidelines
+4. Output findings using the format specified in the guidelines
+
+If no files specified, ask the user which files to review.

package/.agents/skills/profiles/nestjs/README.md

@@ -0,0 +1,4 @@
+# NestJS Profile Skills
+
+当前版本暂未内置 NestJS 专属技能目录内容，本目录仅作为 profile（技术栈）占位入口，
+用于保持 registry（注册表）引用完整并通过同步校验。

package/.agents/skills/profiles/node-tooling/README.md

@@ -0,0 +1,9 @@
+# Node.js Tooling Profile Skills
+
+此目录存放 Node.js Tooling profile 专属技能。
+
+当前已规划（待实现）的技能：
+
+- `create-command` — 按团队规范创建 CLI 命令及参数定义
+- `create-contract` — 按团队规范创建 Contract / Schema 文件
+- `create-worker` — 按团队规范创建 Worker 任务

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

@@ -0,0 +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'`？
+- [ ] 未重复处理接口错误？
+- [ ] 类型与接口文档一致？

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

@@ -0,0 +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，且颜色使用主题变量？
+- [ ] 组件文件是否过大，是否需要拆分子组件？

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

@@ -0,0 +1,168 @@
+---
+name: create-route
+description: 指导在前端项目中按团队规范创建和维护路由与页面，包括路由模块配置、页面目录结构及懒加载用法。当前端需要新增或重构页面路由时使用本技能。
+compatibility: Requires a local React project workspace and the repository's route/page conventions under .agents/rules/.
+---
+
+# 创建与维护路由
+
+## 重要提示
+
+在开始创建之前，请务必阅读以下关键规范：
+
+**必读规范**：
+- `.agents/rules/03-项目结构.md` - 目录结构要求
+- `.agents/rules/06-路由规范.md` - 路由配置约束
+
+**常见错误警告**：
+- 样式文件必须使用 `.module.scss` 后缀，禁止使用 `.scss`
+- 页面目录名使用 `kebab-case`，例如 `login`、`user-manage`
+- 路由模块文件名使用 `kebab-case`，例如 `user-manage.ts`
+- 必须在全局唯一路由入口注册，禁止多处维护同一条路由
+
+## 常见错误
+
+- 不要在路由模块里直接夹带页面实现逻辑
+- 不要绕过唯一入口去重复注册同一条路由
+
+---
+
+## 目录结构概览
+
+```text
+src/
+├── router/
+│   ├── index.ts               # 路由入口，创建实例、注册守卫
+│   └── modules/               # 按业务模块拆分路由配置
+│       ├── dashboard.ts
+│       └── user-manage.ts
+└── pages/
+    ├── dashboard/
+    │   ├── index.tsx           # 页面主组件
+    │   └── index.module.scss   # 样式文件（必须是 .module.scss）
+    └── user-manage/
+        ├── index.tsx
+        ├── index.module.scss
+        └── components/         # 页面专用子组件（可选）
+            └── user-table/
+                ├── index.tsx
+                └── index.module.scss
+```
+
+---
+
+## 步骤 1：创建页面组件
+
+```tsx
+// src/pages/user-manage/index.tsx
+import React from 'react'
+import styles from './index.module.scss'
+
+const UserManagePage: React.FC = () => {
+  return <div className={styles.userManage}>UserManage</div>
+}
+
+export default UserManagePage
+```
+
+**验证点**：
+- [ ] 页面入口文件为 `index.tsx`
+- [ ] 样式导入为 `./index.module.scss`
+- [ ] 默认导出组件
+
+---
+
+## 步骤 2：创建路由模块配置
+
+```tsx
+// src/router/modules/user-manage.ts
+import { lazy } from 'react'
+
+const UserManage = lazy(() => import('@/pages/user-manage'))
+
+const routes = [
+  {
+    path: '/user-manage',
+    element: <UserManage />,
+    meta: { title: '用户管理', requiresAuth: true },
+  },
+]
+
+export default routes
+```
+
+**验证点**：
+- [ ] 使用 `React.lazy` 懒加载页面组件
+- [ ] 懒加载指向 `@/pages/<page-name>`
+- [ ] 配置了 `meta.title` 和 `meta.requiresAuth`
+- [ ] 不在模块中声明嵌套路由入口（如 `<Routes>`）
+
+---
+
+## 步骤 3：在路由入口注册
+
+在 `src/router/index.ts` 中导入并展开模块路由：
+
+```tsx
+import userManageRoutes from './modules/user-manage'
+
+const routes = [
+  ...userManageRoutes,
+  // ...其他模块
+]
+```
+
+**验证点**：
+- [ ] 只在 `src/router/index.ts` 唯一入口注册
+- [ ] 导入路径正确 `./modules/<module-name>`
+
+---
+
+## 步骤 4：验证文件结构
+
+创建完成后，检查目录结构是否符合规范：
+
+```text
+src/pages/<page-name>/
+  ├─ index.tsx             ✓ 页面主组件
+  └─ index.module.scss     ✓ 样式文件（必须是 .module.scss）
+
+src/router/modules/
+  └─ <module-name>.ts      ✓ 路由配置
+```
+
+---
+
+## 页面级组件放置
+
+如果页面需要专用组件，创建 `components/` 目录：
+
+```text
+src/pages/user-manage/
+  ├─ index.tsx
+  ├─ index.module.scss
+  └─ components/           # 页面专用组件
+      └─ user-table/
+          ├─ index.tsx
+          └─ index.module.scss
+```
+
+**组件放置规则**（详见 `.agents/rules/04-组件规范.md`）：
+- 页面级组件（仅当前页面使用）→ `src/pages/<page>/components/`
+- 通用组件（多处复用）→ `src/components/`
+
+---
+
+## 快速检查清单
+
+创建完成后，逐项核对：
+
+- [ ] 页面目录名为 `kebab-case`，位于 `src/pages/` 下
+- [ ] 页面入口为 `index.tsx`，默认导出
+- [ ] 样式文件为 `index.module.scss`（非 `.scss`）
+- [ ] 路由模块在 `src/router/modules/<module-name>.ts`
+- [ ] 使用 `React.lazy` 懒加载页面
+- [ ] 路由在 `src/router/index.ts` 唯一入口注册
+- [ ] 组件放置位置正确（通用 vs 页面级）
+
+**样式还原检查**：涉及 UI 还原的样式开发，请参考 `.agents/skills/create-proposal/SKILL.md` 中的「样式还原验证检查清单」及对应页面的 `docs/样式还原/<名称>-UI分析清单.md`。