技術ブログ

Agent Skillsとは?Claude CodeのSkills始めました

ネクストでもClaude Codeをメインで使う方が増えてきました。

同じ月で6本の記事が執筆されています。

社内でも関心の高さが窺えます。

が、Claude Code使っているうちにもっと社内ルールや文脈を考慮してほしいと思うタイミングが増えました。

  • うちのAPI設計ルールに沿って書いてほしい
  • レビュー観点を毎回同じにしたい
  • デプロイ手順をAIにも理解させたい

すでに今のままでも君はすばらしいんですが、できたらもっといいなと思います。

毎回プロンプトで前提条件を説明するのは面倒です。

これを解決するのが今日ご紹介するSkillsです。

Skillsとは

Skillsはざっくり言うと、Claudeに追加できる業務用の拡張コマンドです。社内ルールや定型作業、開発フローをスキルとして登録し、いつでも呼び出せるようにする仕組みのことです。

例えば、以下のように呼び出せます。

/review-pr

あるいは

/next-api-guideline

Skillsを登録しておくと、Claudeが必要に応じて自動で使ったり、手動で呼び出したりできます。

ざっくりとした図解です。

はじめてのSkillsを作ってみる

ここでは例として、ネクスト社内でも役立ちそうなコードレビュー観点を統一するSkillを作ってみます。

大きな流れとしてはmdファイルを作成してしかるべき場所に置くだけです。

1. Skills用ディレクトリを作る

まずはローカルにSkillを置くフォルダを作ります。

mkdir -p ~/.claude/skills/review-helper

2. SKILL.mdを書く

Skillsの本体は SKILL.md というファイルです。

---
name: review-helper
description: Pull Requestをレビューするときの観点チェックを行う
disable-model-invocation: true
---

# Review Helper

PRをレビューするときは以下を必ず確認してください。

1. 責務が分離されているか
2. 命名が明確か
3. エッジケースが考慮されているか
4. Next.js + MySQL構成に適しているか
5. パフォーマンス懸念がないか

最後に改善案を箇条書きで提示してください。

ルールは自然言語で書かれていますが、冒頭にポイントがあります。

  • name/review-helper というコマンド名になる
  • disable-model-invocation: true を付けると手動専用になる

3. 呼び出して使ってみる

Skillsはこう呼び出せます。

/review-helper src/app/api/user/route.ts

するとClaudeがレビュー観点に沿って回答してくれます。

Review Helper(PRレビュー): src/app/api/user/route.ts

1) 責務が分離されているか
	•	GET と POST の中で DB接続・SQL・レスポンス整形まで全部やっていて、Route Handlerが少し太り気味に見えます。
lib/db.ts(接続)と services/user.ts(取得/作成)に切り出すと、読みやすさとテスト容易性が上がります。
	•	POST のバリデーションとエラー整形も同じ関数内に混ざっているので、validateCreateUserInput() と toErrorResponse() のように小さく分けると保守しやすいです。

...中略...

改善案(箇条書き)
	•	Route Handlerから DBアクセスとドメイン処理を分離し、services/user.ts に寄せる
	•	入力バリデーション強化(trim、長さ、email形式、idの型チェック)+ 想定エラーは 400/404/409 を明示
	•	SQLを 必ずプレースホルダ化してインジェクション対策
	•	SELECT * をやめて 返却カラムをホワイトリストに(秘匿情報混入防止)
	•	MySQL接続は プール化して使い回し(lib/db.ts に集約)
	•	エラーレスポンス形式を統一し、ログとユーザー向けメッセージを分離

Skillsは置き場所で変わります

Skillsは配置場所でスコープが変わります。

種類パス使える範囲
Personal~/.claude/skills/…自分の全プロジェクト
Project.claude/skills/…そのリポジトリだけ
Enterprise管理者設定全社員で共有可能

チームで共有したい場合は .claude/skills/ をGit管理するのが現実的です。

Skillsを社内ナレッジとして使う

Skillsの強い使い方は、単なるコマンドではなくAIに社内標準を覚えさせることです。

