Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
実践!カスタムインストラクション&スラッシュコマンド
Search
puku0x
September 08, 2025
Technology
0
1.1k
実践!カスタムインストラクション&スラッシュコマンド
Findy AI Meetup in Fukuoka #2
https://findy-inc.connpass.com/event/365777/
puku0x
September 08, 2025
Tweet
Share
More Decks by puku0x
See All by puku0x
Nx × AI によるモノレポ活用 〜コードジェネレーター編〜
puku0x
0
1.3k
ファインディにおけるフロントエンド技術選定の歴史
puku0x
2
230
ファインディでのGitHub Actions活用事例
puku0x
9
3.5k
Findyの開発生産性向上への取り組み ~Findyフロントエンドの場合~
puku0x
0
440
Findyの開発生産性を上げるためにやったこと
puku0x
1
610
Angularコーディングスタイルガイドはいいぞ
puku0x
1
360
Nx CloudでCIを爆速にした話
puku0x
0
890
Findyのフロントエンド設計刷新を通して得られた技術的負債との向き合い方
puku0x
1
1.8k
最高の開発体験を目指して 〜Findyのフロントエンド設計刷新〜
puku0x
0
880
Other Decks in Technology
See All in Technology
組織観点からIAM Identity CenterとIAMの設計を考える
nrinetcom
PRO
1
150
Windows で省エネ
murachiakira
0
150
「AI駆動PO」を考えてみる - 作る速さから価値のスループットへ:検査・適応で未来を開発 / AI-driven product owner. scrummat2025
yosuke_nagai
0
410
Why React!?? Next.jsそしてReactを改めてイチから選ぶ
ypresto
10
4.1k
全てGoで作るP2P対戦ゲーム入門
ponyo877
3
1.3k
生成AIを活用したZennの取り組み事例
ryosukeigarashi
0
180
KMP の Swift export
kokihirokawa
0
300
データエンジニアがこの先生きのこるには...?
10xinc
0
430
ZOZOのAI活用実践〜社内基盤からサービス応用まで〜
zozotech
PRO
0
130
Go Conference 2025: GoのinterfaceとGenericsの内部構造と進化 / Go type system internals
ryokotmng
3
580
C# 14 / .NET 10 の新機能 (RC 1 時点)
nenonaninu
1
1.4k
業務自動化プラットフォーム Google Agentspace に入門してみる #devio2025
maroon1st
0
180
Featured
See All Featured
Being A Developer After 40
akosma
91
590k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
Raft: Consensus for Rubyists
vanstee
139
7.1k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
610
GitHub's CSS Performance
jonrohan
1032
460k
The Pragmatic Product Professional
lauravandoore
36
6.9k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
Documentation Writing (for coders)
carmenintech
75
5k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Transcript
実践!カスタムインストラクション & スラッシュコマンド 1 2025/09/08 Findy AI Meetup #2 ファインディ株式会社
フロントエンド テックリード 新福 宜侑 @puku0x
None
3 ⽣成AI 活⽤していますか?
4 約9割のエンジニアがAIツールを業務で利⽤ https://findy-code.io/job-market-trends/20250630
5 ファインディで導⼊されている⽣成AI系ツール • GitHub Copilot • Claude Code • ChatGPT
• Gemini • Devin • Kiro • Cursor • Junie : GitHub Copilot と Claude Code の利⽤者が⽐較的多い
6 ファインディでの⽣成AIツール活⽤事例 GitHub Copilot と Claude Code についての記事を公開中 https://tech.findy.co.jp/entry/2025/07/23/070000 https://tech.findy.co.jp/entry/2024/12/25/070000
7 GitHub Copilot や Claude Code で使える機能を紹介
8 カスタムインストラクション
• ⽣成AIのコンテキストとして渡す⽂章 ◦ ライブラリや、アーキテクチャ、コーディングスタイル など ◦ 設定ファイルはツールよって様々 ▪ copilot-instructions.md、CLAUDE.md、AGENTS.md 9
カスタムインストラクション
10 カスタムインストラクションの導⼊ • 既存のコーディングスタイル⽤ドキュメントの流⽤でも⼤丈夫 ◦ ファインディでも最初はコーディングスタイルガイド全⽂を コピペで運⽤していた • コミュニティの知⾒を活⽤ https://github.com/github/awesome-copilot/
各種プログラミング⾔語、セキュリティ、アクセシビリティなど網羅
11 カスタムインストラクションのコツ • 簡潔に書く ◦ ⻑い⽂章よりも箇条書き • 複雑な条件よりも⼤量のサンプル ◦ お⼿本となるコードを丸ごとコピペするだけでも効果あり
◦ ⽣成AIは確率論的な動きをすると捉えればOK ▪ 「必ず〜」「〜のみ」「**重要**」などのキーワードで制御可 • 英語的な表現を意識する(英語で書く必要はない) ◦ 曖昧な表現を避ける、主語や⽬的語を省略しない ◦ 「〜してください」より「〜する」「〜しない」
12 GitHub Copilot⽤カスタムインストラクションの特徴 • applyTo による適⽤範囲の絞り込みが可能 ◦ 管理しやすい単位で分割、ファイル毎にコンテキスト切り替え ◦ GitHub
Copilot Review でも対応済み👍 ◦ 現在は Ask モードでのみ 動作を確認(VS Code 1.103.2) --- applyTo: '**/*.jsx,**/*.tsx' description: Reactコンポーネントのグッドプラクティス ---
13 VS Codeの設定で更に便利に "github.copilot.chat.codeGeneration.useInstructionFiles": true, "github.copilot.chat.commitMessageGeneration.instructions": [ { "file": ".github/instructions/commit-message.instructions.md"
} ], "github.copilot.chat.pullRequestDescriptionGeneration.instructions": [], /* pullRequestDescriptionGenerationはまだ実用レベルでない */ コミットメッセージの⽣成
14 カスタムインストラクションの例(1/5) --- applyTo: '**' description: 'コミットメッセージの生成 ' --- コミットメッセージは
[Conventional Commits](https://www.conventionalcommits.org/ja/v1.0.0/) に従って記述する。 ## フォーマット :
15 カスタムインストラクションの例(2/5) ## フォーマット ``` <type>[optional scope]: <description> [optional body]
[optional footer(s)] ``` ### type(必須) :
16 カスタムインストラクションの例(3/5) ### type(必須) - `feat`: 新機能や既存機能の変更 - `fix`: バグ修正
- `docs`: ドキュメントのみの変更 - `*.md` を追加、変更した場合 - `test`: テスト追加・修正 - `*.spec.*` `*.spec.*.snap` を追加、変更した場合 : ### scope(任意) :
17 カスタムインストラクションの例(4/5) ### scope(任意) - ディレクトリ名が `package.json` または `package-lock.json` の時
`deps` - ディレクトリ名が `.github/**` の時 `github` - ディレクトリ名が `apps/frontend/**` の時 `frontend-app` - ディレクトリ名が `libs/frontend/feature-xxx/**` の時 `frontend-feature-xxx` - ディレクトリ名が `libs/ui/**` の時 `ui` : ### description(必須) ### body(任意) ### footer(任意)
18 カスタムインストラクションの例(5/5) ## コミットメッセージの例 ``` feat(frontend-feature-xxx): add social login feat(ui):
add button component fix(frontend-feature-xxx): fix validation docs(*): update README.md refactor(frontend-feature-xxx): refactor form logic test(frontend-feature-xxx): add tests for useXxx ci(github): update ci.yml chore(deps): update dependencies ```
19 カスタムインストラクションの実⾏結果 コミット メッセージ⽣成
20 カスタムインストラクションの運⽤ • 有⽤だが、コンテキストの絞り込みを綺麗に動かす⽅法が課題 ◦ 現状は applyTo: '**' で運⽤ がいちばん楽かも
• applyToを使いこなそう ◦ ファインディでは慣習的に拡張⼦を分けていたため相性が良かった https://speakerdeck.com/puku0x/angularkodeingusutairugaidohaiizo?slide=16 ◦ 今後は applyTo の Agent モード対応に期待 🙏 ▪ VS Code 1.104.0-insider では Ask と Edit モードで動作を確認
21 カスタムスラッシュコマンド
22 カスタムスラッシュコマンド • 再利⽤可能なプロンプトを /<コマンド名> で呼び出す ◦ 定型作業(スキャフォールディング、PRの作成など) ◦ ⾃然⾔語で書ける
→ スクリプトとドキュメント両⽅の側⾯ • GitHub Copilotでは「プロンプトファイル( *.prompt.md )」 と呼ばれる
23 カスタムスラッシュコマンドの導⼊ • 所定のディレクトリ‧ファイル名に配置すれば動く ◦ 最初は既存のドキュメント内の⼿順をそのままコピーでも⼤丈夫
24 カスタムスラッシュコマンドの例①(1/2) --- mode: 'agent' model: GPT-4.1 tools: ['runCommands'] description:
'Remove merged branches' --- ローカルの作業ブランチのうち、マージ済みのものを削除します。 ## 手順 :
25 カスタムスラッシュコマンドの例①(2/2) ## 手順 ### 1. マージ済みブランチの確認 ```bash git branch
--merged|egrep -v '\*|develop|master|main' ``` ### 2. マージ済みブランチの削除 ```bash git branch --merged|egrep -v '\*|develop|master|main'|xargs git branch -D ```
26 カスタムスラッシュコマンドのコツ • 状態の確認や計画のフェーズを挟む • ⽭盾する内容を書かない 現在の変更 の内容からプルリクエストを自動的に作成する。 ## 手順
ステージされた変更 を確認する。 ```bash git diff --staged ``` **注意**: ステージされた変更がある場合は〜、ない場合は〜 最初に書かれた⽂章に 引きずられる傾向がある ⚠ 内容に⽭盾 git diff --stat が最初に 実⾏される場合がある
27 カスタムスラッシュコマンドの運⽤(1) • Claude Code & GitHub Copilot 両対応で提供する ◦
GitHub Copilot側をマスタ扱いにする ▪ Claude Codeから @path/to/file でプロンプトファイル参照 ▪ 必要に応じてカスタムインストラクション参照 本体 追加のコンテキスト
28 カスタムスラッシュコマンドの例②(1/7) --- description: Nx のマイグレーション --- # Nx のマイグレーション
Nx ワークスペースを最新バージョンにマイグレーションするための手順を以下に示しま す。 Read @.github/copilot-instructions.md Read @.github/prompts/nx-migrate.prompt.md
29 カスタムスラッシュコマンドの例②(2/7) --- mode: 'agent' model: GPT-4.1 tools: ['codebase', 'changes',
'editFiles', ''runCommands', 'Nx Mcp Server'] description: 'Migrate your Nx workspace to the latest version.' --- # Nx のマイグレーション Nx ワークスペースを最新バージョンにマイグレーションするための手順を以下に示しま す。 :
30 カスタムスラッシュコマンドの例②(3/7) ## 手順 下記の手順を一つずつ実行する。 ユーザーには、毎回どの手順を実行しているかを示す。 ### 1. 最新の `develop`
ブランチに切り替え 現在 `develop` ブランチにいることを確認する。 ```bash git status ```
31 カスタムスラッシュコマンドの例②(4/7) `develop` ブランチでない場合は、以下を実行する。 ```bash git switch develop ``` `develop`
ブランチの最新の状態を取得する。 ```bash git pull origin develop ```
32 カスタムスラッシュコマンドの例②(5/7) ### 2. 既存のマイグレーションファイルの削除 ```bash npx rimraf -g migrations.json
``` ### 3. 最新バージョンの確認 ```bash npx nx migrate latest ```
33 カスタムスラッシュコマンドの例②(6/7) ### 4. 依存関係のインストール ユーザーにこのステップが必要であることを説明する。 - `nx migrate --run-migrations`
内で `npm install` が実行されますが、この手順は Nx 関連パッケージのマイグレーションスクリプトを正常に動作させるために必要です。 ```bash npm install ```
34 カスタムスラッシュコマンドの例②(7/7) ### 5. マイグレーションの実行 ```bash npx nx migrate --run-migrations
--if-exists ```
35 カスタムスラッシュコマンドの例③(1/13) --- description: プルリクエストの作成 --- Read @.github/copilot-instructions.md Read @.github/prompts/create-pull.prompt.md
IF THERE ARE ANY STAGED CHANGES, DETERMINE THE BRANCH NAME BASED ONLY ON THE STAGED CHANGES. YOU MUST ADD THE PULL REQUEST IS CREATED BY CLAUDE IN THE COMMIT MESSAGE
36 カスタムスラッシュコマンドの例③(2/13) --- description: 'Create a pull request.' mode: 'agent'
model: GPT-4.1 tools: ['codebase', 'runCommands',...] --- # プルリクエストの作成 変更の内容からプルリクエストを自動的に作成します。 :
37 カスタムスラッシュコマンドの例③(3/13) ## 手順 下記の手順を一つずつ実行する。 ### 1. 現在の状態確認 ```bash git
status ``` **注意**: 現在 `develop` ブランチにいる場合、新しいブランチを作成する。そうでない 場合、ブランチの作成のステップはスキップする。
38 カスタムスラッシュコマンドの例③(4/13) ### 2. ブランチの作成 ステージされた変更を確認する。 ```bash git diff --staged
``` **注意**: ステージされた変更が存在する場合、ステージされた変更の内容のみを考慮 し、新しいブランチ名を決定する。ステージされた変更が存在しない場合、 `git diff --stat` で確認し、新しいブランチ名を決定する。 :
39 カスタムスラッシュコマンドの例③(5/13) ブランチ命名規則は以下に従う - `feat/`: 新機能や既存機能の変更 - `fix/`: バグ修正 -
: 例: ```bash git switch -c feat/user-authentication ``` :
40 カスタムスラッシュコマンドの例③(6/13) ### 3. リント・型チェック・テストの実行 ```bash npm run lint npm
run stylelint npm run typecheck ``` ```bash npm test ``` **注意**: ドキュメントのみの変更( `docs/*` ディレクトリ、 `*.md` ファイル、 README 等) の場合は、このステップをスキップできます。
41 カスタムスラッシュコマンドの例③(7/13) ### 4. 変更のステージ ステージされた内容を確認する。 ```bash git diff --staged
``` **注意**: ステージされたファイルが既にある場合は、未ステージのファイルを無視し、こ のステップをスキップします。ステージされたファイルが 0 件の場合にのみ、 `git add -A` を実行します。
42 カスタムスラッシュコマンドの例③(8/13) ### 5. コミットの作成 `git commit` を実行しコミットを作成する。 書式は [コミットメッセージのフォーマッ
ト](../instructions/commit-message.instructions.md) に従う。 **重要** コミットメッセージは必ず英語で記載する。 例:
43 カスタムスラッシュコマンドの例③(9/13) 例: ```bash git commit -m "feat(backend): add user
authentication feature - Added JWT-based authentication - Added authentication middleware Co-Authored-By: Copilot <
[email protected]
>" ``` ### 6. プルリクエストの作成
44 カスタムスラッシュコマンドの例③(10/13) ### 6. プルリクエストの作成 プルリクエストのタイトル( `<PR title>` ) のフォーマットは以下の通りです。
``` <type>[optional scope]: <description> ``` - `<type>` 及び `[optional scope]` は [コミットメッセージのフォーマッ ト](../instructions/commit-message.instructions.md) に従う。 - `<description>` は必ず日本語で記載する
45 カスタムスラッシュコマンドの例③(11/13) プルリクエストの概要( `<PR description>` ) は日本語で記載します。 ```bash # リモートにプッシュ
git push -u origin <branch-name> # ghコマンドでプルリクエストを作成 gh pr create --title "<PR title>" --body "<PR description>" ```
46 カスタムスラッシュコマンドの例③(12/13) ## プルリクエストのテンプレート [プルリクエストのテンプレート ] (../PULL_REQUEST_TEMPLATE.md) を参考に、プルリクエストの内容を記載する。 ### タイトル例
- `feat(frontend): ユーザー認証機能の実装 ` - `fix(frontend-feature-sign-in): ログインバリデーションエラーの修正 ` - `docs: API仕様書の更新 `
47 カスタムスラッシュコマンドの例③(13/13) ## 実行例 ```bash git push -u origin feat/user-profile-api
gh pr create --title "feat: ユーザープロフィール APIの実装" --body "## 概要 ユーザープロフィールの取得・更新機能を実装しました。 ### 変更内容 - [x] 入力値バリデーション ## 備考 - #123" ```
48 おまけ: Claude CodeにClaude Codeの設定をさせる(1/5) --- description: デスクトップ通知の有効化 --- #
デスクトップ通知の有効化 Claude Code の通知を設定します。 macOS のみ対応しています。 ## スクリプトエディタの通知設定を開く :
49 おまけ: Claude CodeにClaude Codeの設定をさせる(2/5) ## スクリプトエディタの通知設定を開く ユーザーにスクリプトエディタの通知を許可するよう促す。 ```bash open
"x-apple.systempreferences:com.apple.Notifications-Settings? id=com.apple.ScriptEditor2" ```
50 おまけ: Claude CodeにClaude Codeの設定をさせる(3/5) ## ローカル設定ファイルを作成する **重要** `.claude/settings.local.json` が既に
存在する場合はこのステップをスキップする。 `.claude/settings.local.json` が存在しない場合は `.claude/settings.local.json` を作成 する。 ## ローカル設定を更新する **重要** `.claude/settings.local.json` の `hooks` に `Notification` 設定及び `Stop` 設 定が既に存在する場合はこのステップをスキップする。
51 おまけ: Claude CodeにClaude Codeの設定をさせる(4/5) ```json "hooks": { "Notification": [
{ "matcher": "", "hooks": [ { "type": "command", "command": "osascript -e 'display notification \"Claude Codeが許可を求めています 💬\" with title \"Claude Code\" subtitle \"確認待ち\" sound name \"Glass\"'" } ] } ],
52 おまけ: Claude CodeにClaude Codeの設定をさせる(5/5) ```json "Stop": [ { "matcher":
"", "hooks": [ { "type": "command", "command": "osascript -e 'display notification \"タスクが完了しました ✅\" with title \"Claude Code\" subtitle \"処理終了\" sound name \"Hero\"'" } ] } ] }
53 カスタムスラッシュコマンドの運⽤(2) • ⾮常に便利、チームメンバーへの周知が課題 ◦ ⽣成AIの利⽤を前提としてREADME⾒直し中
54 まとめ • AIツールの利⽤は当たり前となった • カスタムインストラクションやスラッシュコマンドは有⽤ ◦ ⾃然⾔語で書けるのでエンジニア以外でもメンテ可能 ◦ コツを押さえて再現性を⾼める
• ツール乱⽴で疲れないために ◦ プロンプトの⼆重管理を避ける⼯夫 ◦ AGENTS.md など、標準化に期待
55 ⽣成AI時代の新サービスも開発中! https://findy.co.jp/3146/
We’re hiring! https://careers.findy.co.jp/ 56