テック技報最新号へ →
デザイン

「Modern Web Guidance」などのスキルでサイトを採点させ、HTMLレポート→一括修正する

AIにフロントエンドを書かせると古い書き方になりがち。Googleが公開したベストプラクティス集のスキルを入れて、既存サイトを診断・修正させる。

@tonkotsuboy_com · 投稿 2026-05-21
#コーディングエージェント#CSS#アクセシビリティ#監査#スキル

どんな問題を解決するか / いつ使うか

AIが書くCSS/JSが古い書き方になるとき。自社サイトのアクセシビリティ・パフォーマンス・セキュリティがどれくらいモダンか確認したいとき。

やり方

  1. スキルを入れる：npx modern-web-guidance@latest install
  2. Claude Code に依頼：「CSS・JavaScript・HTMLからアクセシビリティ・パフォーマンス・セキュリティまで、モダンなWeb開発のベストプラクティスでチェックして、更新案をHTMLでレポートして」
  3. レポートを人が確認し、一括で修正してもらう。
  4. 似たもの：URLを渡すとデザインとフロントエンドを監査する Codex 用スキル（npx --yes codex-design-audit-skill@latest：UX/UIの採点、弱い箇所、レスポンシブ・アクセシビリティの問題、優先度付きの修正案）。アクセシビリティ専門なら a11y-specialist-skills。

注意点・対応状況

  • コマンドは投稿時点（2026年4〜5月）のもの。導入前に公式・リポジトリを確認する。
  • 第三者のスキルを入れるときは中身を確認する。

出典

X の元の投稿を開く