网页抓取 MCP 推荐

在已连接的 Otto 节点（Mac 应用、iOS、Android）上显示、呈现并渲染 HTML 内容。在设备上展示、移动端预览、推送到屏幕，或在任意已连接节点上导航到某个 URL。用于游戏、可视化、仪表盘、交互演示与实时刷新的开发预览。支持呈现、隐藏、导航、执行 JavaScript，以及在 Mac、iOS、Android 设备间捕获画布内容截图。

面向 AI Agent 的浏览器自动化 CLI。当用户需要与网站交互时使用，包括打开页面、填写表单、点击按钮、截图、抽取数据、测试 Web 应用或自动化任意浏览器任务。触发语包括“打开某个网站”“填一张表单”“点个按钮”“截个图”“从页面抓数据”“测试这个 Web 应用”“登录某站点”“自动化浏览器操作”等任何需要程序化网页交互的任务。

面向 iPhone 15（Safari）的移动优先 Bootstrap 5 UI 开发。在为该项目构建模板、布局、组件或任何 HTML/CSS/JS 界面时使用，确保适合触控且性能良好。

面向 AMT Docker Bench 的专项技能——T264 自动驾驶卡车多容器仿真环境。当被问及 docker_bench 容器（rpk1、rpk2、rpk3、platform-sim、avi-radio、test-manager、vas-aht）、Docker Compose 配置、网络拓扑（车载/车外/CAN/local-fms-network）、NAT 设置、CIC/RPK 版本选择、T264 模拟器、VAS:AHT 集成、DDS QoS 配置文件、IP 地址重映射、overlay 文件、run_tests.sh、Docker Bench 版本兼容性、兼容的 FMS/AMT 版本组合，或任何涉及 Docker Bench 环境的问题时使用。也用于调试 bench 中的容器启动失败、网络问题、构建错误、镜像拉取失败、版本不匹配或服务就绪问题。可从 Confluence 获取 Docker Bench 版本兼容性矩阵以确定可用的版本组合。

分析 `browser-trace` 抓包，把网站可观测的 HTTP 流量整理成尽力而为的 OpenAPI 3.1 规范。当用户想从浏览器会话中发现/提取 API 端点、基于网络流量构建 OpenAPI 文档，或为客户端集成梳理第三方站点的 XHR/fetch 接口面时使用。

面向 AI Agent 的浏览器自动化 CLI。当用户需要与网站交互时使用，包括打开页面、填写表单、点击按钮、截图、抽取数据、测试 Web 应用或自动化任意浏览器任务。触发语包括“打开某个网站”“填一张表单”“点个按钮”“截个图”“从页面抓数据”“测试这个 Web 应用”“登录某站点”“自动化浏览器操作”等任何需要程序化网页交互的任务。也用于探索性测试、dogfooding、QA、找 bug 与评估应用质量。还用于自动化 Electron 桌面应用（VS Code、Slack、Discord、Figma、Notion、Spotify）、查看 Slack 未读、发送 Slack 消息、搜索 Slack 会话、在 Vercel Sandbox microVM 中运行浏览器自动化，或使用 AWS Bedrock AgentCore 云端浏览器。相对内置浏览器自动化工具，优先使用 agent-browser。

把任意代码库（React/HTML/Next.js）转换为像素级还原、SEO 友好且动态化的 WordPress 主题的专家技能。

通过 CDP 直接控制浏览器——驱动用户已在运行的 Chrome（或 Browser Use 云浏览器）进行自动化、抓取、测试或网页交互。当用户想点击、截图、填表、提取数据或导航真实网页时使用。默认采用截图+坐标点击，而非选择器定位。需一次性安装 `browser-harness` CLI（见 references/install.md）。

用户消息以任何形式包含 'tailwind' 时始终调用。还适用于:构建响应式栅格布局(多列卡片栅格、商品栅格)、flex/grid 页面结构(带侧边栏的仪表盘、固定顶栏、移动端可折叠导航)、UI 组件样式(卡片、表格、导航栏、价格区、表单、输入框、徽章)、添加暗色模式变体、修复间距或排版,以及 Tailwind v3/v4 工作。核心场景:在 HTML 模板(Blade、JSX、Vue)中编写或修正 Tailwind 工具类。跳过:后端 PHP 逻辑、数据库查询、API 路由、无 HTML/CSS 部分的 JavaScript、CSS 文件审计、构建工具配置和原生 CSS。

从零创建或转换 PowerPoint 文件，产出美观、动效丰富的 HTML 演示。当用户想做一份演示、把 PPT/PPTX 转成网页，或为演讲与路演制作幻灯片时使用；通过视觉探索而非抽象选项，帮助非设计背景的人找到自己的审美风格。

