【Claude Skills x Notion MCP】一元管理したルールとナレッジで、かゆい所も届くブラウザテストを作成してみた

Last updated at 2025-12-01Posted at 2025-12-01

はじめに

私:「作業的なゆらぎを減らしたい...」
私:「でも似たような作業に、毎回丁寧にガチガチなプロンプトを書きたくない！」

Claude Skills:「👼」

こんにちは！株式会社C&Pの武智でございます。

今回はClaude Code上でClaude Skillsを活用して「指示」を行い、
ルール・注意点・コード規約・エッジケース等の「ナレッジ」が記載されているNotion記事をMCPで読み込ませ、
「ブラウザテストを書く」ことに特化した情報をAIに渡した状態で、Laravel DuskのE2Eテストを作成してもらえるようにしてみました！

なぜこの構成にしたか

以下の様なメリットがあります：

Vue/Reactなどのフロントエンドフレームワークを使用した、複雑なコンポーネント構造による過去の注意点やエッジケースを記載しておけば、一発で通るテストが生成される可能性はぐんと上がる
Notionで更新された、最新のプロジェクト仕様・ルール・ナレッジを考慮した上で、ブラウザテストを作成してもらえる
Skillの種類と内容が充実していれば、安心して雑に丸投げできる
Claude Skillを使用する際のルールやエッジケースなどの詳細をすべて、Git管理しなくても良い。また、ブランチ間でバージョンの違うブラウザテストのルールが読み込まれる恐れもないので、常に最新の基準とナレッジを元にテストが作成される
実際のテストケースをスプレッドシート等からコピペするだけで使用できる
- （※ご自身のテストケースを管理する環境によっては、MCPサーバーでテストケースIDを呼び出すことも可能だと思う）

これらにより最新のプロジェクト仕様・ルール・ナレッジを考慮した上で、ブラウザテストを作成してもらえることを期待します！

Claude Skillsとは

エージェントの専門機能を拡張する知識パッケージ
指示、ベストプラクティス、サンプルコード、関連するファイルを記載しておける
プログレッシブディスクロージャー(必要な情報のみ段階的にロードするため、コンテキストウィンドウを効率的に使える)
再利用可能で、複数のプロジェクト・エージェント間で共有可能

Claude Skillsの3ヶ月ぐらい前にリリースされたSubagentsって何？

メインエージェントが指示する、独立したコンテキストをもつエージェント
必要な結果だけがメインエージェントに渡されるので、コンテキスト汚染を防げる
SubagentsはClaude Skillsが使用可能！

独立した実行環境(Subagent)と専門知識(Skills)の両方を活用した例：

「〇〇サイトを作って」と指示するだけで、Subagentが並列で動き、それぞれが複数の専門Skillsを同時に使用して最適な実装を提案してくれる（下記）

メインエージェント: プロダクトマネージャー
↓
├─ backend-architect (Subagent)
│  └─ Skills: API設計, DB最適化, セキュリティプラクティス, ユニット/統合テスト, 弊社コード規約
├─ frontend-engineer (Subagent)
│  └─ Skills: reactベストプラクティス, 弊社コード規約, アクセシビリティ性, パフォーマンス
└─ devops-engineer (Subagent)
   └─ Skills: インフラ構築, CI/CDパイプライン構築, モニタリング

Notion MCPで出来ること

主なツール:

notion-search: notionのワークスペース全体からコンテンツを検索
notion-fetch: 特定のページやデータベースの内容を取得
notion-create-page: 新しいページを作成
notion-append-blocks: ページにコンテンツブロックを追加
notion-update-page: ページのプロパティやコンテンツを更新
notion-move-page: ページを別の場所に移動
notion-fetch-comments: コメントを取得

🚀実装開始！

Notionの記事

注意点・プロジェクトの使用・コード規約・生成されたテストが失敗する前例などを記述した記事をNotionに作成し、タイトルもしくはURLをメモしておく
今回使用した例：MCPで読み込むNotion記事

