はじめに

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

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に遷移している

実行結果

Claude Code(※VS Code/CursorIDEのプラグイン)

プロンプトを入力したら、即座にスキルが実行されました！

続いて、NotionMCPで許可した二つのツールが使用されていることも確認できます。

Claude Skill内で記述した「プロジェクトのcomposerファイルを読み込んでブラウザテストのバージョンとVueのバージョンの確認」もできたようです！

Notion記事で記載した、「dusk属性で要素を特定」したテスト形式にしてくれています。

Notion記事で記載した「Vueでdusk属性が付与されないケース」も考慮して、コンポーネント間でdusk属性がちゃんと付与される様にしてくれました！

こちらはSKILL.mdの内容で、テスト実行前にビルドして欲しいとちゃんと忠告もしてくれました。

他も諸々記載通りに行ってくれてえらい！

簡単な内容でしたが、まさかの一発成功！
ワンショットはいつもみても気持ちいいですね...

🏁これにて実行完了！🏁

更なる高みへ...

今回は一つのNotion記事を読み込んでいただきましたが、

過去のインシデントを検索してもらったり、
複数のClaude Skillsを使用してより良い成果物にしたり、
notion-create-pageで、テスト結果をID付きで記録すること

も可能だと思うので、発想次第で色々できそうですね！

ブラウザテストに限らず、これを機にぜひご自身の環境・issue管理ツール・プロジェクト構成に合わせて色々試してみてください！

今後も様々なAIツールの複合技に期待感が高まりますね...

それではまた次回にお会いしましょう！✨

Notionの記事例

Laravel+Vue+Duskの注意点・コード規約

⬆️記事に戻る⬆️

今回使用したSKILL.mdの例

⬆️記事に戻る⬆️