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