CSSモダン機能エージェントスキル：AIコーディングエージェントにおけるモダンCSSプラクティスの強制

GitHubにcss-modern-featuresという新しいエージェントスキルが公開されました。このスキルは、プロジェクトのブラウザターゲットに基づいてモダンなCSSプラクティスを強制します。カラー、レイアウト、セレクタ、アニメーション、タイポグラフィ、ポジショニング、コンポーネントパターンにわたる57以上のCSS機能をカバーしています。

仕組み

このスキルはAIコーディングエージェントにフックし、CSS出力をモダンでブラウザターゲットに適した機能のみに制限します。例えば、プロジェクトがモダンブラウザをターゲットにしている場合、floatベースのレイアウトよりもdisplay: gridを、可変タイポグラフィにはclamp()を、親セレクションには:has()を優先します。ブラウザターゲットを定義すると、スキルが許可される機能を調整します。

対応エージェント

このスキルは以下で動作します：

• Claude Code
• Cursor
• Windsurf
• Codex
• Cline
• GitHub Copilot

なぜ重要か

AIコーディングエージェントは、トレーニングデータに古いコードが含まれているため、しばしば時代遅れのCSS（例：float、clearfix、ベンダープレフィックス）を生成します。このスキルは、モダンな機能に固執するよう強制し、手動でのリファクタリングを省けます。特定のブラウザバージョン（Browserslistで'last 2 versions'など）をターゲットにしなければならないコードベースを維持するチームに特に有用です。

リポジトリ：github.com/rushenn/css-modern-features

以下のRedditスレッドでは、機能セットのカスタマイズに関する追加のコミュニティ議論があります。