Agent Skills
› ChromeDevTools/devtools-frontend
ChromeDevTools/devtools-frontend
GitHub提供 DevTools 代码审查通用清单，涵盖测试正确性、代码清晰度及 CL 规范。支持自动或手动获取上下文，并根据变更类型路由至专项技能进行深度审查。
Install All Skills
npx skills add ChromeDevTools/devtools-frontend --all -g -y
Skills in Collection (28)
提供 DevTools 代码审查通用清单，涵盖测试正确性、代码清晰度及 CL 规范。支持自动或手动获取上下文，并根据变更类型路由至专项技能进行深度审查。
请求审查代码变更列表 (CL)
审查补丁或差异 (diff/patch)
上传前自我审查
npx skills add ChromeDevTools/devtools-frontend --skill code-review -g -y
提供Chromium/DevTools LUCI构建结果的分类与分析能力，通过访问depot_tools中的Buildbucket和ResultDB工具，检查构建状态、编译错误及详细测试失败情况。
分析LUCI构建结果
排查trybot失败原因
查询Buildbucket构建状态
分析ResultDB测试回归
npx skills add ChromeDevTools/devtools-frontend --skill devtools-ci -g -y
规定 DevTools 代码库的导入规范以避免构建错误。跨模块必须通过入口文件并使用 import * as 语法，同模块内可直接导入。
开发者询问或需要遵守代码库导入规范时
进行代码审查以检查导入路径是否符合约定时
npx skills add ChromeDevTools/devtools-frontend --skill devtools-imports -g -y
提供在 DevTools 前端创建或迁移模型的标准指南，涵盖文件结构、BUILD.gn 构建配置、全局注册及导入导出重构。
需要在 front_end/models/ 下新建模型
需要将现有代码迁移至 models 目录
需要修复模型相关的构建或注册错误
npx skills add ChromeDevTools/devtools-frontend --skill devtools-model-management -g -y
指导将 DevTools 遗留 SettingRegistration 拆分为 SettingDescriptor 和 SettingUIDescriptor，明确两者在核心层与 UI 层的放置位置及导入规范，以优化架构分层并避免循环依赖。
重构 DevTools 设置注册逻辑
调整代码文件层级结构
npx skills add ChromeDevTools/devtools-frontend --skill devtools-setting-migration -g -y
指导在DevTools前端正确使用Source Maps将运行时坐标映射至源码位置，并渲染结构化堆栈跟踪和符号化错误。强调使用DebuggerWorkspaceBinding进行解析，避免手动解析，防止内存泄漏。
需要解析或展示JavaScript堆栈跟踪
需要将编译后代码映射回原始源代码位置
处理DevTools中的错误显示与调试
npx skills add ChromeDevTools/devtools-frontend --skill devtools-source-maps -g -y
提供 Chrome DevTools 中编写新测试时选择合适测试套件（Unit、API 或 E2E）的指导。明确各类测试的适用场景、文件位置及构建配置，帮助开发者正确隔离和集成验证逻辑。
需要为 Chrome DevTools 新功能编写单元测试
需要验证涉及 CDP 协议的业务逻辑集成测试
需要模拟完整用户旅程进行端到端测试
npx skills add ChromeDevTools/devtools-frontend --skill devtools-testing-guidance -g -y
提供DevTools中处理用户可控数据的Unicode转义指南，防止布局错乱和XSS。说明escapeUnicodeAsText与safeEscapeUnicode的使用场景及Lit模板自动转义机制。
处理DevTools UI中的用户输入或不受信任数据
渲染控制台消息、DOM节点或属性视图
npx skills add ChromeDevTools/devtools-frontend --skill devtools-unicode-escaping -g -y
针对 DevTools 模块文件夹中的 UIStrings 和本地化注释进行 UX 写作重构，优化措辞、检查大小写并改进 L10n 注释，确保符合官方指南。
简化 UI 文案
检查句子大小写规范
改进本地化注释
npx skills add ChromeDevTools/devtools-frontend --skill devtools-ux-writing-refactor -g -y
提供 DevTools 项目构建、测试和代码健康验证的标准化指令。强制使用 ./dt 替代 npm，规范测试运行、编译检查、Lint 及 Tryjob 结果获取流程，确保正确执行仓库特定命令。
需要构建或编译项目时
运行测试或 Lint 检查时
验证代码质量或健康状态时
获取 Tryjob 失败日志或截图黄金文件时
npx skills add ChromeDevTools/devtools-frontend --skill devtools-verification -g -y
通过修改 DevTools 源码暴露临时 Hook，结合 Puppeteer 脚本自动化验证 CSS 代码补全功能的触发率与准确性，用于 AI 代码补全能力的本地评估。
需要评估或测试 CSS 代码补全功能的效果
运行针对前端 DevTools AI 特性的自动化验证脚本
npx skills add ChromeDevTools/devtools-frontend --skill evaluate-ai-css-completion -g -y
用于在DevTools代码库中复现并修复不稳定（flaky）及禁用的测试。通过并行启动本地和Bot代理进行复现，定位问题后执行修复流程。
用户请求修复不稳定的测试
用户提供Chromium Bug链接或测试文件/名称
npx skills add ChromeDevTools/devtools-frontend --skill fix-tests -g -y
处理 DevTools 中因 Chromium Bug 被跳过的测试，通过移除跳过标记、定位失败原因、修复代码并验证测试通过，最终恢复测试正常运行。
需要修复被标记为 Skip 的测试
根据 Chromium Bug ID 取消测试跳过状态
npx skills add ChromeDevTools/devtools-frontend --skill fixing-skipped-tests -g -y
指导将 DevTools 单元测试迁移至基于 TestUniverse 和 devtools_foundation_module 的轻量级、无全局单例的基础设施测试模式，避免 DOM 依赖。
需要重构单元测试以消除对全局单例或重型辅助函数的依赖
需要将测试适配为支持 Node 和 Browser 环境的 Isomorphic 测试
npx skills add ChromeDevTools/devtools-frontend --skill foundation-test-migration -g -y
通过gerrit_client.py与Gerrit平台交互，支持查询公共CL、获取评论、提交变更等操作。需确保工具可用并遵循安全规范，禁止回复包含人类审稿人的线程。
查询公共代码评审列表
检索已发布的评审评论
检查格式化补丁或文件修订
添加补丁集评论
对评审标签投票
提交变更或放弃/恢复公共CL
npx skills add ChromeDevTools/devtools-frontend --skill gerrit-cli -g -y
提供将 DevTools 子模块合并到父模块的工作流，涉及 BUILD.gn 文件整合、依赖处理及资源列表更新。
需要合并 DevTools 子模块
简化 DevTools 构建配置
npx skills add ChromeDevTools/devtools-frontend --skill merging-devtools-module -g -y
指导将Chromium布局测试迁移为DevTools单元或API测试。涵盖确定目标位置、重写为Mocha/Chai风格、遵循导入规范、配置BUILD.gn及验证完整性，确保测试覆盖原逻辑。
需要迁移Chromium布局测试到DevTools单元测试
需要将旧版TestRunner测试转换为现代Mocha测试
npx skills add ChromeDevTools/devtools-frontend --skill migrate-chromium-test -g -y
提供Chrome DevTools前端models-and-core模块的代码审查指导，涵盖轨迹处理、SDK模型生命周期管理及GN构建规范，确保代码符合架构与性能标准。
审查涉及front_end/core或models路径的前端变更
检查BUILD.gn或.gni构建文件配置
npx skills add ChromeDevTools/devtools-frontend --skill review-models-core -g -y
针对Chrome DevTools前端测试代码的代码审查技能，涵盖测试辅助函数复用、模块化钩子使用及异步同步规范，旨在提升测试稳定性与可维护性。
用户请求审查Chrome DevTools测试文件
提交包含.test.ts或test目录的变更
npx skills add ChromeDevTools/devtools-frontend --skill review-tests -g -y
提供Chrome DevTools前端UI和组件变更的代码审查指导，确保符合现代UI规范、类型安全和MVP架构原则。
审查涉及front_end/ui或panels目录下.ts/.css文件的变更
检查UI组件是否使用标准自定义元素及私有字段
npx skills add ChromeDevTools/devtools-frontend --skill review-ui-widgets -g -y
将遗留的命令式 DOM 构建迁移为局部的声明式 Lit-html 模板，保留原有类层级和辅助函数拓扑结构，优化渲染生命周期与导入规范。
需要将命令式 DOM 操作重构为 Lit-html 模板
UI 组件渲染逻辑现代化改造
npx skills add ChromeDevTools/devtools-frontend --skill ui-eng-vision-local-lit-renderer -g -y
将手动DOM创建和渲染逻辑从构造函数提取至私有辅助方法，定义状态接口并通过performUpdate统一更新UI。旨在简化代码结构，优化前端组件的可维护性与逻辑清晰度。
重构前端类中的手动DOM操作
整理分散的事件处理与渲染逻辑
将命令式UI更新转换为声明式状态驱动
npx skills add ChromeDevTools/devtools-frontend --skill ui-eng-vision-logic-consolidator -g -y
Chrome DevTools UI现代化编排技能，协调多阶段迁移至UI.Widget和Lit-html。严格遵循计划-验证-执行模式，确保构建稳定、CL原子化，并管理子技能分配与用户审批。
需要将遗留DevTools组件迁移到现代UI框架
执行复杂的代码重构与现代化改造
npx skills add ChromeDevTools/devtools-frontend --skill ui-eng-vision-orchestrator -g -y
用于在重构前为视图生成单元测试和截图测试脚手架，建立视觉与功能渲染基线，检测测试缺口并验证组件渲染，防止回归。
准备对UI组件进行重构或现代化改造
需要为遗留视图建立视觉和逻辑测试基线
发现现有测试覆盖不足或缺失
npx skills add ChromeDevTools/devtools-frontend --skill ui-eng-vision-test-scaffolder -g -y
将遗留视图升级为现代UI.Widget类，重构继承关系，集成Lit模板渲染与依赖注入，清理旧版包装器。
需要迁移遗留SimpleView到UI.Widget
重构组件以使用performUpdate渲染
升级视图委托和依赖注入
npx skills add ChromeDevTools/devtools-frontend --skill ui-eng-vision-widget-promoter -g -y
提供DevTools前端UI组件构建指南，规范MVP架构下的Widget生命周期、lit-html视图渲染及状态管理。
开发或重构DevTools UI组件
遵循MVP架构实现前端界面
npx skills add ChromeDevTools/devtools-frontend --skill devtools-ui-widgets -g -y
指导 Chrome DevTools 团队使用 Gerrit 工作流的 Git 操作规范。强调必须使用 git new-branch 而非标准命令，涵盖分支创建、单提交修改、堆叠变更管理及同步流程。
在 Chrome DevTools 项目中创建新分支
管理基于 Gerrit 的堆叠变更（Stacked CLs）
同步上游代码并更新依赖
npx skills add ChromeDevTools/devtools-frontend --skill devtools-version-control -g -y
用于在DevTools代码库中复现和调查测试不稳定性的工作流。通过并行启动本地和机器人代理，反复运行指定测试以捕获失败模式，并协助修复问题。
用户询问如何复现不稳定的测试
提供Chromium bug链接或测试文件及名称
npx skills add ChromeDevTools/devtools-frontend --skill repro-flaky-tests -g -y
