视觉审查 - 在产出可视化结果（网页、文档、UI 界面等）后，自动打开/预览结果，通过截图分析视觉质量问题（布局、间距、对齐、排版、颜色、交互状态等），并自主修复发现的问题。 This skill should be used automatically after producing any visual output. Triggers: 视觉审查, 视觉检查, 界面检查, UI审查, visual review, layout check, 检查界面, 看看效果
低频巡检 Skill for ordinary non-Goal Codex controller windows that need active, ETA-aware monitoring of background worker/review/planning threads. Use to keep the monitor alive until a terminal state, reduce context pollution and token spend, avoid over-polling, minimize expected wasted waiting time, and decide the next allowed action only after a final report, failure, or blocker appears.
Structured persuasion for tech leads, PMs, and founders—not activity logs. Five scenarios (kickoff, status update, wrap-up, investor pitch, solution selling) on one 5-part framework (Hook→Context→Proposal→Evidence→Ask). AI prompts for missing materials and audience context; pre-submit checklist. Claude Code plugin; Cursor, Codex, and chat via prompts.
Rewrite, edit, tighten, punch up, or diagnose user-provided prose while preserving the user's voice, intent, facts, stance, rhythm, humor, and formality. Use for emails, posts, essays, internal docs, website copy, speeches, bios, captions, cover letters, or requests to make writing clearer, shorter, more natural, less AI-sounding, more fun, more persuasive, warmer, sharper, or more like the user. Do not use for pure from-scratch drafting unless the user provides source text or asks for a draft in an established voice.
Comprehensive design skill: brand identity, design tokens, UI styling, logo generation (55 styles, Gemini AI), corporate identity program (50 deliverables, CIP mockups), HTML presentations (Chart.js), banner design (22 styles, social/ads/web/print), icon design (15 styles, SVG, Gemini 3.1 Pro), social photos (HTML→screenshot, multi-platform). Actions: design logo, create CIP, generate mockups, build slides, design banner, generate icon, create social photos, social media images, brand identity, design system. Platforms: Facebook, Twitter, LinkedIn, YouTube, Instagram, Pinterest, TikTok, Threads, Google Ads.
Token architecture, component specifications, and slide generation. Three-layer tokens (primitive→semantic→component), CSS variables, spacing/typography scales, component specs, strategic slide creation. Use for design tokens, systematic design, brand-compliant presentations.
Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing design systems, creating responsive layouts, adding accessible components (dialogs, dropdowns, forms, tables), customizing themes and colors, implementing dark mode, generating visual designs and posters, or establishing consistent styling patterns across applications.
| name | visual-reviewer |
| description | 视觉审查 - 在产出可视化结果（网页、文档、UI 界面等）后，自动打开/预览结果，通过截图分析视觉质量问题（布局、间距、对齐、排版、颜色、交互状态等），并自主修复发现的问题。 This skill should be used automatically after producing any visual output. Triggers: 视觉审查, 视觉检查, 界面检查, UI审查, visual review, layout check, 检查界面, 看看效果 |
| disable | false |
在 AI 产出一个可视化结果后，自动进行视觉层面的质量审查和自主修复。
本 Skill 在以下产出物完成后应自动触发，无需用户手动要求：
首选方案：精确窗口截图（Python，推荐）
preview_url 打开页面 → 页面在 WorkBuddy 内置浏览器面板中渲染python "<skill_path>/scripts/capture_screenshot.py" \
--output "<screenshot_path>" \
--mode window \
--title "WorkBuddy"
ctypes 调用 Win32 API + mss 高速截屏，无环境块限制备选方案：外部浏览器截图
python -m http.server 8765 -d <产物目录>http://localhost:8765/<file>.htmlpython "<skill_path>/scripts/capture_screenshot.py" -o "<path>" -m window -p "chrome"
# 或
python "<skill_path>/scripts/capture_screenshot.py" -o "<path>" -m window -p "msedge"
open_result_view 打开文档# 按窗口标题部分匹配（文档名在窗口标题中）
python "<skill_path>/scripts/capture_screenshot.py" -o "<path>" -m window -t "<文档名关键字>"
# 按进程名截图
python "<skill_path>/scripts/capture_screenshot.py" -o "<path>" -m window -p "WINWORD"
需要截取屏幕特定区域时（如 WorkBuddy 内置浏览器面板的精确位置）：
python "<skill_path>/scripts/capture_screenshot.py" -o "<path>" -m region -r "X,Y,W,H"
| 参数 | 简写 | 说明 | 示例 |
|---|---|---|---|
--mode window -t | -m window -t | 按窗口标题截取特定程序窗口 | -m window -t "stock-watcher" |
--mode window -p | -m window -p | 按进程名截取特定程序窗口 | -m window -p "chrome" |
--mode region -r | -m region -r | 按屏幕坐标截取指定区域 | -m region -r "100,200,800,600" |
--mode activewindow | -m activewindow | 截取当前前台窗口 | -m activewindow |
--mode fullscreen | -m fullscreen | 截取整个主屏幕（兜底） | -m fullscreen |
--client-only false | 截取含标题栏/边框的整窗 | 默认 true（仅客户区） |
输出格式：成功时最后一行输出 OK:<mode>:<path>，失败时输出错误信息和可见窗口列表方便调试。
依赖：需要 Python + mss + pygetwindow（已随 Skill 安装说明提供 requirements.txt）。
| 产出类型 | 打开方式 |
|---|---|
| HTML / Web 页面 | preview_url 打开本地文件或 localhost URL |
| 文档 / PPT / 其他 | open_result_view 打开结果文件 |
根据产物类型选择上述策略 A/B/C，调用截图脚本。
截图保存为 PNG 格式后，使用 Read 工具读取截图进行视觉分析。
逐项检查以下维度，每个维度 0-3 分（0=严重问题 / 1=有问题 / 2=可接受 / 3=良好）：
| 维度 | 检查项 |
|---|---|
| 布局 | 元素对齐（水平/垂直）、重叠、响应式断点、空白分布 |
| 间距 | padding/margin 一致性、元素间距匀称、边界留白 |
| 排版 | 字体层级（h1-h6 视觉差）、行高/字间距、文字截断/溢出 |
| 颜色 | 对比度（WCAG AA）、配色协调、暗色/亮色模式适配 |
| 交互 | 按钮可点击区域、hover/active 状态、焦点可见性 |
| 数据展示 | 表格列宽合理性、数字对齐、图表标签完整性 |
| 边界情况 | 空数据状态、超长文字截断、极端窗口尺寸（320px / 4K） |
详细清单见 references/visual_checklist.md。
对每个发现的问题：
## 视觉审查报告
### 发现的问题 (共 N 个)
| # | 严重度 | 问题 | 原因 | 修复 | 状态 |
|---|--------|------|------|------|------|
| 1 | 严重 | 导航栏与内容区重叠 | z-index 缺失 | 添加 z-index: 100 | ✓ |
| 2 | 中等 | 按钮间距不一致 | margin 值不统一 | 统一为 8px | ✓ |
| 3 | 轻微 | 标题字体偏小 | font-size 16px | 建议改为 20px | 待确认 |
### 审查覆盖率
布局: ✓ | 间距: ✓ | 排版: ✓ | 颜色: ✓ | 交互: ✓ | 数据展示: N/A | 边界: ✓