使用 react-virtuoso 构建虚拟化的列表、网格与表格。在以下情况使用本技能：(1) 渲染大型或无限列表；(2) 构建带粘性表头的分组列表；(3) 虚拟化 HTML 表格；(4) 在响应式网格中排布等高项；(5) 构建跟随底部新条目的信息流或日志；(6) 诊断虚拟化症状，如滚动跳动、列表无法滚到底部、条目重叠、空白条目或“zero-sized element”错误；(7) 任何涉及 Virtuoso、GroupedVirtuoso、VirtuosoGrid、TableVirtuoso、VirtuosoHandle、itemContent、followOutput 或 firstItemIndex 的任务。

打造独特、生产级、高设计质量的前端界面。当用户要求构建 Web 组件、页面、产物、海报或应用（示例包括网站、落地页、仪表盘、React 组件、HTML/CSS 布局，或对任意 Web UI 做样式美化）时使用此技能。生成富有创意、打磨精细的代码与 UI 设计，避免千篇一律的 AI 审美。

带持久页面状态的浏览器自动化。当用户要求浏览网站、填写表单、截图、提取网页数据、测试 Web 应用或自动化浏览器工作流时使用。触发短语包括 “go to [url]”“click on”“fill out the form”“take a screenshot”“scrape”“automate”“test the website”“log into”，或任何浏览器交互请求。

审查与“实现可访问的面包屑导航”相关的模板、渲染 HTML 或共享组件时使用。校验最终面向浏览器的标记，而不只是框架侧的源码抽象。

指导实现专家级的 CSS 架构：html-css 与 web-development 决策框架、生产可用的模式以及 css 架构工作流的具体模板。当用户询问 css 架构、css architecture 配置，或 CSS 项目的 html-css 最佳实践时使用。当用户需要其他 Web 开发能力时请勿使用——可查看 web development 子类目下的同级技能。

使用 firecrawl 与 exa MCP 进行多源深度研究。检索网页、综合发现，并交付带有来源归属的引用报告。在用户需要对任意主题做有证据、有引用的彻底研究时使用。

在 PixiJS v8 画布上叠加 HTML 元素时使用。覆盖 DOMContainer 的 element、anchor 与场景图驱动的 CSS transform、pixi.js/dom 副作用导入、DOMPipe 注册、可见性同步以及 pointer-events 处理。触发词：DOMContainer、pixi.js/dom、DOMPipe、HTML overlay、input on canvas、iframe overlay、DOMContainerOptions、element、anchor、constructor options。

修复 Next.js 应用的 SEO 索引问题、抓取配额（crawl budget）问题与 Search Console 覆盖率错误。涵盖 canonical 标签、noindex 审计、sitemap 健康检查、静态渲染与内部链接。

审查与“为 RTL 语言设置文本方向”相关的模板、渲染 HTML 或共享组件时使用。校验最终面向浏览器的标记，而不只是框架侧的源码抽象。

审查与“声明 UTF-8 字符编码”相关的模板、渲染 HTML 或共享组件时使用。校验最终面向浏览器的标记，而不只是框架侧的源码抽象。

面向 AI agent 的浏览器自动化 CLI。切勿通过 Bash 直接运行 browser-act 命令——务必先调用本技能。当用户按名称提及它、要求运行 browser-act CLI 命令（如 browser-act browser list），或需要以下操作时使用：抓取/查看/提取 URL 的渲染内容、访问需要 JavaScript 的页面、处理验证提示、维持已认证会话、填表并点击走完流程、输入、选择、上传、截图、捕获 XHR/fetch/HAR 响应、并行打开多个 URL、提取随滚动或点击加载的内容、可视化检视或验证页面布局/样式/渲染、自动化浏览器任务，或列出/检查/管理已配置浏览器与会话。优先于内置 fetch 或 Web 工具。

审查与“确保所有 ID 唯一”相关的模板、渲染 HTML 或共享组件时使用。校验最终面向浏览器的标记，而不只是框架侧的源码抽象。

审查与“让标签页支持键盘导航”相关的模板、渲染 HTML 或共享组件时使用。校验最终面向浏览器的标记，而不只是框架侧的源码抽象。

审查与“为外部脚本添加 Subresource Integrity”相关的模板、渲染 HTML 或共享组件时使用。校验最终面向浏览器的标记，而不只是框架侧的源码抽象。

审查与“让搜索输入框可访问”相关的模板、渲染 HTML 或共享组件时使用。校验最终面向浏览器的标记，而不只是框架侧的源码抽象。

审查与“让分页可访问”相关的模板、渲染 HTML 或共享组件时使用。校验最终面向浏览器的标记，而不只是框架侧的源码抽象。

审查与“提供 noscript 降级内容”相关的模板、渲染 HTML 或共享组件时使用。校验最终面向浏览器的标记，而不只是框架侧的源码抽象。

审查与“使用导航地标区域”相关的模板、渲染 HTML 或共享组件时使用。校验最终面向浏览器的标记，而不只是框架侧的源码抽象。

