jpskill.com
🛠️ 開発・MCP コミュニティ

visual-qa

Complete visual QA - screenshots with full-page scroll to trigger animations, then analyze with Claude. Run after CSS/template changes.

⚡ おすすめ: コマンド1行でインストール(60秒)

下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。 ダウンロード → 解凍 → 配置まで全自動。

🍎 Mac / 🐧 Linux 
mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o visual-qa.zip https://jpskill.com/download/18120.zip && unzip -o visual-qa.zip && rm visual-qa.zip
🪟 Windows (PowerShell) 
$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/18120.zip -OutFile "$d\visual-qa.zip"; Expand-Archive "$d\visual-qa.zip" -DestinationPath $d -Force; ri "$d\visual-qa.zip"

完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。

💾 手動でダウンロードしたい(コマンドが難しい人向け)
  1. 1. 下の青いボタンを押して visual-qa.zip をダウンロード
  2. 2. ZIPファイルをダブルクリックで解凍 → visual-qa フォルダができる
  3. 3. そのフォルダを C:\Users\あなたの名前\.claude\skills\(Win)または ~/.claude/skills/(Mac)へ移動
  4. 4. Claude Code を再起動
⬇ .zip でダウンロード(推奨) ⬇ .skill 形式(上級者用) 元のソース ↗

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

🎯 このSkillでできること

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

📦 インストール方法 (3ステップ)

  1. 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
  2. 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
  3. 3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
    • · macOS / Linux: ~/.claude/skills/
    • · Windows: %USERPROFILE%\.claude\skills\

Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。

詳しい使い方ガイドを見る →
最終更新
2026-05-18
取得日時
2026-05-18
同梱ファイル
1

📖 Skill本文(日本語訳)

※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。

Visual QA Skill

GSAPアニメーションを適切に処理するために、スクリーンショットをキャプチャする前にページ全体をスクロールする、自動化されたビジュアルテストです。

使用方法

ClaudeにビジュアルQAの実行を依頼します。

  • "CSRサイトでビジュアルQAを実行して"
  • "すべてのページのスクリーンショットを撮って分析して"
  • "ウェブサイトのビジュアル状態を確認して"

このSkillの機能

  1. フルページスクロール - GSAP/ScrollTriggerアニメーションをすべてトリガーするために、ページ全体を段階的にスクロールします。
  2. マルチデバイススクリーンショット - デスクトップ (1920px)、タブレット (768px)、モバイル (375px)
  3. 並列処理 - 複数のページを同時に分析するために、Haikuサブエージェントを使用します。
  4. ビジュアル分析 - 問題がないかスクリーンショットを確認します。

テスト対象ページ

ページ URL
Home https://csrdevelopment.com/
About https://csrdevelopment.com/about/
Portfolio https://csrdevelopment.com/portfolio/
Contact https://csrdevelopment.com/contact/
Privacy Policy https://csrdevelopment.com/privacy-policy/
Terms https://csrdevelopment.com/terms-of-service/

スクリーンショットスクリプト

場所: /root/.claude/skills/visual-qa/screenshot.py

単一ページ

python3 /root/.claude/skills/visual-qa/screenshot.py --url https://csrdevelopment.com/about/

全ページ

python3 /root/.claude/skills/visual-qa/screenshot.py --all

出力

スクリーンショットの保存先: /home/dev/screenshots/

Haikuによる並列分析

フルビジュアルQAを実行する際は、複数のHaikuエージェントを起動して、異なるページを同時に分析します。

Agent 1: Home + About のスクリーンショットを分析
Agent 2: Portfolio + Contact のスクリーンショットを分析
Agent 3: Legalページのスクリーンショットを分析

ビジュアルQAチェックリスト

全ページ

  • [ ] ヘッダーが表示され、ロゴが中央に配置されている
  • [ ] メニューボタンが動作する
  • [ ] フッターリンクが存在する
  • [ ] 水平スクロールがない
  • [ ] すべてのサイズでテキストが読みやすい

Home Page

  • [ ] Heroビデオ/画像がロードされている
  • [ ] Heroテキストが表示されている (opacity が 0 ではない)
  • [ ] 物件カードが画像付きで表示される
  • [ ] アニメーションが完了している

About Page

  • [ ] チームメンバーの写真がロードされている (プレースホルダーではない)
  • [ ] Bioテキストが表示されている
  • [ ] 画像にグレースケールフィルターが適用されている

Portfolio

  • [ ] 物件グリッドが表示される
  • [ ] ステータスバッジが表示される
  • [ ] 各物件で異なる画像が表示される

Contact

  • [ ] フォームフィールドが表示される
  • [ ] 連絡先情報が表示される
  • [ ] 送信ボタンにスタイルが適用されている

Property Detail

  • [ ] Hero画像がロードされている
  • [ ] 物件詳細サイドバー
  • [ ] 問い合わせフォームが存在する
📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

Visual QA Skill

Automated visual testing that properly handles GSAP animations by scrolling through the entire page before capturing screenshots.

Usage

Ask Claude to run visual QA:

  • "Run visual QA on the CSR site"
  • "Take screenshots of all pages and analyze them"
  • "Check the visual state of the website"

What This Skill Does

  1. Full-Page Scroll - Scrolls through entire page in increments to trigger all GSAP/ScrollTrigger animations
  2. Multi-Device Screenshots - Desktop (1920px), Tablet (768px), Mobile (375px)
  3. Parallel Processing - Uses Haiku sub-agents to analyze multiple pages simultaneously
  4. Visual Analysis - Reviews screenshots for issues

Pages Tested

Page URL
Home https://csrdevelopment.com/
About https://csrdevelopment.com/about/
Portfolio https://csrdevelopment.com/portfolio/
Contact https://csrdevelopment.com/contact/
Privacy Policy https://csrdevelopment.com/privacy-policy/
Terms https://csrdevelopment.com/terms-of-service/

Screenshot Script

Location: /root/.claude/skills/visual-qa/screenshot.py

Single Page

python3 /root/.claude/skills/visual-qa/screenshot.py --url https://csrdevelopment.com/about/

All Pages

python3 /root/.claude/skills/visual-qa/screenshot.py --all

Output

Screenshots saved to: /home/dev/screenshots/

Parallel Analysis with Haiku

When running full visual QA, launch multiple Haiku agents to analyze different pages simultaneously:

Agent 1: Analyze Home + About screenshots
Agent 2: Analyze Portfolio + Contact screenshots
Agent 3: Analyze Legal pages screenshots

Visual QA Checklist

All Pages

  • [ ] Header visible and logo centered
  • [ ] Menu button works
  • [ ] Footer links present
  • [ ] No horizontal scroll
  • [ ] Text readable at all sizes

Home Page

  • [ ] Hero video/image loaded
  • [ ] Hero text visible (not opacity 0)
  • [ ] Property cards show with images
  • [ ] Animations completed

About Page

  • [ ] Team member photos loaded (not placeholders)
  • [ ] Bio text visible
  • [ ] Images have grayscale filter

Portfolio

  • [ ] Property grid displays
  • [ ] Status badges visible
  • [ ] Different images for each property

Contact

  • [ ] Form fields visible
  • [ ] Contact info displayed
  • [ ] Submit button styled

Property Detail

  • [ ] Hero image loaded
  • [ ] Property details sidebar
  • [ ] Inquiry form present