3.6 KiB
一套约束 AI 产品前端实现的 Agent Skill。
任务与对象 · 状态与范围 · 界面与空间 · 组件与代码
为什么需要这个 Skill
AI 编写的前端通常可以运行，也可能通过类型检查和构建。实际问题常出现在用户开始操作以后：它可能沿用错误的旧实现，在列表里堆满字段和按钮，把局部请求处理成全页 loading，或者在共享组件外继续补 CSS。改动次数增加以后，界面含义、数据状态和代码归属会逐渐分离。
oil-frontend 让 Agent 在设计、实现、重构和评审产品前端时，按照同一套顺序判断问题。
它会处理的五个重点
1. 先确认用户任务和业务对象
AI 容易从已有字段、组件和页面结构继续拼接。Skill 要求先确认用户要完成的任务、页面管理的业务对象、字段所有者和完成结果，再决定使用列表、表格、选择器、表单、弹窗或完整工作区。
项目原有模式本身错误时，不继续复制。
2. 删除无效信息和伪操作
每段文字、图标和动作都必须帮助用户识别、比较、判断、操作或理解结果。没有这些作用的 UUID、内部枚举、3 selected、重复流程说明、通用 AI 图标和装饰性强调边会被删除。
每个可见动作都必须产生真实的数据变化、导航或结果。表单只收集当前任务需要的数据，不默认增加草稿、预览、重置、步骤条和重复确认。
3. 保证数据、状态和作用域真实
同一业务数据只保留一个权威来源。选择器不能把当前分页当作全部候选；查询条件、列表、总数和分页必须属于同一次响应；单项请求只锁定对应对象，不阻塞整个页面。
异步操作成功后再关闭弹窗，失败时保留当前对象、用户输入和操作上下文。
4. 让界面结构和代码各自归位
列表负责识别和比较，详情负责完整内容，编辑器负责修改。尺寸由内容和父容器决定，每个页面、弹窗和表格都需要明确自己的滚动范围。
页面负责组合，组件负责自身视觉和状态。组件、Hook、函数、类型、样式和测试按业务归属组织；共享组件的问题在共享层处理，不在页面使用位置反复覆盖样式。
5. 修改源头并完成迁移
Agent 会先检查数据流、父布局、共享组件和全部使用位置，再修改真正产生问题的实现。新实现接管以后，删除旧组件、旧状态、旧类型、旧样式、fallback 和 legacy 逻辑。
验证不会停在类型检查、Lint 或构建通过。Agent 还要检查本次改动涉及的状态、数据范围、视口和共享实现使用位置。
它怎么读取规则
产品前端相关的实现、修改、重构和评审会自动触发这个 Skill。触发后先只读取 SKILL.md 判断任务范围，再按需读取对应参考规则；不相关的任务不会继续加载其他文件。
安装
oil-oil/oil-frontend 安装这个 skill
使用
安装后可以直接提出前端修改任务，也可以明确写出：
使用 $oil-frontend 检查并修改这个前端模块。
不包含的内容
- 不规定具体框架、状态库、CSS 方案或固定目录模板。
- 不处理纯构建、部署、依赖升级、安全和后端任务。