大家好，我是一个工作一年半的前端小兵。
先声明一下，我说的"小兵"不是自谦，是真的小兵。入职到现在，我的主要工作内容可以用四个字概括：增删改查。
新建一个管理页面、接一套后端 API、表格列表加搜索加分页、弹窗表单加校验加提交、删除二次确认……循环往复。不夸张地说，我这一年半写的代码，八成都是这个模式。
但是最近我搞了一件让自己挺爽的事——用 Copilot 帮自己写了一套 CRUD 管理页面的 Agent Skill，从此以后再写管理页面，直接一句话描述需求，AI 就按照我们项目的规范把代码搞出来了。
听起来像是给自己造了个"增删改查永动机"？差不多。
增删改查写到麻了
我在的项目是一个企业级 AI 智能助理平台，技术栈是 React + Ant Design + ProComponents + Valtio + React Query，标准的中后台配置。
每次接到新需求，对话基本是这样的：
PM：这里要加一个 XXX 管理页面。
我：好的。（打开上一个管理页面，开始 CV 大法）
然后就是无尽的重复劳动：
SMNMain包一层容器SMNTable配个表格- 右上角放新建按钮 + 刷新按钮，中间还要加个
Divider - 行操作列写编辑和删除，删除要套 DeleteConfirm
- 新建和编辑共用一个 Modal，通过 type 区分
useMutation拿isPending绑 loading- 成功了 message.success() + actionRef.current?.reload()
- ……
每次都一样，但每次又得想一遍："操作列是用文字按钮还是图标按钮来着？""分页配置 showSizeChanger 是 true 还是 false？""删除用 DeleteConfirm 还是 Modal.confirm？"
这些东西不难，但很烦。 你知道它该怎么做，但每次都要翻之前的代码确认一遍，怕搞错了 CR 被打回来。
给 AI 写一份"增删改查说明书"
转折点是有天我在用 Copilot 写一个新管理页面，它给我用了 useQuery 来获取表格数据。
我当时就愣住了——我们项目里 SMNTable 用的是 ProTable 的 request prop 模式，不需要 useQuery。Copilot 不知道这个约定，写出来的代码能跑，但不符合项目规范。
这种事情之前也发生过。有一次它给我删除按钮没加二次确认，还有一次 toolBarRender 没设成 false，导致表格顶部多了一层空白间距。
AI 写得出代码，但写不出"你们项目的代码"。
所以我就想，干脆把这些约定全部写下来，做成一个 Skill，让 AI 以后按规矩办事。
这个 Skill 写了什么
说白了就是一份管理页面的"决策速查表"。把我这一年半踩过的坑、确认过的规范、反复对照过的代码，全部沉淀成了一份文档。核心内容包括：
1. 组件选型速查
用什么容器、用什么表格、表单弹 Modal 还是 Drawer、删除用哪个确认组件——每个场景对应一个具体组件和导入路径，不用再猜。
2. 标题区布局规范
左边标题，右边操作区：搜索框（可选） → 新建按钮 → Divider → 刷新按钮。这个布局全项目统一，写成模板以后就是复制粘贴。
3. 表格单元格渲染
名称字段后面要跟 Tag？标签太多要显示 +N？时间用 utcdayjsFormat？空值显示 '-'？全部列好。
4. 表单字段组件
多语言名称用 SettingIntlInput，描述用 SettingIntlTextarea，开关用 ProFormSwitch，下拉用 ProFormSelect——每个字段类型对应一个项目内约定的组件，不用翻代码。
5. 操作列两种模式
文字按钮和图标按钮两套模板，根据设计稿选。图标按钮必须包 Tooltip。
6. SMNTable 的几个坑
toolBarRender={false}—— 不加就多一层空白- search={false} + options={false} —— 干掉内置 toolbar
- dataSource vs request —— 前端全量加载和后端分页用不同方式
- 分页统一 pageSize: 20，关掉 showSizeChanger
7. 开发验收 Checklist
交互体验、权限控制、国际化、代码质量、布局样式、测试流程——提交 CR 前过一遍，不会漏东西。
效果如何
搞完这个 Skill 之后，我试着用一句话描述需求：
"帮我新建一个 Pipeline 默认规则管理页面，需要列表、新增、编辑、删除功能"
Copilot 直接按规范生成了完整代码：SMNMain 容器、SMNTable 配 toolBarRender={false}、标题区布局正确、删除用了 DeleteConfirm、表单用了 ProFormSelect、useMutation 处理提交、message.success() + actionRef.current?.reload() 刷新。
以前需要翻三四个现有页面对照着写的东西，现在 AI 一次性搞定。
而且更关键的是——以后团队来了新人，不用我手把手教"我们项目的管理页面怎么写"，让他把这个 Skill 挂上就完事了。
持续沉淀
这个 Skill 不是写完就丢的。我在末尾加了一条规则：
每次修复 Bug 后，将相关经验补充到本 Skill 中。
新踩了个坑？加到"常见错误"表。发现一个新的组件用法？补到"组件选型"里。
CRUD 虽然无聊，但把它做成体系化的东西，就不无聊了。
写在最后
我知道一年半的小兵在掘金算不上什么。但我想说的是——即使你每天的工作就是增删改查，也可以用 AI 把这些重复劳动变成可复用的资产。
Skill 这个东西说白了就是一份"最佳实践文档"，但它和普通文档不一样的地方在于：它是给 AI 看的，AI 会按照它来生成代码。
所以你写得越细、越贴合项目实际，AI 生成的代码就越靠谱。一份好的 Skill 约等于一个永远不会忘记项目规范的虚拟同事。
如果你也每天在写增删改查，不妨试试把你们项目的管理页面规范沉淀成一个 Skill。不需要多复杂，先从"用什么组件、什么交互、什么反馈"开始写，慢慢补充就好。
毕竟，能把无聊的活干出花来的人，才是真正的狠人。
