mcpField
V
visual-auditor

visual-auditor

github.com/heyeddi-comテスト・品質087 回インストール1 日前に更新
リポジトリ

visual-auditor について

visual-auditorは、製品とデザインの仕様に照らして画面を確認し、対応可能な問題をVue/CSSで修正して記録するビジュアルQAスキルです。レスポンシブ画面のキャプチャ、コントラスト確認、最終検証に対応します。

主な機能

  1. 01製品・デザイン仕様とキャプチャの照合
  2. 02VueとCSSでの視覚的問題の修正
  3. 03レスポンシブ画面のキャプチャ
  4. 04コントラストと文字上の動きの監査
  5. 05修正記録と再検証

活用シーン

  1. 01デザイン実装後のルート確認
  2. 02マージ前の可読性やレイアウトずれの修正
  3. 03リリース前のレスポンシブ表示確認

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/heyeddi-com/heyeddi-skills --skill visual-auditor

インストール後、Claude Code で/visual-auditorを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

manifest.json
context/
ANTI_PATTERNS.md
EXAMPLES.md
PROSE_ANTI_SLOP.md
VOCABULARY.md
fixtures/
contrast-violations.html
reference/
contrast-audit.md
fix-loop.md
subagents.md
visual-review.md
scripts/
_contrast_math.py
_heyeddi_paths.py
_skill_cli.py
_spec_context.py
_widths.py
append_fix_log.py
audit_contrast.py
audit_ui.py
contrast_probe.js
finalize_visual_review.py
layout_tree.py
load_visual_context.py

詳細

Visual Auditor

UIを確認し、仕様と比較し、修正し、記録し、再検証します。

あなたはビジュアルQAの実装担当です。スクリーンショットだけを確認するサブエージェントではありません。キャプチャをプロダクト（ペルソナ、ルートの意図、目的）とデザイン（トークン、モックアップの概要、階層）に照らして読み取り、同じターン内にVue/CSSの問題を修正し、すべての変更を記録します。

マーケティングサイトとアプリの主要ページでは、reference/visual-review.md のcalm-wowの視点（主張のあるヒーロー、躍動感のある雰囲気、ブランドらしさが際立つステータス表現、モーションの低減）と、完了ゲート（6種類の幅＋ロゴなしでのブランドテスト）も適用します。

デフォルトの動作（確認不要）

  • 実行可能なビジュアル上の問題は、必ず同じターン内にコードで修正します
  • 修正せずに問題の箇条書きだけを提示してはいけません（ユーザーが明示的に監査のみ、コード変更なしと指定した場合を除く）
  • すべての @heyeddi-handoff、@design-handoff-flutter、およびスタック実装パスの後に自動実行します

幅のプリセット

プリセット幅使用タイミング
fast（デフォルトのキャプチャ）375, 768, 1440制作・仕上げ中の反復
done / flagship375, 430, 768, 1024, 1440, 1920マーケティングサイト／主要ページを完成とする前。finalize_visual_review のデフォルトはこちらです
capture_screenshots --route / --preset fast
capture_screenshots --route / --preset done
finalize_visual_review --route / --check   # defaults to done

使用するタイミング

  • ルートで @heyeddi-design craft または @heyeddi-handoff を実行した後
  • 緑色同士の配色、読みにくいテキスト、概要からのレイアウトのずれがある場合
  • 問題の一覧だけでなく、修正も行うマージ前のビジュアルゲート
  • @heyeddi-product に可読性調査を委任した場合：あなたが修正し、相手が結果をまとめます

必須のパイプライン

reference/visual-review.md と reference/fix-loop.md を読みます。

load_visual_context --route /path --write-review
capture_screenshots --route /path
audit_contrast --route /path
→ READ PNGs + product.md + design.md + mockup-brief + contrast report
→ FIX each error/actionable warn in code
→ append_fix_log (per fix)
finalize_visual_review --route /path --check

修正せずに問題の箇条書きだけを提示してはいけません。報告のみが許可されるのは、ユーザーが監査のみ／コード変更なしと明示した場合に限ります。

仕様との照合

観点参照元
プロダクトroute_intent、ページの目的、ペルソナの success_feeling
デザインdesign.md のトークン、mockup-brief.md の領域、PNGがない場合はワイヤーフレーム
可読性自動チェックの audit_contrast と、キャプチャを目視で確認した結果

ツール

ツール役割
load_visual_context仕様のパス、キャプチャ、コントラストの概要を取得します。--write-review はレビュー文書のひな形を作成します
capture_screenshotsPNGを .heyeddi/audits/visual/screenshots/ に保存します（--preset fast|done）
audit_contrastWCAGと、テキストに重なるモーションを監査します
append_fix_log仕様への参照とファイルを添えて、修正内容を記録します
finalize_visual_reviewdone の幅で再キャプチャし、コントラストの --check を実行してレビューを完了します

サブエージェント

キャプチャ／コントラスト確認にはシェルスクリプトを使います。画像の確認、コードの編集、append_fix_log の呼び出しはあなた（メインエージェント）が行います。reference/subagents.md を参照してください。

成果物（.heyeddi/audits/visual/）

パス用途
screenshots/レスポンシブ表示のキャプチャ
reviews/<feature>-review-<date>.mdプロダクトとデザインに対するレビュー
fix-log.md / fix-log.jsonlすべての修正の記録
<feature>-contrast-<date>.md自動コントラスト監査

環境変数

  • DEV_SERVER_URL：Vue（デフォルトは http://localhost:5173）
  • FLUTTER_WEB_URL：Flutter Web

連携

  • @vue-design-system：トークン／CSSを修正した後に実行します（Quasar、PrimeVue Aura、モーション）
  • @heyeddi-design polish：ビジュアル確認後もIAの問題が残っている場合
  • @pre-merge-gate：finalize_visual_review --check の成功後

タスク完了時：次に使うスキルを提案する

このスキルについてユーザーの依頼を完了した後（ツール呼び出しやサブエージェントの各フェーズの後ではありません）、次に実行する内容を提案します。

  1. 次を実行します。

    python .agents/skills/heyeddi/scripts/suggest_next_skill.py --current-skill visual-auditor --project-root .

    特定のルートを対象にした場合は、--route /path を追加します。

  2. スクリプトの ### Next step ブロックを最終返信に含めます。ユーザーは Prompt 行をチャットにコピーして実行します（例：@heyeddi-design craft /settings）。

直前に完了したサブコマンドが分かる場合は、--mode shape（または craft、audit など）を指定します。

@heyeddi → reference/next-skill-handoff.md を参照してください。

コメント

Markdown 対応