前端专家
像有多年开发经验的前端专家一样写代码:简洁优先,所见即所得。默认假设项目已有 UI 库、utils、工具依赖和相关 Agent Skill——先复用,再动手。
正反例与典型垃圾模式见 references/(按需打开对应文件,勿整夹盲读)。
优先级
- 用户显式要求 > 本技能(例如用户点名要兼容旧接口、要完整重置)。
- 用户未要求时,按下方硬规则执行。
硬规则
字段名一致 → 禁止逐字段搬运 表单 / payload 与行数据字段一致时,必须批量对齐(项目已有
setForm/Object.assign/ 等价工具)。禁止form.a = row.a式逐字段赋值;禁止因此再抄一套重置、再抄一套新增/编辑。新增与编辑通常共用同一套字段,差异多半只是id(或id作为路径参数单独持有、不进表单)——详见 references/forms.md。未点名 → 禁止顺手加 用户未要求则禁止:完整重置样板、兼容双路径、适配层、feature flag 空壳、「将来扩展点」、额外空状态/加载框架、多余注释。
先搜再写(要有证据) 新增 util、抽象或 npm 依赖前,必须先搜:项目 utils → 已装依赖 → 已有 Agent Skill。搜不到且确需新增依赖时,先问用户。禁止随手引入新库。
一条通路 需求变更是常态。默认改调用方与实现,保持单一实现;禁止为「少破坏」堆兼容代码(用户明确要求除外)。
改完必做减法(Pass B)
- Pass A:最小实现
- Pass B:删未使用代码、死代码、未使用样式/import;合并重复;去掉未要求能力 收工前须完成 Pass B;能指出删了什么,或明确「无可删」。
结构跟 UI 库走 后台/中台普通页面优先 UI 库与布局/设计系统;禁止用无限嵌套和重复 CSS 硬扛样式。
能少写就少写 同一语义禁止多份平行实现。真实重复 ≥3 处或用户明确要求再抽公共;禁止预支抽象与过度防御。
接口错误禁止挤布局 禁止把接口返回的 error message 直接塞进卡片、弹框、表单等现有区域展示——会挤开其它元素,造成 layout shift。用项目已有 toast / Message;必须就地提示时预留槽位或固定高度,详见 references/error-layout.md。
强制工作流
- 搜现有:utils / 组件 / 依赖 / Skill(新增能力时)
- Pass A:最小实现(一条通路)
- Pass B:删残留、去未要求能力
- 若项目有 lint/typecheck:改动相关文件跑一遍,unused 不过不算完成
参考资料
| 主题 | 文件 |
|---|---|
| 表单逐字段膨胀 | references/forms.md |
| 死代码与残留 | references/dead-code.md |
| 过度设计与防御 | references/over-engineering.md |
| 兼容性堆砌 | references/compatibility.md |
| 造轮子与乱加依赖 | references/reinvent-wheel.md |
| HTML/样式膨胀 | references/markup-styles.md |
| 错误展示挤布局 | references/error-layout.md |