Googleが公開したModern Web GuidanceというAIエージェント用Skillを使用してみた。

最新のウェブ ガイダンス  |  Modern Web Guidance  |  Chrome for Developers

最新のウェブ向けに構築する方法に関するガイダンス。

developer.chrome.com

npx modern-web-guidance@latest install

以上のコマンドでインストールできる。

Claude Codeのモバイル版で、まずこのSkillをインストールしてから現在のコードをレビューさせたところ書き方がモダンでない点をいくつか見つけることができた。

サイト改善 TODO

パフォーマンス

• Google Fonts をノンブロッキング読み込みに変更 (BaseHead.astro)
• Speculation Rules API でページプリフェッチを追加 (BaseHead.astro)
• font-size-adjust でフォントスワップ時のCLSを低減（要フォントメトリクス計測）

UX / モダンCSS

• Cross-document View Transitions を追加 (global.css)
• prefers-reduced-motion 対応を追加 (global.css)
• トップページにコンテンツ（最新記事一覧）を追加 (index.astro)
• モバイル: “Home” リンクを非表示にしてナビを簡潔に (Header.astro)

アクセシビリティ・細部修正

• .sr-only の非推奨 clip 構文（スペース区切り）を削除 (global.css)
• --muted カラーのコントラスト改善（ライト/ダーク両モード）(global.css)

今までClaudeをあまりカスタマイズせずに使っていたのだが、色々なSkillを導入したり自作して便利にしていきたい。