web-site-check

Webサイトのコードを、納品前・公開前・改修前にチェックするClaudeのスキルです。

ローカルで起動したサイトを検査し、問題点を4区分のレポートにして、直してよいか確認したうえで修正します。新規制作でも、改修案件でも、既存サイトでも、同じ流れで使います。

できること

3段階のプロファイルから選べます。

フォームの検査では、送信はすべてブラウザ内で止めるので、本番に問い合わせが届くことはありません。

レポートの区分

合格した項目は 🟢 で件数だけ表示します。目視確認用のスクリーンショット・印刷PDF・アクセシビリティツリー・Lighthouseの結果は、.web-site-check/ に保存されます。

インストール

このリポジトリを、Claude Codeのスキルのディレクトリに置くだけです。

git clone https://github.com/inarodev/web-site-check.git ~/.claude/skills/web-site-check

Playwright・Lighthouse などの手動インストールは不要です。初回の実行時に、インストールしてよいかを聞かれ、承認すると自動で導入されます。

• npmパッケージ：スキルの scripts/ フォルダの中
• ブラウザ（Chromium、フルではWebKit・Firefoxも）：Playwrightの既定の場所

検査するプロジェクトには何も追加されません。Node.js 20.18.1以上が必要です。

使い方

チェックしたいサイトのディレクトリでClaude Codeを起動し、次を入力します。

/web-site-check

URLを渡すこともできます。

/web-site-check http://localhost:3000

流れは次のとおりです。

1. 構成・起動方法・導入状況を自動で調べる
2. 質問が1回だけ出る（実行プロファイル、インストールしてよいか、自動判定できなかった項目）
3. 回答に従って、導入・サイトの起動・検査を最後まで自動で行う
4. レポートが出る
5. 「全部進める／選んで進める／レポートのみ」を聞かれ、承認した範囲だけ修正する

「納品前チェックをお願いします」のように話しかけても起動します。

スクリプトだけを手動で実行することもできます。

cd ~/.claude/skills/web-site-check/scripts
node setup.mjs --check --profile full     # 導入状況の確認
node setup.mjs --install --profile full   # npmパッケージとブラウザの導入
npx tsx check.ts --base http://localhost:3000 --profile standard --out /path/to/project/.web-site-check

守ること

• 対象はローカルで起動できるコードです。公開サイトを巡回・スキャンするものではありません。他人のサイトを許可なく調べないでください
• 外部リンクの確認（--check-external）は、外部サイトへアクセスするため、明示したときだけ行います
• 修正はレポートの承認後に、承認された範囲だけ行います。修正前にGitでブランチかコミットを作ります
• 法的要件（プライバシーポリシー、特定商取引法など）は確認事項として挙げるだけで、助言ではありません
• 自動検査で見つかる問題は一部です。スクリーンリーダーでの通し読みや実機での確認は人が行ってください。ローカルの検査では、本番のホスティングやCDNの設定（HTTPS、ヘッダー、圧縮）は確認できません

構成

web-site-check/
  SKILL.md          全体のフロー
  env/              構成と案件種別の判定
  profiles/         クイック／標準／フル
  checks/           検査項目の判断基準
  report/           レポートの形式と、要判断の質問
  scripts/
    check.ts        検査の入口
    checks/         検査ごとのモジュール
    browser/        ブラウザ内で動く判定処理
    lib/            共通処理
    setup.mjs       導入状況の確認と導入
  evals/            テスト用のプロンプト

ライセンス

MIT License