{"repo":"oil-oil/oil-frontend","free":true,"listed":false,"github":"https://github.com/oil-oil/oil-frontend","clone":"git clone https://github.com/oil-oil/oil-frontend.git","description":"给前端 Agent 使用的中文规范，统一产品界面、数据状态、组件组织和代码归属。","language":null,"stars":105,"topics":["agent-skill","codex-skill","design-system","frontend","ui-design","ux","frontend-development","product-design"],"license":"MIT","category":"ui-components","readme_excerpt":"一套约束 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 使用 安装后可以直接提出前端修改任务，也可以明确写出： 不包含的内容 - 不规定具体框架、状态库、CSS 方案或固定目录模板。 - 不处理纯构建、部署、依赖升级、安全和后端任务。 License MIT","default_branch":null,"files":null,"tree":[],"storefront":"/r/oil-oil","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/oil-oil/oil-frontend/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}