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 (24)
提供Chromium/DevTools LUCI构建结果的分类与分析能力，通过访问depot_tools中的Buildbucket和ResultDB工具，检查构建状态、编译错误及详细测试失败情况。
分析LUCI构建结果
排查trybot失败原因
查询Buildbucket构建状态
分析ResultDB测试回归
npx skills add ChromeDevTools/devtools-frontend --skill devtools-ci -g -y
规范 DevTools 代码库的 TypeScript 导入约定，防止构建错误。要求跨模块必须通过入口文件并使用 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 API 正确解析、符号化错误及渲染 UI 组件。
需要解析或显示 JavaScript 堆栈跟踪
处理 Source Map 相关的调试信息
实现 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函数的使用场景及Lit模板自动转义机制。
在DevTools UI中渲染用户输入或不受信任的数据时
处理可能包含特殊格式字符的字符串以防止安全漏洞
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 项目构建、测试、代码检查及 Tryjob 结果获取的标准化操作指南，涵盖自动化命令格式、截图黄金标准规则及最佳实践，确保代码质量验证流程正确执行。
需要运行测试或构建项目时
执行 linting 或获取 CI/CD 结果时
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 链接或测试文件名称
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 单元测试迁移至轻量级 Foundation 模式，使用 TestUniverse 替代全局单例和 DOM 依赖，实现跨平台兼容。
迁移单元测试至 Foundation 模式
移除 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 配置整合、依赖关系处理及 grd_files.gni 更新。
需要合并 DevTools 子模块到父模块
整理和优化 DevTools 构建系统配置
npx skills add ChromeDevTools/devtools-frontend --skill merging-devtools-module -g -y
指导将 Chromium 布局测试迁移为 DevTools 现代单元测试或 API 测试，涵盖测试风格转换、导入规范、环境设置及 BUILD.gn 配置更新。
需要将旧的 Chromium 布局测试转换为 DevTools 单元测试
需要迁移测试到 API 测试套件
npx skills add ChromeDevTools/devtools-frontend --skill migrate-chromium-test -g -y
将遗留的指令式 DOM 构建代码迁移为本地声明式 Lit-html 模板，在现有容器内渲染。
需要重构前端 UI 组件以使用现代模板引擎
将命令式 DOM 操作转换为响应式声明式视图
npx skills add ChromeDevTools/devtools-frontend --skill ui-eng-vision-local-lit-renderer -g -y
将前端类中分散的DOM操作、事件处理和渲染逻辑提取为私有辅助方法，通过明确的状态接口和统一的performUpdate流程重构代码，提升可维护性。
重构前端类以整合手动DOM创建和更新逻辑
优化UI组件的状态管理和渲染循环
npx skills add ChromeDevTools/devtools-frontend --skill ui-eng-vision-logic-consolidator -g -y
Chrome DevTools UI 现代化编排技能，协调多阶段迁移流程，将遗留组件重构为基于 lit-html 的声明式 UI.Widget，确保代码小步提交、可测试且通过审查。
需要将 Chrome DevTools 遗留视图迁移至现代 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开发规范，涵盖Presenter与View的职责划分、状态管理及lit-html渲染规则，指导前端组件构建。
构建或重构DevTools UI组件
遵循MVP模式开发前端Widget
npx skills add ChromeDevTools/devtools-frontend --skill devtools-ui-widgets -g -y
Chrome DevTools专属版本控制指南，强制使用git new-branch而非标准Git命令以适配Gerrit工作流。涵盖创建分支、单提交修改、堆叠CL依赖管理、重基线及同步上游等核心操作规范。
需要创建新分支
管理Gerrit变更列表
处理堆叠提交依赖
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
