Claude CodeのSkillsでWeb機能のBaseline対応状況を確認できるようにした
Claude Codeで使えるSkillsの仕組みを使って、Web Platform BaselineをClaude Codeから参照できるようにしました。
「XX機能の対応状況はどんな感じ？」と聞くだけで、Baselineの状態やサポートブラウザーのバージョンが出ます。
スキルは以下のリポジトリで公開しています。
https://github.com/kubosho/my-skills
導入方法はClaude Code上で完結するものとスタンドアロンの2種類あります。
Claude Code上で完結する方法では、以下のコマンドを実行します。
/plugin marketplace add kubosho/my-skills
/plugin install kubosho-skills@my-skillsスタンドアロンの方法では、リポジトリをcloneして ~/.claude/skills/ へシンボリックリンクを張ります。
git clone https://github.com/kubosho/my-skills.git
ln -s /path/to/my-skills/skills/baseline ~/.claude/skills/baselineなぜ作ったのか
開発する中で「この機能のブラウザー対応状況はどんな感じだっけ」と気になった場合、今までは以下の手段で確認していました。
しかし、どちらもブラウザーに切り替えて検索する必要があって、コーディング中の流れが途切れるので嫌でした。
技術的な話
Baselineの情報を取得するためにWeb Platform Status APIへリクエストしています。このAPIは GET https://api.webstatus.dev/v1/features?q={query} というエンドポイントで、ある機能のBaseline状態やブラウザーのサポート情報を返します。
リクエスト時に使えるクエリを一部紹介すると、以下のような演算子が使えます。
name:gridのようにキーワードで機能名を検索baseline_status:widelyで広くサポートされている機能を絞り込みavailable_on:chromeや-available_on:firefoxでブラウザーごとのサポート有無でフィルタ
AND条件はスペース区切り、OR条件は +OR+ という記法を使うことで指定できます。例えば name:grid baseline_status:widely で「Widely availableになっているgrid関連の機能」を探せます。
Skillの構造
今回作成したSkillでは、APIのエンドポイント・演算子の一覧・入出力・制約だけを定義しています。ツールの使用や、機能の詳細情報をどこまで表示するかはAIエージェントに任せています。
出力フォーマットは情報量に応じて変更しています。結果が少なければBaselineの状態・サポート日時・ブラウザーバージョンなどを詳細に表示し、結果が多ければサマリーテーブルに切り替えています。
また、10秒経過後にタイムアウトさせるのと、同時リクエスト数の上限を最大3リクエストにするといった制約も設けています。
使ってみて
新しめの機能を使いたいときに「これ大丈夫だっけ」とすぐ聞けて良いです。
特に「主要ブラウザーでまだ使えない機能は？」と自然言語で質問した場合に、AIエージェント側でよしなにクエリを構築して検索できるのが良いです。
あとは最新の状況を知る目的でも使えます。Claude Code上で「2026年にwidelyまたはnewlyへ達した、CSSやJSの機能はある？」という質問した時の応答は以下の通りです。情報は2026年2月26日時点の情報です。
⏺ Skill(baseline)
⎿ Successfully loaded skill
⏺ 2026年のbaseline到達状況を調べるね。CSSとJavaScriptそれぞれ、widelyとnewlyで検索する。
⏺ Fetch(https://api.webstatus.dev/v1/features?q=baseline_date:2026-01-01..2026-12-31%20baseline_status:widely%20group:css)
⎿ Received 35 bytes (200 OK)
⏺ Fetch(https://api.webstatus.dev/v1/features?q=baseline_date:2026-01-01..2026-12-31%20baseline_status:newly%20group:css)
⎿ Received 5.8KB (200 OK)
⏺ Fetch(https://api.webstatus.dev/v1/features?q=baseline_date:2026-01-01..2026-12-31%20baseline_status:widely%20group:javascript)
⎿ Received 35 bytes (200 OK)
⏺ Fetch(https://api.webstatus.dev/v1/features?q=baseline_date:2026-01-01..2026-12-31%20baseline_status:newly%20group:javascript)
⎿ Received 2KB (200 OK)
⏺ 2026年（現時点まで）にBaseline到達した機能をまとめたよ。
使ったクエリ:
- baseline_date:2026-01-01..2026-12-31 baseline_status:newly group:css
- baseline_date:2026-01-01..2026-12-31 baseline_status:newly group:javascript
- widely は CSS・JS ともに 0件だった
---
CSS — Newly available (5件)
すべて 2026-01-13 に newly 到達。最後のブラウザが Firefox 147。
┌────────────────────────┬───────────────┬────────────────┬──────────────────┐
│ Feature │ Chrome │ Safari │ Firefox (最後) │
├────────────────────────┼───────────────┼────────────────┼──────────────────┤
│ Active view transition │ 125 (2024-05) │ 18.2 (2024-12) │ 147 (2026-01-13) │
├────────────────────────┼───────────────┼────────────────┼──────────────────┤
│ rcap unit │ 118 (2023-10) │ 17.2 (2023-12) │ 147 (2026-01-13) │
├────────────────────────┼───────────────┼────────────────┼──────────────────┤
│ rch unit │ 111 (2023-03) │ 17.2 (2023-12) │ 147 (2026-01-13) │
├────────────────────────┼───────────────┼────────────────┼──────────────────┤
│ rex unit │ 111 (2023-03) │ 17.2 (2023-12) │ 147 (2026-01-13) │
├────────────────────────┼───────────────┼────────────────┼──────────────────┤
│ ric unit │ 111 (2023-03) │ 17.2 (2023-12) │ 147 (2026-01-13) │
└────────────────────────┴───────────────┴────────────────┴──────────────────┘
rcap/rch/rex/ric はルートフォントに基づく相対単位。Firefox 147 での実装で全ブラウザ対応になった。
---
JavaScript — Newly available (2件)
┌───────────────────────────────┬────────────┬───────────────┬────────────────┬──────────────────┐
│ Feature │ Baseline日 │ Chrome │ Safari │ Firefox (最後) │
├───────────────────────────────┼────────────┼───────────────┼────────────────┼──────────────────┤
│ Map.prototype.getOrInsert() │ 2026-02-14 │ 145 (2026-02) │ 26.2 (2025-12) │ 144 (2025-10) │
├───────────────────────────────┼────────────┼───────────────┼────────────────┼──────────────────┤
│ JS modules in service workers │ 2026-01-13 │ 91 (2021-05) │ 15 (2021-09) │ 147 (2026-01-13) │
└───────────────────────────────┴────────────┴───────────────┴────────────────┴──────────────────┘
Map.prototype.getOrInsert() は TC39 提案の機能で、キーが存在しなければ値を挿入して返す。Chrome 145 が最後の実装で newly に到達。
---
まとめ
- Widely 到達: CSS・JS ともに 0件（2026年はまだ2ヶ月しか経っていないので、これから増える可能性がある）
- Newly 到達: CSS 5件 + JS 2件 = 計7件
- Firefox 147 のリリース（2026-01-13）が多くの機能の baseline 到達トリガーになっている