用途：在仓库上下文明确后，按现有技术栈实现前端改动，强调对齐既有栈、最小 DOM/CSS、清晰布局归属与显式验证。
主要能力：先读根目录 AGENTS.md、最近子项目 AGENTS.md、AGENT.md 或对话给定规则；再确定目标页面、路由、屏幕、组件、框架、UI 类型、视觉来源与所需状态；仅检查改动所需文件；识别现有组件库、CSS 策略、shell/内容/页面边界、面板与滚动区域；保持排版、间距、密度、路由、状态、API 契约、无障碍与视觉系统，除非任务明确要求改变；采用最小组件、DOM、CSS 与归属面；清理陈旧包装、重复声明与失效补丁。
模式：定向实现；结构与样式简化；UI 一致性审查；技术栈对齐（React、Vue、Next.js、Vite、TanStack Router、Tailwind、Ant Design、shadcn/ui、桌面 webview 或本地组件，依据现有应用决定）。
不适用：首次仓库探索、真实命令或入口点（用 code-context）；未来任务分解或多智能体规划（用 code-planner）；脏工作区归属、混合 hunk 审查、暂存或提交规划（用 code-review）；浏览器操作、截图、控制台、网络、下载上传或运行时取证（用 ops-browser）；桌面客户端启动审查、CGWindowID 取证、真实窗口截图或原生运行时操作（用 ops-client）；前端修复前的根因诊断（用 diagnose）。
硬性规则：使用 Tailwind、Ant Design、shadcn/ui、React Router、Zustand、Redux、React Query、表单库、图标库或路由助手前须核实实际栈；不得引入并行 UI 套件、CSS 系统、路由模式、状态层、API 助手、图标库或表单库；保持布局归属明确（shell 管全局裁剪、内容容器管内边距、页面根管页面布局、面板管面板边界、内部区域管滚动/溢出）；不要在各层重复堆叠 h-full、min-h-0、overflow-*、padding、inset 或宽度规则；折叠仅传类、单子节点、重复组件边界或仅为动画的包装；优先语义 HTML、现有组件与自然文档流；普通 Tailwind 尺寸用项目尺度工具类（如 h-1、h-12、w-22），不要用 h-[22px] 等任意像素类；业务几何用命名布局类或 CSS 变量；在最近归属选择器合并重复 CSS 并删除失效补丁与晚期覆盖；保留路由路径、查询参数、载荷形状、响应解包、加载状态、权限隐藏项与无障碍行为；未验证的视觉、响应式、控制台、网络、运行时或无障碍行为标注 Not verified。
输出契约：报告分支、检测到的栈、触及的 UI 面、布局归属变更、DOM/CSS 简化选择、保留的契约、运行的命令、失败命令、浏览器/客户端证据或 Not verified 缺口，以及有意排除的布局或栈变更。维护时可保持 SKILL.md 简洁，细节移入 references/，更新 agents/openai.yaml，并运行 python3 scripts/validate-skills.py。