Agent Skillsとは

Agent Skillsは、エージェントに再利用可能な手順・知識を追加する仕組みです。
実体はSKILL.mdを含むディレクトリで、説明文（description）をトリガーに必要時だけ読み込まれます。

  • Claude Code: ~/.claude/skills または ./.claude/skills
  • GitHub Copilot: ~/.copilot/skills または ./.github/skills
  • Codex (OpenAI): ~/.codex/skills または ./.codex/skills

普及の流れ（Anthropic発 → 各社対応）

Agent Skillsは、まず2025年10月にAnthropicがClaude Code向けに公開し、2025年12月にAnthropic自身がオープン標準として公開しました。
その後、2025年12月にGitHub CopilotとOpenAI Codexが対応を公開し、複数のエージェントで使える流れになりました。

Skillsの使いかた

基本は、プロンプト内容とdescriptionの一致を見て、エージェントが自動でSkillを選びます。
一方で、明示指定も可能です（例: Codexは$skillや/skills、Copilot CLIは/skill-name）。
自動で選ばれないときは、skill-nameで進めて のように明示すると安定します。

「自動で使うかどうか」はSkillごとに固定ではなく、プラットフォームや設定で変えられる場合があります。
たとえばCodexはallow_implicit_invocation: falseを設定すると、自動起動を無効にして明示指定のみで使えます。

公式で公開されているSkills紹介（フロントエンド向け）

ここでは、日常のフロントエンド作業で使いやすい公式Skillを3つに絞って紹介します。

  • Figma: implement-design
    • Figma MCPのノード情報を使って、デザイン実装に必要なコンテキストを取り出すためのSkillです。
    • 「Figmaのデザインを実装に落とす」作業を短くできるため、画面実装時に使いやすいです。
  • Vercel Labs: vercel-react-best-practices
    • Vercel Labsが公開しているReact向けのベストプラクティスSkillです。
    • React実装時の構成や品質面のガイドとして使えます。
  • Vercel Labs: find-skills
    • Vercel Labsが公開している、Skillsの検索・発見を支援するSkillです。
    • たとえば「〇〇をするには？」「〇〇向けのスキルある？」のように聞くと、npx skills findで候補を探せます。
    • 用途に合うSkillを探す入口として使えます。

繰り返し指示していた作業を楽にしたオリジナルSkill

毎回同じ指示をプロンプトで繰り返していたので、Skill化するとかなり楽でした。
最小構成は/SKILL.mdで、descriptionに「いつ使うか」を具体的に書いておくのがポイントです。
---で囲む冒頭のnameやdescriptionのブロックは、YAMLフロントマターと呼ばれます。

例A: コミット文を毎回同じルールで作るSkill

用途: 「ステージ済み差分から、プレフィックス付き日本語コミット文を作る」を定型化し、毎回プレフィックス指定を書かなくて済むようにする。
向いている場面: チームでコミット文の形式を統一したいとき。

SKILL.mdの例:

---
name: jp-commit-prefix
description: ユーザーが「コミットして」と依頼したときに、まずステージ済み差分を確認し、内容に合ったプレフィックス付き日本語コミット文を作成して確認する。承認（はい）があった場合のみコミットを実行する。
---

# 日本語コミット文（固定プレフィックス）

1. ユーザーから「コミットして」または同等の依頼が来たら、この手順を実行する。
2. `git diff --cached --name-status` と `git diff --cached` を実行し、ステージ済みの変更のみを確認する。
3. 変更内容を日本語で要約する。
4. 変更内容に応じてプレフィックスを選ぶ（例: `feat` / `fix` / `chore` / `docs` / `refactor` / `test` / `style` / `perf` / `build` / `ci`）。
5. 出力は1行のコミットタイトルのみとし、形式は `<prefix>: <日本語の要約>` にする。
6. プレフィックス判断に迷う場合は `chore` を使う。
7. ステージ済み変更がない場合は `ステージ済みの変更がありません。` と返す。
8. コミット文を提示したあと、はい/いいえ を確認する（UIがなければテキストで確認）
9. `はい` の場合のみ `git commit -m "<prefix>: <日本語の要約>"` を実行する。`いいえ` の場合は修正案を再提示する。

例B: Figma MCP時に.njkコンポーネント利用を強制するSkill

用途: Figma名と実装名が一致しないプロジェクトで、「どの.njkを使うか」の対応表を毎回指示しなくて済むようにする。
向いている場面: 旧プロジェクトでデザイン命名と実装命名がズレているとき。

SKILL.mdの例:

---
name: figma-to-njk-component-map
description: Figma上のコンポーネント名と、実装で使うNunjucks（.njk）コンポーネント名が一致しないプロジェクト内で使う。Figma名を受け取り、事前定義した対応表に従って正しいimportと利用コードを必ず使う。
---

# Figma -> .njk コンポーネント対応

1. Figma MCPで取得したコンポーネント名を確認する。
2. 下の対応表を参照し、該当する`.njk`コンポーネントを使う。
3. マッチする項目がある場合、対応表の`import`と`use`をそのまま使う。
4. マッチしない場合は既存コンポーネントを勝手に推測せず、ユーザーに確認する。
5. 対応表にあるコンポーネントを優先し、同等の別コンポーネントへ置き換えない。
6. 段落テキストは基本的に`a_text`を使う。
7. Heading/Sectionの見出しは基本的に`a_title`を使う。

## 対応表

- figma: `PageHeader`
  - import: `{% import "_object/02-molecules/breadcrumb/_macro.njk" as m_breadcrumb %}`
  - use: `{{ m_breadcrumb.breadcrumb(...) }}`

- figma: `HeroBanner`
  - import: `{% import "_object/03-organisms/hero-banner/_macro.njk" as o_hero_banner %}`
  - use: `{{ o_hero_banner.hero_banner(...) }}`

- figma: `SectionTitle`
  - import: `{% import "_object/02-molecules/section-title/_macro.njk" as m_section_title %}`
  - use: `{{ m_section_title.section_title(...) }}`

## 出力ルール

1. 対応した`import`文をテンプレート先頭に追加する。
2. 置き換えた箇所には対応する`use`記法を出力する。
3. 段落は原則として以下を使う。
   - import: `{% import "_object/01-atoms/text/_macro.njk" as a_text %}`
   - use: `{{ a_text.text(...) }}`
4. Heading/Sectionは原則として以下を使う。
   - import: `{% import "_object/01-atoms/title/_macro.njk" as a_title %}`
   - use: `{{ a_title.title(...) }}`
5. どの対応を使ったかを最後に短く列挙する（例: `PageHeader -> m_breadcrumb`）。

まとめ

Agent Skillsは、繰り返しの指示を定型化して、作業のブレを減らすのに有効です。
まずはコミット文作成やFigma→実装マッピングのような小さな定型作業からSkill化すると、効果を実感しやすいです。