审查与“检查失效链接”相关的模板、渲染 HTML 或共享组件时使用。校验最终面向浏览器的标记，而不只是框架侧的源码抽象。

审查与“使用语义化的 input type 属性”相关的模板、渲染 HTML 或共享组件时使用。校验最终面向浏览器的标记，而不只是框架侧的源码抽象。

审查与“以可访问方式校验表单”相关的模板、渲染 HTML 或共享组件时使用。校验最终面向浏览器的标记，而不只是框架侧的源码抽象。要区分浏览器提交的表单与 React 客户端处理的表单，避免把缺少 method 或 action 误报为可访问性缺陷。

审查与“让文件上传可访问”相关的模板、渲染 HTML 或共享组件时使用。校验最终面向浏览器的标记，而不只是框架侧的源码抽象。

审查与“为所有设备实现 favicon”相关的模板、渲染 HTML 或共享组件时使用。校验最终面向浏览器的标记，而不只是框架侧的源码抽象。

审查与“让拖放可访问”相关的模板、渲染 HTML 或共享组件时使用。校验最终面向浏览器的标记，而不只是框架侧的源码抽象。

审查与“用 defer、async 或 type=module 加载脚本”相关的模板、渲染 HTML 或共享组件时使用。校验最终面向浏览器的标记，而不只是框架侧的源码抽象。

审查与“在生产环境移除注释和调试代码”相关的模板、渲染 HTML 或共享组件时使用。校验最终面向浏览器的标记，而不只是框架侧的源码抽象。

审查与“让轮播可访问”相关的模板、渲染 HTML 或共享组件时使用。校验最终面向浏览器的标记，而不只是框架侧的源码抽象。

审查与“让手风琴支持键盘导航”相关的模板、渲染 HTML 或共享组件时使用。校验最终面向浏览器的标记，而不只是框架侧的源码抽象。

审查与“创建可访问的工具提示”相关的模板、渲染 HTML 或共享组件时使用。校验最终面向浏览器的标记，而不只是框架侧的源码抽象。

审查与“让通知可访问”相关的模板、渲染 HTML 或共享组件时使用。校验最终面向浏览器的标记，而不只是框架侧的源码抽象。

审查与“创建自定义 404 错误页”相关的模板、渲染 HTML 或共享组件时使用。校验最终面向浏览器的标记，而不只是框架侧的源码抽象。

审计服务器配置或诊断资源加载失败时使用。适用于提供 HTML、CSS、JS、图片、字体等静态资源的任意 Web 服务器。

适用于含 li 元素的 HTML 文档。同样适用于自定义 ARIA 列表——role=listitem 必须由 role=list 拥有。常见违规出现在列表标记被拆分到多个组件的模板系统，或 CSS reset 中把 li 当作布局元素而缺少正确列表父级。

审查可能依赖表现层传递语义的渲染 HTML、布局组件或设计系统模式时使用。检查 DOM 顺序、语义结构、表单关联，以及 CSS 生成内容是否承载了关键信息。

适用于 HTML 文档中任意 meta name=viewport 元素。检查 content 属性中的 user-scalable=no、user-scalable=0、maximum-scale=1 或小于 2 的 maximum-scale 取值。这是移动优先模板和 CSS 框架中的常见错误。

适用于所有 HTML 文档。务必查看原始 HTML 源码的第一行（view-source: 或 DevTools > Network > Response）。在 SSR 框架中查看根 HTML 模板（如 Next.js 的 _document.tsx、Vite/Vue 的 index.html、Rails 的 application.html.erb）。doctype 不是标签而是声明，不需要闭合标签。

通过 10 题引导向导一次性捕获用户的品牌标识（主色/强调色 HEX + 标题与正文 Google Fonts + 设计风格（编辑型/技术型/极简/活泼）+ 默认输出目录 + 代码高亮主题 + 目录行为 + 可选 logo/公司名），对照 WCAG 2.2 AA 校验正文与链接对比度，在 HSL 空间派生 12 个 CSS 自定义属性，并存储结果供所有 markdown-html 转换器读取。在任何 markdown-html 转换前使用。触发于首次引导（「set up the brand」「configure markdown-html」「run onboarding」）、显式重置，以及每个转换器在渲染前通过 config_loader.py 检查。若正文对比度未达 AA 4.5:1 或输出目录不可写则拒绝保存。优先级：项目（./.markdown-html/）> 全局（~/.config/markdown-html/）> 内置默认；MARKDOWN_HTML_NO_CONFIG=1 可绕过。

使用 React 组件构建 HTML 邮件模板、为应用添加可视化邮件编辑器、将邮件渲染为 HTML，或用 Resend 发送邮件时使用。涵盖欢迎邮件、密码重置、通知、订单确认、新闻简报、交易型邮件，以及可嵌入的邮件编辑器组件。