Communitygithub.com

Vincenius/wwebdev

在真实浏览器中构建、提供和驱动 wweb.dev 页面,以验证渲染表面的变更。

wwebdev 是什么?

这是一个专为 wweb.dev 项目设计的 AI 智能体技能,用于在真实浏览器环境中验证静态 Astro 页面(包含 React 岛屿)的变更。技能支持通过 `yarn build` 和 `yarn serve` 构建并启动生产服务器,随后使用 Playwright 驱动的系统 Chrome 浏览器加载页面,检查交互式岛屿(`client:visible`)的渲染状态、计算样式、文本区域内容以及响应式布局(1440px 和 ~480px 截图)。该技能适用于需要精确前端验证的场景,尤其关注生成器工具的输出(如 CSS 动画、可复制代码)和移动端布局切换。它强调了无 Playwright 依赖、避免数据 URI 字体 CSP 错误、以及 `yarn test:parity` 的局限性,帮助开发者高效且可靠地完成浏览器级验证。

兼容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/Vincenius/wwebdev/tree/HEAD/.claude/skills/verify

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

验证 wweb.dev 上的变更

使用 React 岛屿的完全静态 Astro 站点——验证意味着在浏览器中加载构建好的页面并与水合后的岛屿进行交互。

构建 + 服务

yarn install          # 如果缺少服务器依赖项(server.mjs 需要 compression/express)
yarn build            # 静态构建 → dist/(内嵌 TZ=UTC)
yarn serve            # 生产服务器在 http://localhost:4321 上(非 astro preview)

node server.mjs 在 Yarn PnP 相关设置下会直接失败——始终通过 yarn serve 运行。在后台运行;使用 curl -s -o /dev/null -w "%{http_code}" http://localhost:4321/<route> 探测。

驱动页面

仓库中没有 Playwright。在临时目录中安装 playwright-core,并使用系统 Chrome(chromium.launch({ channel: 'chrome', headless: true }))——无需下载浏览器。岛屿是 client:visible 的,因此在断言之前等待岛屿渲染的选择器,并为动画留出约 1 秒。

对生成器工具有用的检查:

  • 注入的 <style> 输出的计算样式(animation-name、position、size)
  • 用于可复制 HTML/CSS 代码的 textarea .inputValue()
  • 1440px 和约 480px 的截图(多个工具侧边栏在移动设备上切换为 column-reverse)

注意事项

  • 控制台应无错误。Vite 资源内联已禁用(astro.config.mjs 中 assetsInlineLimit: 0),因为数据 URI 字体违反了 CSP 的 font-src 'self'——如果再次出现数据 URI CSP 错误,说明该设置已丢失。
  • yarn test:parity 需要 test/baseline/(生产 HTML 快照)但未被检入;没有它测试框架会报 ENOENT 错误。无论如何,它不能替代浏览器验证。

相关技能