page-inspector

页面检查器 — 捕获当前页面布局与样式

所有浏览器交互（包括导航、截图、视口模拟和 DOM 检查）均使用 Skill("pinchtab")。描述你的需求，然后让 pinchtab 处理细节。

输入

原始参数：$ARGUMENTS

根据参数推断：

• TARGET_URL：要检查的 URL
• OUT_DIR：输出目录；如果未提供，则使用 ./page-inspector-output

执行

1. 导航并进行身份验证

• 导航到 TARGET_URL，并获取交互式快照以确认页面已加载。
• 如果页面需要身份验证：
  1. 检查系统提示，查看是否有关于查找凭据的指引。
  2. 检查环境变量 — 运行 env | grep -iE 'USER|PASS|LOGIN|AUTH|TOKEN|CRED|SECRET|API_KEY' | sed 's/=.*/=***/'，列出可用的凭据环境变量（在输出中屏蔽其值）。
  3. 如果找到了凭据，填写登录表单并提交，然后重新获取快照。
  4. 如果未找到，请使用 AskUserQuestion 工具询问在哪里可以找到凭据（自主模式下跳过此步骤）。如果无法获取凭据，跳过整个技能并注明：“已跳过 — 页面需要身份验证，但未找到凭据。”

2. 捕获桌面截图

• 截取屏幕截图，并保存到 OUT_DIR/screenshots/desktop.png
• 写入文件前确保已执行 mkdir -p OUT_DIR/screenshots

3. 捕获关键视口截图

对于每种宽度（1440px、1024px、768px、375px）：

• 将视口调整为目标宽度
• 截取屏幕截图，并保存到 OUT_DIR/screenshots/{width}px.png

4. 检查布局结构

执行 JavaScript，提取以下信息：

• 关键布局容器及其 CSS display/position 属性
• 主要布局元素上的 Flex/Grid 配置
• 任何固定/粘性定位的元素
• 整体页面结构（页眉、导航、主要内容、侧边栏、页脚）

5. 检查计算样式

执行 JavaScript，捕获关键 UI 元素的以下信息：

• 字体系列、字号、字重、行高
• 颜色（文本、背景、边框）
• 间距（外边距、内边距）
• 盒模型尺寸和宽高

6. 写入输出

创建 OUT_DIR/mugshot.md，其中包含：

# Page Inspector Report: {url}

## Screenshots
- Desktop (current): `screenshots/desktop.png`
- 1440px: `screenshots/1440px.png`
- 1024px: `screenshots/1024px.png`
- 768px: `screenshots/768px.png`
- 375px: `screenshots/375px.png`

## Page Structure
{DOM structure overview — key containers and their roles}

## Layout Properties
{CSS display, grid/flex configs, positioning for key elements}

## Typography & Colors
{Font stacks, sizes, color palette observed}

## Spacing & Dimensions
{Key measurements observed}

## Notes
{Any observations relevant to upcoming changes}