mcpField
F
frontend-browser-review

frontend-browser-review

github.com/langfuse测试与质量36.7k51 次安装今天更新
代码仓库

关于 frontend-browser-review

frontend-browser-review 是供 Agent 检查前端浏览器可见变更的技能，说明何时执行浏览器验证、如何准备测试数据，以及如何报告结果或交接小型视觉变更。

主要功能

  1. 01说明何时需要浏览器检查
  2. 02通过 seed CLI 准备测试数据
  3. 03使用 Playwright MCP 或 Cursor 检查流程
  4. 04检查视觉状态与响应式行为
  5. 05报告结果、风险或交接步骤

适用场景

  1. 01验证导航流程或跨步骤状态变更
  2. 02检查浏览器可见的缺陷修复
  3. 03检查窄屏下的布局表现
  4. 04将小型视觉变更交由人工检查

MCP 相关

在本地 Agent 环境中，该技能指引通过工作区 Playwright MCP 服务执行浏览器检查；Cursor Cloud 可使用内置的计算机操作功能。

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/langfuse/langfuse --skill frontend-browser-review

安装后在 Claude Code 中输入/frontend-browser-review确认已加载。

详细介绍

前端浏览器审查

当变更会影响用户在浏览器中看到或执行的内容时，使用此技能。

从这里开始

  • 阅读 ../../../web/AGENTS.md 了解 web 专属的入口点和测试命令。
  • 在 Cursor Cloud 中，使用内置的 computer use。在本地 Agent 环境中，使用共享 Agent 配置中的 workspace playwright MCP 服务。

何时使用

当结果不确定时，驱动浏览器：

  • 导航或页面流程的变更，或任何跨步骤携带状态的内容
  • 布局或响应式行为可能以你无法预测的方式重排
  • 修复在浏览器中可见失败模式的 bug
  • 对一项重要的用户可见工作进行最终签字确认

何时改为提供交接

一个小的、自包含的视觉变更，你有信心，就不需要自动化检查。间距、一个颜色 token、一个标签、一个图标替换：说明你改了什么，交出确切的 URL —— 一个本地端口或 pull request 的 pr-<N>.preview.langfuse.com —— 让开发者花两秒钟看一眼。对他们来说这比等你确认你已经知道的事情更快，而且 pull request 中的截图仍然携带证据。

两个条件。要明确 —— 说出你没有检查什么以及为什么，让这个选择可见，他们可以推翻它。并且在他们还在的时候做：提供交接是一种移交，而不是结束你这一轮的方式。如果周围没人在看，而变更又是用户可见的，就自己检查。

先预填测试数据

大多数流程只有在有意义的数据下才可审查。在打开浏览器之前，用 seed CLI 为流程播种所需的数据（参见 seed-test-data 技能中的需求→命令表）：

  • pnpm run seed -- trace-tree --observations 5000 --v4 —— 复杂的 observation 树（v3 + v4 事件）
  • pnpm run seed -- long-session --traces 300 —— 繁重的 session 视图
  • pnpm run seed -- many-traces --count 100000 —— 列表/筛选性能
  • pnpm run seed -- doctor —— 当技术栈行为异常时

每次运行都会打印 UI 深链接 —— 打开那些链接，而不是手动导航。不要手写 seed 脚本或原始 ClickHouse 插入。

审查循环

  1. 在可用时使用现有的 Cursor Cloud Compose 应用。否则，除非本地服务器已在运行，用 pnpm run dev:web 启动应用。
  2. 如果机器上尚未设置 Playwright，用 pnpm run playwright:install 安装 Chromium。
  3. 用 Cursor computer use 或 Playwright MCP 服务打开主要变更流程，在流程需要播种数据时使用 seed CLI 深链接。
  4. 演练受变更影响的主要 happy path。
  5. 检查明显的视觉回归：
    • 布局或间距损坏
    • 横幅重叠或视口锚定问题
    • 缺少加载、空或错误状态
    • 窄宽度下的响应式行为损坏
  6. 如果页面发生实质性变化，检查生成的 UI 状态，并将其与任务或现有模式中的预期行为进行比较。
  7. 如果 Playwright MCP 会话失败，检查 /tmp/playwright-mcp。在 Cursor Cloud 中，检查该运行的浏览器产物和 Compose 日志。

输出预期

报告：

  1. 你审查了哪个流程
  2. 主要流程是否正常工作
  3. 任何可见的回归或后续风险
  4. 如果审查被阻塞，确切是什么阻止了浏览器验证
  5. 对于人工交接，预览或沙盒 URL 加上确切的点击路径步骤，以及在 GitHub PR 上发布的修复证据（截图、短视频或前后对比）—— 不是长篇的仅 Agent 的书面报告，也不只是在聊天中

范围说明

  • 此技能补充而非替代有针对性的测试和 linting。
  • 对于实现细节，留在 web/AGENTS.md 和包本地技能中。
  • 将此用作浏览器签字确认工作流，而不是通用的前端编码指南。

评论

支持 Markdown