Add: スキルを使わせるコツを追加

docs-tech/dgx-spark-claude-code-playwright/index.md

@@ -73,6 +73,58 @@ claude-local  # ローカルモデルで起動
 
 Claude Codeで：
 
+
+## スキルを使わせるコツ
+
+:::warning Claude Codeがplaywright-cliを使ってくれない？
+デフォルトではClaude Codeは`playwright-cli`の存在を知りません。以下の方法で認識させましょう。
+:::
+
+### 方法1: 明示的に指示する
+
+プロンプトで**明示的に**`playwright-cli`を指定します：
+
+```text
+playwright-cli を使って https://example.com のスクリーンショットを撮って
+```
+
+最初に「`playwright-cli --help` を確認して」と言うのも効果的：
+
+```text
+playwright-cli --help を確認して、そのコマンドを使ってブラウザ操作をして
+```
+
+### 方法2: CLAUDE.mdにスキルを記述
+
+プロジェクトのルートに `CLAUDE.md` を作成し、スキルを記述します：
+
+```markdown title="CLAUDE.md"
+# プロジェクト設定
+
+## ブラウザ操作
+
+このプロジェクトではブラウザ操作に **playwright-cli** を使用してください。
+Web検索やFetchではなく、必ず playwright-cli コマンドを使ってください。
+
+利用可能なコマンド:
+- playwright-cli open <url> - ブラウザを開く
+- playwright-cli snapshot - ページ構造を取得
+- playwright-cli click <ref> - 要素をクリック
+- playwright-cli type <text> - テキスト入力
+- playwright-cli screenshot - スクリーンショット
+```
+
+### 方法3: セッション開始時に宣言
+
+Claude Codeを起動したら、最初にこう言います：
+
+```text
+このセッションではブラウザ操作に playwright-cli を使います。
+playwright-cli --help で使い方を確認してください。
+```
+
+これでClaude Codeが`playwright-cli`の存在を認識し、以降のブラウザ操作で使ってくれます。
+
 ```text
 > playwright-cli --help を確認して、https://example.com のスクリーンショットを撮って
 ```