Notion MCPサーバーの設定

Notionも同様に「一つのプロジェクトに限定してスキルを使用したい場合」と、「すべてのプロジェクトで使えるようにしたい場合」に分けて、下記のコマンドを実行してNotion MCPをClaudeに追加します。

【A】プロジェクト内のみNotion MCPを使用したい：

  cd hoge_project
  claude mcp add --transport http -s local notion https://mcp.notion.com/mcp

【B】全てのプロジェクトでNotion MCPを使用したい：

  claude mcp add --transport http -s user notion https://mcp.notion.com/mcp

⬇️⬇️⬇️

# Claudeターミナルで
/mcp
↓
Notionを選択し、Enter
↓
Authenticate（認証）を選択し、Enter
↓
下記のターミナル状態になるので、ブラウザでページが開くのを待つ、もしくは出力されたリンクをクリックする

⬇️⬇️⬇️ 内容を確認し、問題なければチェックを入れて「Continue」

⬇️⬇️⬇️ 成功したら下記の「認証成功」テキストが表示されるので、ターミナルに戻り/mcpで認証を確認

Notion MCPの権限設定

今回は「検索」と「特定の記事の取得」の権限だけ有効にします。

【A】を選択した場合、hoge_project/.claude/settings.jsonに
【B】を選択した場合、~/.claude/settings.jsonに

下記を追記します：

{
  "permissionMode": "ask",
  "mcpServers": {
    "qiita-notion": {
      "allowedTools": [
        "mcp__qiita-notion__notion-search",
        "mcp__qiita-notion__notion-fetch"
      ]
    }
  }
}

Claude Skillの作成

ルールや注意点などのナレッジが記載されたnotion記事を作成する
「一つのプロジェクトに限定してスキルを使用したい場合」と、「すべてのプロジェクトで使えるようにしたい場合」に分けて、下記のマークダウンファイル(.md)を作成する

  # このプロジェクト内のみスキルを使用したい：
  {プロジェクトのパス}/.claude/skills/{スキルの名前}/SKILL.md

  # 例：
  hoge_project/.claude/skills/qiita-dusk-create-skill/SKILL.md

  # 全てのプロジェクトでSkillsを使用したい：
  ~/.claude/skills/{スキルの名前}/SKILL.md

  # 例：
  ~/.claude/skills/qiita-dusk-create-skill/SKILL.md

使用するSKILL.mdの例

※今回は「記事のタイトル」を検索させる形にしましたが、記事が一つなら固定の記事URLを参照先として記載した方が確実だと思います！

▶️スキルを実行してみよう！

プロンプト例

スキルを使って下記のDuskテストを作成して：

※ Claude Skillsは「スキルを使用して」と明記しなくても良い仕様とのことですが、過去のAIとプロンプトで戦ってきた戦士は、安心するために入れたくなってしまうと思います！
...その直感は合っています！実はSkillが使用されずにブラウザテストが作成されるケースがあったので、明記しておきましょう。

テストケースのスプレッドシート例

上記を範囲選択＋Claude Codeのチャットにコピペしたら、下記のプロンプトになります。
（※スプレッドシートのMCPサーバーを使用すれば、コピペする必要もないです！）

スキルを使って下記のDuskテストを作成して：

画面	準備・前提条件	操作手順	期待結果
/register		ページにアクセスする	"以下の入力項目が表示されている：
- 名前（テキスト）
- メールアドレス（テキスト）
- パスワード（テキスト）
- パスワード確認（テキスト）
- 利用規約（チェックボックス）"
/register		"①以下の入力欄に下記のように入力する：
- 名前：{任意の2~255文字数}
- メールアドレス：{255文字数以内、未登録、rfc形式}
- パスワード：{8文字以上の任意の文字列}
- パスワード確認：{上記と一緒}
- 利用規約：チェックする
②フォームの送信ボタンを押下する。"	usersに会員データが作成され、ログインした状態で/dashboardに遷移している