oil-frontend Skill 技能

项目定位

oil-frontend 是一个开源的 Agent Skill（MIT 协议，2026 年 7 月建仓，10 月仍有更新），为产品前端的实现、修改与评审提供一套中文规范，覆盖界面、交互、数据状态与组件组织。它的主张是让 Agent 在动手前先按固定顺序判断问题，而不是继续在既有结构上打补丁。

六个重点

第一，先确认用户任务和业务对象：先弄清用户要完成什么任务、页面管理哪些业务对象、字段归谁所有、完成结果是什么，再决定用列表、表格、选择器、表单、弹窗还是完整工作区；项目原有模式本身就是错的时候，不继续复制。第二，删除无效信息和伪操作：UUID、内部枚举、「已选 3 项」、重复的流程说明和通用 AI 图标都应删掉，每个可见动作必须产生真实的数据变化、导航或结果，表单不默认加草稿、预览、重置、步骤条和重复确认。第三，保证数据、状态与作用域真实：同一业务数据只保留一个权威来源，选择器不能把当前分页当成全部候选，查询条件、列表、总数与分页必须来自同一次响应，异步操作成功后再关弹窗，失败时保留当前对象与用户输入。第四，让界面结构和代码各自归位：列表负责识别和比较，详情负责完整内容，编辑器负责修改，页面负责组合而组件负责自身视觉与状态，共享组件的问题在共享层解决。第五，把样式与动效正确写进代码：优先复用项目已有的 Token 与组件变体，动效时长沿用项目 Token，简单反馈使用可中断的 CSS transition。第六，修改源头并完成迁移：改共享实现前先确认全部受影响的使用位置，新实现接管并清理失效代码。

规则加载方式

Agent 读取 SKILL.md 入口后，先看具体问题的证据和相关实现，再在确定方案前加载一条主要规则；复杂任务按阶段读取，已有规则和证据可用时直接复用，以减少无关读取与重复上下文。

明确的边界

它不做设计判断，视觉风格以设计稿或项目规范为准；不规定具体框架、状态库、CSS 方案或固定目录模板；不处理纯构建、部署、依赖升级、安全和后端任务；也不默认展开无障碍专项审计。设计方向可以搭配同作者的 oil-ui，交互与体验经验则对应付费的 Oil UI Pro，两者分工不冲突。

安装与使用

安装方式为 npx skills add oil-oil/oil-frontend，无需额外配置、账号或密钥。符合前端任务范围时会主动触发，也可以明确指定「使用 $oil-frontend 检查并修改这个前端模块」。技能只读取当前任务需要的项目文件，不向外发送数据。

官方链接

仓库：https://github.com/oil-oil/oil-frontend