Claude Code / Codex に good-css を入れ、モダンCSSを先に試させてからサイトを点検する

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

Claude Code や Codex でLP・マーケサイトを作ったあと、「ありきたりなCSS」や古い書き方に寄りがちなとき。エージェントにスタイルを書かせる前に、モダンな選択肢を先に思い出させたいとき。「Modern Web Guidance」などのスキルでサイトを採点させ、HTMLレポート→一括修正する や モダンCSSのDos/Don'ts（100dvw、:focus-visible、:has()、@layer など）をAIへのルールにも入れる と併用できる。

やり方

1. Claude Code または Codex に good-css スキル／プラグインをインストールする（投稿時点で「47のモダンCSS技法」を保持、と説明されている）。
2. 新しいセッションで、バイブコーディングしたサイトの確認を依頼する。例（自分の言葉で再構成）:

good-css を使って、このサイトのスタイルを点検して。
古い書き方や一般的なAIデフォルトを直し、モダンCSS（コンテナクエリ、:has()、相対色、レイヤーなど）を優先して提案・適用して。

3. 以後、スタイルを書くタスクでもスキルを入れたままにする。エージェントがスタイルを書くとき、まずスキル内の技法を試す動きになる、というのが投稿の主張。

注意点・対応状況

• スキル名やインストール手順はリポジトリ／マーケットプレイス側の更新で変わることがある。導入前に公式のREADMEを確認する。
• 「モダンだから常に正解」ではない。対応ブラウザ・チームのCSS方針・既存の @layer 設計と衝突しないかレビューする。
• 見た目の品質チェックは エージェントにUI変更のたびにスクショで自己チェックさせる（デザイン→実装→スクショ→レビュー→修正のループ） と組み合わせると安心。

出典

• 投稿者: @Voxyz_ai
• 投稿: @Voxyz_ai · 2026-10-10
• 収集日: 2026-10-11（JST）