AI Skill
AIコーディングアシスタントが回答・実装の前に、このサイトでCSSのブラウザ対応状況を確認するようになるSkillです。
できること
このSkillは、MDN Browser Compatibility Dataをもとにこのサイトが生成しているブラウザ対応データ（cssunlocked.dev/llms.txt）をAIに参照させます。 インストールすれば、CSSの対応状況が話題になるたびに自動的に働きます。
- 対応状況を答える
- Chrome・Edge・Firefox・Safari・Safari (iOS)それぞれの対応開始バージョンと、プレフィックスが今も必要かどうかを、記憶ではなくデータから答えます。
- 使える機能を優先する
- 対象ブラウザを指定せずにCSSを依頼した場合、一部のブラウザでしか使えない機能より、全対象ブラウザで使える機能を優先して提案します。
- 書き方ではなくバージョンを見る
- 担当するのは対応バージョンの裏取りだけです。 CSSをどう書くかはAI本体や、実装パターンを扱う他のSkillに委ねます。
ダウンロード
中身はSKILL.md 1枚のzipです。 参照先のデータはMDN Browser Compatibility Dataの更新に合わせて再生成されるため、Skill自体を入れ直す必要はありません。
インストール
お使いのツールに合わせて設置してください。 すぐに認識されない場合はツールを再起動してください。
- Claude Code
解凍してできた
css-unlockedディレクトリを、次のいずれかに置いてください。~/.claude/skills/全プロジェクトで使う場合公式ドキュメントcode.claude.com/docs/ja/skills.claude/skills/プロジェクト単位で使う場合- Claudeアプリ（デスクトップ・Web）
「設定 → カスタマイズ → スキル → 追加」から、解凍せずzipのままアップロードしてください。 事前に「設定 → 機能」で「コード実行とファイル作成」をオンにしてください。
公式ドキュメントsupport.claude.com/ja/articles/12512180- Codex CLI・IDE拡張
解凍してできた
css-unlockedディレクトリを、次のいずれかに置いてください。 ChatGPTデスクトップアプリ内のCodexも同じディレクトリを読み込みます。~/.agents/skills/全プロジェクトで使う場合公式ドキュメントlearn.chatgpt.com/ja-JP/docs/build-skills.agents/skills/リポジトリルートに置いて、プロジェクト単位で使う場合- ChatGPT
「サイドバー → プラグイン → スキル → 作成 → コンピューターからアップロード」の順に選び、解凍せずzipのままアップロードしてください。 スキル機能はChatGPT Business・Enterprise・Healthcare・Eduで利用できます。
公式ドキュメントhelp.openai.com/ja-jp/articles/20001066-skills-in-chatgpt- その他のツール
SKILL.mdはYAMLフロントマター付きのMarkdownファイルです。 各ツールの公式サイトを確認してください。
試してみる
インストールできたら、AIにこう聞いてみよう！
- field-sizing: contentはもう使える？
- ラッパー要素を足さずにこのカードのスタイルを整えて。
※前者は事実を尋ねる質問なので、対応バージョンがデータからそのまま返ります。後者はブラウザを指定していないため、全ブラウザで使える機能が選ばれます。