75 lines
3.6 KiB
Markdown
75 lines
3.6 KiB
Markdown
<p align="center">
|
||
<img src="./assets/readme/hero.png" width="100%" alt="oil-frontend：从用户任务出发，修改产品前端真正出错的位置">
|
||
</p>
|
||
|
||
<p align="center">
|
||
一套约束 AI 产品前端实现的 Agent Skill。
|
||
</p>
|
||
|
||
<p align="center">
|
||
<code>任务与对象</code> · <code>状态与范围</code> · <code>界面与空间</code> · <code>组件与代码</code>
|
||
</p>
|
||
|
||
## 为什么需要这个 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](SKILL.md) 判断任务范围，再按需读取对应参考规则；不相关的任务不会继续加载其他文件。
|
||
|
||
## 安装
|
||
|
||
[oil-oil/oil-frontend](https://github.com/oil-oil/oil-frontend) 安装这个 skill
|
||
|
||
## 使用
|
||
|
||
安装后可以直接提出前端修改任务，也可以明确写出：
|
||
|
||
```text
|
||
使用 $oil-frontend 检查并修改这个前端模块。
|
||
```
|
||
|
||
## 不包含的内容
|
||
|
||
- 不规定具体框架、状态库、CSS 方案或固定目录模板。
|
||
- 不处理纯构建、部署、依赖升级、安全和后端任务。
|
||
|
||
## License
|
||
|
||
[MIT](LICENSE)
|