例えばAPI設計ルールのSkillsを作ってみます。

---
name: next-api-style
description: ネクスト社内のAPI設計ルール
user-invocable: false
---

- RESTfulに命名する
- エラー形式は統一する
- バリデーションを必ず入れる

これは背景知識としてClaudeに自動で効かせる用途です。

引数も渡せるテンプレSkills

Skillsは引数を受け取れます。

---
name: migrate-page
description: Next.jsページを新しい構成へ移行する
disable-model-invocation: true
argument-hint: "[ページ名] [移行先構成]"
---

次のページを移行してください:

- 対象ページ: `$0`
- 移行先構成: `$1`

作業内容:

1. ルーティングの挙動を壊さないこと
2. 必要ならテストも更新すること
3. 既存のUIを維持すること

$0$1には引数が入ります。

呼び出す際に引数を渡しましょう。

/migrate-page settings app-router

するとClaudeが受け取る指示は以下のようになります。

次のページを移行してください:

- 対象ページ: settings(第一引数)
- 移行先構成: app-router(第二引数)

スクリプト付きSkillsで可視化もできる

Skillsはファイルを同梱できます。

codebase-visualizer/
├── SKILL.md
└── scripts/
    └── foobar.py

Claudeにfoobar.pyの実行指示を出すことができます。

自然言語でプログラムを実行できるイメージです。

Skills導入のコツ

Skillsが発動しないとき

  • descriptionが曖昧すぎると発動しない
  • /skill-nameで手動実行してみる
  • What skills are available?で認識されているか確認できる

Skillsが発動しすぎるとき

  • descriptionを具体的にする
  • disable-model-invocation: trueで手動専用にする

Skillsを探そう

公式には以下のようなSkillがあります。

Skill名概要
algorithmic-artp5.jsを用いたアルゴリズムアート生成
brand-guidelinesAnthropicのブランドガイドラインを適用
canvas-design.pngおよび.pdf文書で美しいビジュアルアートを作成
doc-coauthoring共同でドキュメントを作成するためのワークフローを案内
docx.docxドキュメントの文書作成・編集・分析機能
frontend-design高いデザイン品質を備えた実用レベルのフロントエンドUIを作成
internal-comms社内向け各種コミュニケーション文書作成を支援するリソース集
mcp-builder高品質なMCPサーバー作成
pdf.pdfドキュメントの結合・分割、フォームの処理などを行う包括的なPDF操作ツールキット
pptxプレゼンテーションの作成、編集、分析
skill-creator効果的なSkill作成ガイド
slack-gif-creatorSlack向けに最適化されたアニメーションGIFを作成するための知識とユーティリティ
theme-factoryスライド、ドキュメント、HTMLなどのテーマをスタイリングするためのツールキット
web-artifacts-builderモダンなフロントエンドWeb技術(React、Tailwind CSS、shadcn/ui)を用いて、マルチコンポーネントのHTMLを作成するためのツールスイート
webapp-testingPlaywrightを使用したローカルWebアプリケーションとの対話およびテストのためのツールキット
xlsx数式、書式設定、データ分析、可視化をサポートした包括的なスプレッドシートの作成、編集、分析

これらをもとに拡張するのもいいかもしれません。

面倒なら

Claude Codeに任せてみてください。

このプロジェクトに必要なSkill.mdを作成or収集してください

最後に

Claude Code Skillsを使うと、

  • 開発ルール
  • 手順
  • 定型レビュー
  • 社内ナレッジ

をAIに持たせることができます。

単なる補助ツールではなく、チームのやり方を理解して動けるAIエージェントになります。

ぜひ使ってみてください。

ここまで読んでいただき、ありがとうございます。もしこの記事の技術や考え方に少しでも興味を持っていただけたら、ネクストのエンジニアと気軽に話してみませんか。

  • 選考ではありません
  • 履歴書不要
  • 技術の話が中心
  • 所要時間30分程度
  • オンラインOK

エンジニアと話してみる