HyperSkill入社試験——Claude Codeの「スキルファイル」を自動生成するツールのコードを全部読んだ
HyperbrowserのHyperSkillはClaude Code用のSKILL.mdを自動生成するOSSツール。Serper検索→Hyperbrowserスクレイプ→GPT-4o生成の3段パイプラインを、ソースコード精読で徹底解剖。仕組み・料金・限界・競合比較まで。
エンジニアのゆとです。
この記事は「入社試験」シリーズの第1回。AIツールが毎週のように出てくる中で、どれを自分のワークフローに採用するかを判断するためのプロセスを「入社試験」と呼んでいる。評価軸やプロセスについてはこちらにまとめた。
さて、今回の受験者はXで流れてきたこのツール。
HyperSkill。トピックを入力すると、Webを検索・スクレイプして、Claude Code用のSKILL.mdファイルを自動生成してくれるOSSツール。Hyperbrowserが公開しているアプリ例の1つ。
Claude Codeのスキルファイルって、要は「この分野のことを聞かれたらこう振る舞え」という専門知識を教え込むための仕組みだ。前の記事で書いた「専門家AIチームを育てる」話と直結する。
で、このツール、使えるのか？コードを全部読んで入社試験してみた。
3行で言うと
- SerperでGoogle検索 → Hyperbrowserでページをスクレイプ → GPT-4oでSKILL.md生成、という3段パイプライン
- 「スキルツリーモード」がある。1トピックから8-12個の相互リンクされたスキルファイル群を一括生成し、D3.jsでナレッジグラフとして可視化できる
- 無料枠で約1,000回のスキル生成が可能（Hyperbrowser側のみ。OpenAI費用は別途）
仕組み：コードを読んでわかったこと
パイプライン全体像
トピック入力
↓
[Serper API] Google検索 → 上位3件のURL取得
↓
[Hyperbrowser SDK] 各URLをスクレイプ → Markdown化
↓
[OpenAI GPT-4o] スクレイプ結果をコンテキストにSKILL.md生成
↓
プレビュー → ダウンロード → .claude/skills/ に配置シンプル。各ステージが独立していて、入れ替えも効く設計。
検索フェーズ（lib/serper.ts）
Serper APIでGoogle検索を叩いて上位3件のURLを取得する。ここは極めてシンプル。num: 3 がハードコードされていて、情報源は3ページに固定。
スクレイピングフェーズ（lib/hyperbrowser.ts）
Hyperbrowser SDKの scrape.startAndWait() でページのメインコンテンツをMarkdownに変換。onlyMainContent: true を指定しているので、ナビゲーションやフッターは除外される。
複数URLの場合は scrape.batch.startAndWait() でバッチ処理。SDK側で並列化を処理してくれるので、個別に Promise.all するよりオーバーヘッドが少ない。
生成フェーズ（lib/openai.ts）
ここが一番面白い。GPT-4oへのプロンプトがかなり練られている。
特に注目なのが description フィールドの扱い。Claude Codeはこのフィールドを読んで「このスキルをいつ使うか」を判断する。HyperSkillのプロンプトはこれを明確に理解していて、「トリガー条件をdescriptionに含めろ」と指示している。
description field (MOST IMPORTANT):
- Max 1024 characters
- This is the PRIMARY trigger mechanism
- MUST include: What the skill does + ALL trigger conditionsClaude Codeの内部動作をちゃんと理解した上で設計されている。
3つのモード
Single Mode: トピック or URLを1つ → 1つのSKILL.md生成。max_tokens: 3500。
Batch Mode: 複数URLを入力 → Promise.allSettled で並列にSKILL.md生成。失敗分はスキップ。
Skill Tree Mode: これが目玉機能。1トピックから8-12個の相互リンクされたスキルファイル群をJSON構造で一括生成。max_tokens: 16384。各ファイルが [[wikilink]] で相互参照し、D3.jsのforce-directedグラフで可視化できる。
Hyperbrowserとは何か
HyperSkillを理解するには、母体のHyperbrowserを知っておく必要がある。
「AIエージェント向けBrowser-as-a-Service」。クラウド上でヘッドレスブラウザをコンテナ分離で大規模に動かすインフラサービス。
主な特徴：
- sub-500msでブラウザセッション起動、数千の同時セッション対応
- 自動CAPTCHA解決、アンチbot検出回避
- Playwright / Puppeteer / Selenium統合
- MCPサーバー対応（Claude Desktop / Cursor / Windsurfと直接接続可能）
- OpenAI CUA / Claude Computer Use / Browser Useとの統合
要は「AIにブラウザを使わせるためのインフラ」。HyperSkillはそのデモアプリという位置づけ。
料金
| プラン | 月額 | クレジット | 同時ブラウザ |
|---|---|---|---|
| Free | $0 | 3,000 | 5 |
| Startup | $30 | 18,000 | 25 |
| Scale | $100 | 60,000 | 100 |
Webスクレイプは1ページあたり1 credit（$0.001）。HyperSkillで1回のSingle生成は3ページスクレイプ = 3 credits。つまりFreeプランの3,000クレジットで約1,000回のSKILL.md生成が可能。かなり太っ腹。
ただしSerper（月2,500クエリ無料）とOpenAI GPT-4o（従量課金）の費用は別途かかる。
入社試験の結果：良いところ
Claude Codeスキル形式への深い理解
description フィールドがトリガーメカニズムであることを正確に理解し、プロンプトに組み込んでいる。これは表面的な理解ではなく、Claude Codeの実装を知っている人の設計。
スキルツリーが面白い
単発のSKILL.md生成ならプロンプトコピペでも作れる。でもスキルツリーモードは違う。8-12個のファイルが [[wikilink]] で相互リンクされたナレッジグラフを自動構築する。これは手作業だとかなり面倒な作業。
料金設計が実用的
Hyperbrowserの無料枠3,000クレジットで1,000回生成できるのは十分。試すハードルが低い。
入社試験の結果：気になるところ
検索結果が3件固定
serper.ts で num: 3 がハードコードされている。3ページの情報だけで専門スキルを生成するのは、トピックによっては薄くなりそう。公式ドキュメントが1つだけど超長い、みたいなケースには向いてるが、情報が分散してるトピックには弱い。
Singleモードの出力制限
max_tokens: 3500 はSKILL.mdとしては短め。複雑な技術トピック（例：Kubernetes全体）をカバーするには足りない。スキルツリーモード（16384トークン）を使った方がいい。
GPT-4o固定
Claude Code用のスキルを生成するのにGPT-4oを使っている皮肉はさておき、モデル選択のオプションがない。Claude APIに差し替えたい場合は自分で lib/openai.ts を書き換える必要がある。OSSだからできるけど。
リトライ機構なし
スクレイプ失敗時のリトライがない。バッチモードでは成功分だけ返す設計だが、重要なページのスクレイプが失敗すると品質に直結する。
何が新しいのか
正直に言うと、技術的には「Serper + スクレイパー + LLM」の組み合わせ自体は珍しくない。Firecrawl + Claude APIでも同等のパイプラインは組める。
HyperSkillの価値は：
- Claude Codeスキルファイルに特化したプロンプト設計が練られていること
- スキルツリーモードで相互リンクされたナレッジグラフを自動構築できること
- すぐに動くUIがあること（Next.jsアプリとして完成している）
「自分でパイプライン組むのが面倒」「とりあえずスキルファイルの雛形がほしい」という人には有用。逆に、自分でプロンプト設計ができる人は lib/openai.ts のプロンプト部分だけ参考にして、あとは自前で組んだ方が柔軟性が高い。
セットアップ手順
試してみたい人向けに手順を残しておく。
必要なAPIキー：
- Hyperbrowser — https://app.hyperbrowser.ai（無料プランあり）
- Serper — https://serper.dev（月2,500クエリ無料）
- OpenAI — https://platform.openai.com（GPT-4o従量課金）
git clone https://github.com/hyperbrowserai/hyperbrowser-app-examples.git
cd hyperbrowser-app-examples/hyperskills
cp .env.example .env
# .envに3つのAPIキーを設定
npm install
npm run dev
# http://localhost:3000 でアクセス生成されたSKILL.mdは .claude/skills/ に配置すればClaude Codeが自動認識する。
まとめ：採用？不採用？
条件付き採用。
「Claude Codeに専門知識を教え込みたいけど、スキルファイルを手書きするのが面倒」という具体的な課題に対して、実用的な解を提供している。特にスキルツリーモードは手作業では面倒なナレッジグラフ構築を自動化してくれる。
ただし、生成されたSKILL.mdをそのまま使うのはお勧めしない。3ページの検索結果から生成されたスキルファイルが、公式ドキュメントを読み込んだ人間の知識に勝てるわけがない。「雛形生成ツール」として使い、自分で加筆・修正する前提で導入するのが正解。
これはAIツール全般に言えることだけど、**「自動生成 = 完成品」ではなく「自動生成 = 初稿」**という認識が大事。HyperSkillはその初稿の質がそこそこ高い、というところに価値がある。
