Agent Skills
› ChromeDevTools/devtools-frontend
ChromeDevTools/devtools-frontend
GitHub用于分析 Chromium/DevTools LUCI 构建结果和 trybot 失败，包括检查构建状态、编译错误及详细测试回归。
Install All Skills
npx skills add ChromeDevTools/devtools-frontend --all -g -y
Skills in Collection (23)
用于分析 Chromium/DevTools LUCI 构建结果和 trybot 失败，包括检查构建状态、编译错误及详细测试回归。
分析构建失败原因
排查测试回归问题
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 目录下新建模型
需要将现有代码迁移至 models 目录
遇到前端模块构建或注册问题
npx skills add ChromeDevTools/devtools-frontend --skill devtools-model-management -g -y
指导将旧的 SettingRegistration 重构为 SettingDescriptor 和 SettingUIDescriptor，明确分层存储规则以优化模块边界和懒加载。
迁移遗留设置注册逻辑
拆分设置描述符与UI描述符
npx skills add ChromeDevTools/devtools-frontend --skill devtools-setting-migration -g -y
指导在 DevTools 前端正确使用 Source Maps 和结构化堆栈追踪，涵盖 API 调用、模型处理及 UI 组件渲染，避免内存泄漏。
需要解析或展示源代码映射后的堆栈信息
实现错误信息的符号化与可视化展示
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漏洞。涵盖文本表示、UI渲染及Lit模板自动转义机制的使用规范。
处理DevTools界面中的用户输入或不可信数据
在控制台或DOM树中显示字符串值
使用Lit模板渲染包含动态内容的UI组件
npx skills add ChromeDevTools/devtools-frontend --skill devtools-unicode-escaping -g -y
针对 DevTools 模块文件夹进行用户界面字符串和本地化注释的重构，遵循 UX 写作指南。包括环境配置、Issue 状态检查、创建分支及应用 8 点检查清单优化文案。
需要简化 UI 界面文案
修正本地化注释格式
执行 b/40799900 跟踪任务下的子任务
npx skills add ChromeDevTools/devtools-frontend --skill devtools-ux-writing-refactor -g -y
提供项目构建、测试及代码健康检查的规范，涵盖运行特定文件/目录测试、使用autoninja编译、执行ESLint/StyleLint校验及提交前预检等仓库专属命令与最佳实践。
需要构建项目
需要运行测试验证代码
需要检查代码健康或格式
npx skills add ChromeDevTools/devtools-frontend --skill devtools-verification -g -y
通过临时修改 DevTools 代码并启动 Chrome，利用 Puppeteer 脚本验证 CSS 代码补全功能的触发率。
需要评估或测试 AI CSS 代码补全功能的触发情况
运行前端 DevTools 相关的自动化性能或功能验证
npx skills add ChromeDevTools/devtools-frontend --skill evaluate-ai-css-completion -g -y
修复 DevTools 代码库中之前被跳过的测试。通过提取 Bug ID、移除跳过期望、迭代修复代码或测试并重新运行验证，最终确保所有关联测试通过。
需要修复被标记为 Skip 的测试
收到 Chromium Bug 链接要求取消测试跳过
npx skills add ChromeDevTools/devtools-frontend --skill fixing-skipped-tests -g -y
指导将 DevTools 单元测试迁移至轻量级 Foundation 模式，避免全局单例和 DOM 依赖。使用 TestUniverse 替代旧助手，实现跨平台兼容与更清晰的测试环境管理。
需要将现有单元测试重构为 Foundation 模式
移除对 describeWithEnvironment 等重型助手的依赖
npx skills add ChromeDevTools/devtools-frontend --skill foundation-test-migration -g -y
通过 depot_tools 的 gerrit_client.py 与公共 Gerrit 平台交互，用于查询变更列表、获取文件修订版、添加补丁集评论、投票及提交或放弃代码变更。
查询公共 CL 列表
检索文件修订版本
添加补丁集评论
对审查标签进行投票
提交代码变更
放弃或恢复公共 CL
npx skills add ChromeDevTools/devtools-frontend --skill gerrit-cli -g -y
规范 DevTools 子模块合并至父模块的构建流程，包括整合 BUILD.gn、移除冗余依赖及更新资源列表 gni 文件，旨在简化构建配置。
需要合并 DevTools 子模块到父模块
整理和优化 DevTools 构建配置文件
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操作重构为Lit-html
UI组件技术栈迁移
npx skills add ChromeDevTools/devtools-frontend --skill ui-eng-vision-local-lit-renderer -g -y
将手动DOM创建、更新逻辑和渲染循环从构造函数及事件处理器中提取到私有辅助方法，定义结构化状态接口，实现UI更新与业务逻辑分离。
重构类构造函数中的手动DOM操作
优化分散的事件处理更新逻辑
统一Lit-html渲染调用入口
npx skills add ChromeDevTools/devtools-frontend --skill ui-eng-vision-logic-consolidator -g -y
协调Chrome DevTools遗留组件向现代UI框架迁移的元技能，通过多阶段流水线管理代码重构，确保每次变更小且可测试。
需要将Chrome DevTools旧视图迁移到UI.Widget和Lit-html
执行多阶段代码现代化改造流程
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 渲染及默认视图导出。
需要重构旧版组件继承关系
升级视图代理以支持注入和标准更新
npx skills add ChromeDevTools/devtools-frontend --skill ui-eng-vision-widget-promoter -g -y
提供DevTools UI小部件的MVP架构开发指南，涵盖Model、Presenter和View的职责划分、生命周期管理及lit-html渲染规范。
构建UI组件
重构遗留Widget
遵循MVP模式开发前端界面
npx skills add ChromeDevTools/devtools-frontend --skill devtools-ui-widgets -g -y
Chrome DevTools 专用版本控制技能，规范使用 gerrit 工作流。禁止使用标准 git 命令，强制使用 git new-branch 创建分支、git cl upload 提交 CL，支持 stacked changes 管理及发布状态查询。
在 Chrome DevTools 项目中创建新分支或提交代码变更
管理基于 Gerrit 的堆叠变更（stacked CLs）
查询 DevTools 代码的发布和回滚状态
npx skills add ChromeDevTools/devtools-frontend --skill devtools-version-control -g -y
用于复现和调查测试不稳定性（Flaky Tests）的工作流。通过本地高频运行和压力测试机器人并行执行，收集失败数据并定位问题，为修复提供依据。
用户请求复现特定测试的不稳定现象
收到包含Chromium Bug链接或测试文件名的输入
npx skills add ChromeDevTools/devtools-frontend --skill repro-flaky-tests -g -y
