Agent Skills
返回列表
HLC 前端工程规范

HLC 前端工程规范

开发编程 更新于 2026.08.29

将以下提示词粘贴到你的 AI 对话框中：

请根据 https://skillhub.cn/install/skillhub.md，安装 @user_7525a05f/abcd-new。

技能介绍

要解决什么问题

多人维护同一套 React 前端时，最容易出现的是：接口调用散落（业务里直接 axios）、状态与 UI 缠在一起、以及 类型与目录各写各的。本技能把「只在本仓库 src/ 生效」的前端约定写清楚，让生成代码和人工改代码都对着同一份清单走。

技能如何约束实现

  • 技术栈边界：React 18+ 函数组件与 Hooks、TypeScript 5+、Vite 7+、Ant Design 5+、Zustand 5+、React Router 6+、SCSS Modules；网络层统一经 @/api，与现有拦截器及二次解析行为对齐。
  • 结构与分层：目录按 src/modules、components、hooks、api、store、interface、utils 划分；推荐容器 + 展示组件，副作用与请求编排进 hooks/controllers，展示组件用 props 驱动。
  • 可落地的页面模式：标准表单/列表/配置页优先 Section / Section.Module；CRUD 用强类型行数据与表单值，loadData 集中维护；需要骨架时对照 templates.md，主题与 Antd 覆盖见 styles-and-theme.md。
  • 执行清单：命名（PascalCase 组件、camelCase 变量、UPPER_SNAKE_CASE 常量）、Zustand store 含 actions + 带类型 selector、样式用 index.module.scss，:global 仅用于第三方类名覆写。

适用边界与注意点

规范不覆盖后端或脚本目录；禁止 class 组件、var、滥用 any、大段内联样式，以及在已有公共 dict/常量时硬编码文案。无明确迁移计划时，保持对外 props/interface 不变，按 types → hooks → 展示组件做低风险演进。

使用场景

  • 在本仓库 `src/modules` 下新增带表格与表单的 CRUD 页，需按 Section 壳与 `@/api` 约定生成骨架
  • 用 AI 改现有列表页时，要把 `loadData`、loading/error 与强类型行数据收拢到单一请求流程
  • 重构某业务组件：先抽 `src/interface` 类型与 hooks，再拆展示组件且不在 JSX 里散落 axios
  • 用户要求「按模板生成一个模块」时，从 `templates.md` 取骨架并套用 SCSS Modules 与 Zustand selector

适合人员

  • 维护本仓库 `src/` 前端、需要新页面与旧模块写法一致的 React 工程师
  • 负责把散落请求与内联样式收敛到 `@/api` 与 `index.module.scss` 的代码审查者
  • 用 Copilot/Agent 批量生成业务模块、希望输出符合目录与禁止事项清单的开发者
  • 计划低风险演进 CRUD 页、需保持对外 props 不变同时提取 hooks 的重构执行人