Claude Codeの機能が足りなかったらClaude Code自身にSkillを作ってもらおう - SPAサイトの内容を読み込むSkillを作ってみた

データ事業本部の笠原です。

Claude CodeなどのAgenticツールを使っているうちに、「この機能があるといいのにな」と思うことはあると思います。

Claude Codeなら「Skill」、Kiroなら「Power」など、機能拡張するための仕組みがあります。この仕組みについては、ツール自身が一番よく知っているので、ツール自身に仕組みを活用させる方が効率的です。

今回は、最近Xの記事を見てて「この記事要約したいな」と思ってから、実際にClaude CodeにSkillを作ってもらうところまでやってみました。

動機

Webにあるブログやニュースの要約をよくClaude Codeにもやってもらうのですが、最近Xに表示される長文コンテンツ「記事」が、Claude Codeが持つWebFetchツールでは読み込めないことがわかりました。「JavaScriptの読み込みができない」と表示されるのですが、Claude Codeによると、WebサイトがSPA (Single Page Application) でできていることにより、WebFetchツールがSPAのサイトに対応していないのが理由のようです。

WebFetchツールが対応していないのであれば、SPA対応のサイトでも内容を取得できるようにClaude Codeに作ってもらおうと思ったのがきっかけです。

方法

例えば、以下のように指示を出したとします。

次のURLリンク先にあるXの記事を要約できますか？
<URLリンク>

リンク先がSPA対応のサイトだとWebFetchツールで読み込めないため、Claude自身の知識で返したり、取得できない原因と対処方法を返したりします。取得できない原因と対処方法が返ってこなかったら、返してもらうようにClaudeに問い合わせましょう。

自分は取得できない原因と対処方法が返ってきたので、以下のように指示しました。

その処理を自動化して、ClaudeCodeにシングルページアプリケーションを読み込ませるSkillを作りたい。作り方を教えて欲しい。

これをするだけで、WebFetchツールでは取得できないSPA対応サイトの内容も取得できるClaude Code Skillが完成します。

他、細かい調整はvibe codingのように指示を出したりすると、適切に修正してくれます。
また、動作確認も指示を出して実施し、エラーになれば解決してもらえれば問題ないです。

プラグイン化

今回のClaude Code Skillを、プラグイン化しました。
以下のGitHubサイトに公開してます。

このSkillを使用するには、事前にPythonのパッケージマネージャー「uv」が必要なので、インストールしておきます。

# On Windows.
powershell -ExecutionPolicy ByPass -c "irm https://astral.sh/uv/install.ps1 | iex"

# On macOS and Linux.
curl -LsSf https://astral.sh/uv/install.sh | sh

Claude Codeを起動し、以下のスラッシュコマンドを実行すると、Skillが使えるようになります。

# 1. マーケットプレイスを登録
/plugin marketplace add kasacchiful/my-claude-plugins

# 2. プラグインをインストール
/plugin install fetch-spa@kasacchiful-plugins

あとは、以下のように指示するだけで、WebFetchツールでは読み取れないサイトに対して、このスキルを使ってくれます。

次のURLリンク先にあるXの記事を要約できますか？
<URLリンク>

なお、プラグイン化とマーケットプレイス対応も、Claude Codeに実施してもらいました。
スキル作成からプラグイン化、マーケットプレイス対応まで30分くらいで完了してます。

まとめ

Claude Code等のAgenticツールを使いこなすために、ツール自身にいろんな機能を作ってもらうと、自分好みの機能が揃えることができます。

まだ上手く使いこなせていない方は、Claude Code自身に色々問い合わせてみると良いでしょう。