mcpField
S
seo-visual

seo-visual

github.com/agricidaniel营销与增长88571 次安装1 周前更新
代码仓库

关于 seo-visual

用于完整 SEO 审计中视觉检查环节的专用技能，依据 URL 和视觉模式检查页面首屏、移动视口、触控目标及字体，并可输出报告和截图。

主要功能

  1. 01检查首屏 H1 与 CTA 可见性
  2. 02检查移动视口与横向滚动
  3. 03检查触控目标和最小字号
  4. 04生成多视口截图
  5. 05输出视觉审计报告与摘要

适用场景

  1. 01检查页面首屏内容是否清晰
  2. 02发现移动页面横向溢出
  3. 03评估触控目标与字体大小
  4. 04为视觉审计保存截图与报告

安装

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

$npx skills add https://github.com/agricidaniel/codex-seo --skill seo-visual

安装后在 Claude Code 中输入/seo-visual确认已加载。

详细介绍

视觉专项

在完整审计中用于视觉子流程。

共享数据缓存

步骤 0 — 检查共享数据缓存：

开始收集数据前，检查 .seo-cache/ 中是否有其他技能缓存的数据。 参考 ../seo/references/shared-data-cache.md，了解数据结构和依赖关系图。

此专项运行全新的视觉检查前，无需上游缓存输入。

  • 如果找到：无需前置缓存；继续当前的视觉采集工作流
  • 如果未找到：正常继续并收集新的视觉数据
  • 如果 JSON 损坏或无法读取：视为未找到并正常继续
  • 如果用户说“刷新”或“重新运行”：完全忽略缓存

输入

  • URL
  • 超时
  • 视觉模式（on|off|auto）

输出

  • VISUAL-AUDIT-REPORT.md
  • SUMMARY.json
  • screenshots/（如果 Playwright 可用）

检查项

  • 首屏可见的 H1 和 CTA
  • 移动端视口和水平滚动
  • 触控目标尺寸和最小字号
  • 多视口截图

写入共享数据缓存

完成所有工作后，将结果写入 .seo-cache/。

mkdir -p .seo-cache/pages/{url-slug}

根据 ../seo/references/shared-data-cache.md 中的架构，写入 .seo-cache/pages/{url-slug}/visual.json。 保留文档中定义的顶层键：cache_type、analyzed_at、url、url_slug、score、layout_summary 和 issues。 仅将额外的视觉细节作为补充字段添加，例如 above_fold、mobile、screenshots 或 notes。

如果 .gitignore 中尚未包含 .seo-cache/，则将其添加进去：

grep -qxF '.seo-cache/' .gitignore 2>/dev/null || echo '.seo-cache/' >> .gitignore
高级交付物

如果用户要求“客户报告”或“高级交付物”，请自动读取 ../seo-audit/assets/report-template.html 和 ../seo/references/premium-report-standard.md。默认以该报告规范作为简报。将 HTML 生成为内部中间产物，然后生成 PDF 作为公开交付物。除非用户明确要求 HTML 文件，否则最终回复中只提及 PDF。

评论

支持 Markdown