1. 基本信息
| 项目 | 内容 |
|---|---|
| 名称 | oil-frontend |
| 作者/维护者 | oil-oil |
| 来源链接 | https://github.com/oil-oil/oil-frontend |
| 许可证 | MIT（GitHub API） |
| GitHub Stars | 97（GitHub API） |
| Forks | 5（GitHub API） |
| 最新版本 | 无正式版本标签，以最近一次提交为准（2026-08-05） |
| 安装方式 | 克隆仓库后复制 oil-frontend 目录到目标 Agent 的 skills 目录（GitHub API + README） |
2. 功能介绍与亮点
oil-frontend 是一份约束 AI Agent 实现产品前端的工程规范 Skill，目标是解决“AI 写的前端能跑但经不起用”的问题——列表堆满字段却分不清主次、局部请求被处理成全页 loading、共享组件外反复打 CSS 补丁等。核心能力围绕五个判断维度：任务与对象先行（改动前确认用户任务与业务对象归属）、删除伪操作与无效信息、数据与状态真实性（同一业务数据只保留一个权威来源）、结构与代码各自归位（列表/详情/编辑器职责分离）、修改源头而非局部打补丁（定位真正出错的共享实现并完成全部使用位置迁移）。
主要亮点：全仓库零可执行脚本，安装单元为根级 SKILL.md + 10 份分主题参考文件，按任务类型索引式加载，避免一次性读入全部规则；仓库自带 agents/openai.yaml，为 Codex 提供显式技能描述与默认触发提示词；近两周内保持活跃提交（最近一次 2026-08-05）。
3. 适用场景
所属分类：前端与设计
适用于使用 AI Agent 实现、修改、重构或评审产品前端代码的场景：Agent 生成的界面通过了类型检查和构建，但用户实际操作后暴露出状态残留、字段堆砌、共享组件被局部打补丁等问题。装上该 Skill 后，Agent 处理前端任务前会先按固定顺序回答任务归属、数据范围、结构落点等问题再实施，适合团队让 AI Agent 承担较高比例前端实现工作、但缺乏统一工程规范约束的场景。
不覆盖：具体前端框架/状态库/CSS 方案的选型，纯构建、部署、依赖升级、安全与后端任务，以及只解释前端概念而不涉及项目实现的请求。
4. 跨 Agent 兼容性
- Claude Code：原生支持——SKILL.md 采用标准 Agent Skills 格式（YAML front matter + 指令正文），触发条件与参考文件索引均按 Claude Code 的技能加载机制设计。
- Codex：原生支持——仓库内置
agents/openai.yaml，显式声明了面向 Codex 的展示名称、简介与默认触发提示词。 - OpenClaw：未验证——README 未提及，仓库结构本身符合 Agent Skills 通用规范，理论上可安装，但未见任何官方或社区来源确认。
- Hermes Agent：未验证——未在已抓取材料中找到相关证据。
5. 推荐理由
这是一份纯 Markdown 工程规范，无任何代码执行与网络外发，却系统性覆盖了 AI 生成前端代码最常见的质量问题——状态归属混乱、共享组件被局部打补丁、伪操作堆砌。对于把较多前端实现工作交给 AI Agent 的团队，它相当于把“资深前端工程师的判断顺序”固化成可复用的检查清单，装上即可用，不引入任何额外依赖或攻击面。
6. 评分
| 维度 | 分数 | 说明 |
|---|---|---|
| 受欢迎程度 | 5 | GitHub 97 stars；仓库创建于 2026-07-30，12 天内积累至此；未找到第三方独立讨论来源 |
| 可用性 | 9 | 纯 Markdown 方案，零外部依赖、零付费项；文档按任务类型分层索引，含 10 份参考文件；最近提交 2026-08-05，维护活跃；安装为克隆/复制，无需额外配置 |
| 安全性 | 10 | 全仓库无可执行脚本（仅 README、SKILL.md、10 份参考 Markdown 与静态图片资源），不联网、不执行 shell 命令；License 为 MIT，权属清晰 |
综合评分：8.0
安全检查清单：①无 shell 命令执行（纯提示词/参考文档，无脚本文件）②不联网外发数据 ③不要求 API key/凭据 ④未发现可疑指令 ⑤个人开发者，名下另有一份 1500+ stars 的高关注度作品，无造假迹象 ⑥License 为 MIT，明确 ⑦最近维护 2026-08-05，在近 1 个月内。
7. 跟同类 Skills 相比的优势
| Skill | 定位 | 与 oil-frontend 的差异 |
|---|---|---|
| frontend-design（Anthropic 官方） | 提升 AI 生成界面的审美质量——字体搭配、配色、动效、风格强度 | 解决的是“好不好看”；oil-frontend 解决的是“对不对”——状态一致性、数据来源单一性、组件归属，两者可叠加使用而非互相替代 |
| web-design-guidelines（Vercel Labs） | 面向 Web 设计系统的通用最佳实践指南 | 偏静态设计规范参考；oil-frontend 提供的是可执行的“决策顺序 + 执行流程”，要求 Agent 逐条回答后再动手 |
| shadcn（shadcn/ui） | 组件库安装与使用指引 | 面向具体组件库的落地操作；oil-frontend 不绑定任何框架或组件库，只约束判断顺序与代码归属逻辑 |
oil-frontend 的差异化在于：它不教 Agent“写出什么样的界面”，而是教 Agent“改动前先想清楚什么”——聚焦在 AI 生成前端代码普遍存在但少有 Skill 专门覆盖的工程纪律问题（状态残留、伪操作、局部补丁）。
8. 用户评价
该技能目前在第三方平台尚无具名用户评价。
9. 其他补充
仓库同时提供中文 README 主体（本 Skill 面向中文前端工程场景设计），未见独立英文版本。作者 oil-oil 名下另有 GitHub README 美化工具 beautify-github-readme（1500+ stars），与本 Skill 功能领域完全不同。
10. 安装使用方式
Claude Code / Codex 通用：
git clone https://github.com/oil-oil/oil-frontend.git
mkdir -p .claude/skills # Codex 用户替换为对应 skills 目录
cp -r oil-frontend .claude/skills/安装后无需重启，Agent 在检测到页面、组件、交互、表单、状态、数据流、Hook、类型、CSS 或前端代码组织相关任务时会自动触发；也可显式调用 使用 $oil-frontend 检查并修改这个前端模块。
11. 注意事项
- 不规定具体框架、状态库、CSS 方案或固定目录模板，需团队自行确认与现有技术栈的适配方式。
- 不处理纯构建、部署、依赖升级、安全和后端任务。
- 仓库创建时间较新（2026-07-30），尚无长期维护记录可参考。
- README 安装说明较为简略，未提供一键安装命令，需手动克隆并复制到目标目录。