Agent Skills
› ChromeDevTools/devtools-frontend
ChromeDevTools/devtools-frontend
GitHub提供Chromium/DevTools LUCI构建结果的分类与分析能力，通过访问depot_tools中的Buildbucket和ResultDB工具，检查构建状态、编译错误及详细测试失败情况。
Install All Skills
npx skills add ChromeDevTools/devtools-frontend --all -g -y
Skills in Collection (23)
提供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构建配置、全局注册流程及导入导出重构步骤。
需要创建新的前端模型
需要将现有代码迁移到models目录
配置前端模块的构建规则
npx skills add ChromeDevTools/devtools-frontend --skill devtools-model-management -g -y
指导将DevTools中的旧版SettingRegistration重构为SettingDescriptor和SettingUIDescriptor，明确两者在不同架构层的存放位置及依赖规则。
重构DevTools设置模块
拆分遗留的SettingRegistration
npx skills add ChromeDevTools/devtools-frontend --skill devtools-setting-migration -g -y
指导在 DevTools 前端正确利用 Source Maps 和结构化堆栈跟踪，涵盖 DebuggerWorkspaceBinding 使用、SymbolizedError 模型处理及内存管理规则。
需要解析或展示源代码映射后的堆栈信息
处理 DevTools 中的结构化错误对象
npx skills add ChromeDevTools/devtools-frontend --skill devtools-source-maps -g -y
指导在Chrome DevTools中编写新测试时，如何根据场景选择单元测试、API测试或E2E测试。明确各类测试的适用条件、文件位置及构建配置，是编写测试时的强制使用指南。
编写新的测试用例
决定测试类型
npx skills add ChromeDevTools/devtools-frontend --skill devtools-testing-guidance -g -y
提供DevTools中Unicode转义指南，防止XSS和布局溢出。介绍escapeUnicodeAsText用于文本检查，safeEscapeUnicode用于UI渲染，以及Lit模板自动处理机制。
在DevTools UI中渲染用户输入或不可信数据
处理包含特殊格式字符的字符串显示
npx skills add ChromeDevTools/devtools-frontend --skill devtools-unicode-escaping -g -y
用于Chrome DevTools模块中UIStrings和本地化注释的UX写作重构。通过检查Issue状态、创建分支并应用8点检查清单，优化用户界面文案的简洁性与规范性，仅限处理指定的UI字符串文件。
需要简化DevTools UI文案或改进L10n注释
针对特定文件夹进行UX写作规范重构
npx skills add ChromeDevTools/devtools-frontend --skill devtools-ux-writing-refactor -g -y
提供项目构建、测试及代码健康检查的规范指令。指导如何运行特定文件或目录的测试，执行编译和Lint检查，并强调在提交前运行验证的最佳实践，确保代码质量与合规性。
需要构建项目时
需要运行测试用例时
需要检查代码规范或Lint错误时
执行自动化构建命令前
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 中因 Chromium Bug 被跳过的测试，通过移除跳过标记、定位失败原因、修复代码并验证测试通过，最终恢复测试正常运行。
需要修复被标记为 Skip 的测试
根据 Chromium Bug ID 取消测试跳过状态
npx skills add ChromeDevTools/devtools-frontend --skill fixing-skipped-tests -g -y
提供将 DevTools 单元测试迁移至轻量级 Foundation 模式的指南，通过 TestUniverse 替代全局单例和 DOM 依赖，实现跨平台兼容。
迁移旧版单元测试到新模式
移除 describeWithEnvironment 或全局单例依赖
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子模块
简化构建配置
整理BUILD.gn文件
npx skills add ChromeDevTools/devtools-frontend --skill merging-devtools-module -g -y
用于将 Chromium 布局测试迁移为 DevTools 单元或 API 测试。涵盖识别源文件、选择测试套件、转换为现代 Mocha/Chai 风格、处理导入规范、配置 BUILD.gn 及验证完整性等全流程。
迁移 Chromium 布局测试到 DevTools
将遗留 TestRunner 测试重构为现代单元测试
npx skills add ChromeDevTools/devtools-frontend --skill migrate-chromium-test -g -y
将遗留的指令式DOM构建迁移为局部声明式Lit-html模板，保留现有类层级与容器结构，实现响应式渲染。
需要重构前端视图代码
从指令式DOM转向声明式模板
前端组件现代化改造
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.Widget和Lit-html的现代UI工程愿景迁移。通过多阶段流水线管理代码重构，确保每次提交小而可测，严格遵循计划-验证-执行模式，禁止破坏构建或无关美化。
需要将Chrome DevTools遗留视图迁移为现代UI组件
执行多阶段代码重构以符合UI工程规范
npx skills add ChromeDevTools/devtools-frontend --skill ui-eng-vision-orchestrator -g -y
在重构前端视图前，通过检查现有测试并生成缺失的单元测试和截图测试，建立视觉和功能渲染基线，确保无回归。
需要重构或迁移前端组件
缺少视图的逻辑或截图测试
npx skills add ChromeDevTools/devtools-frontend --skill ui-eng-vision-test-scaffolder -g -y
将遗留视图升级为现代UI.Widget类，重构继承关系、注入视图委托并实现performUpdate渲染，清理旧式包装器以完成架构过渡。
需要升级组件为UI.Widget
重构遗留SimpleView或自定义布局
npx skills add ChromeDevTools/devtools-frontend --skill ui-eng-vision-widget-promoter -g -y
提供基于MVP架构的DevTools UI组件构建指南，涵盖Widget生命周期、lit-html视图渲染及状态管理规范。
构建新的UI Widget
重构遗留UI代码
遵循MVP架构规范
npx skills add ChromeDevTools/devtools-frontend --skill devtools-ui-widgets -g -y
Chrome DevTools 专用版本控制技能，指导使用 git new-branch、git cl upload 等定制命令管理分支与 Gerrit CL，禁止使用标准 Git 命令。
创建新分支或 CL
上传代码审查
处理堆叠变更
检查发布状态
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
