ソーシャルデータバンク テックブログ
🔧

Claude Skillsで実現する"覚えないで済む"開発ワークフロー

kesoji
に公開
生産性向上
Claude
Claude Code
tech

こんにちは😊 kesojiです。

Social Databank Advent Calendar 2025 の3日目です。

もう出てから2ヶ月近く経ちますが、 Claudeの Agent Skills について書いていこうと思います。

TL;DR

  • Claude Skillsは人間が覚えておくことが減ってうれしい！
  • スキルが思ったように使われないときは、CLAUDE.mdで使うように明確に書こう！

Claude Skillsとは

公式ブログ によると、

既にみなさんはClaudeのデスクトップアプリではスプレッドシートやプレゼンテーションのようなファイルを作成するスキルを見たことがあるでしょう。
これからは皆さんが好きなスキルを作れるようになりました

とのことです。 Claude Skillsは

  • Claudeデスクトップアプリ
  • Claude Code
  • Claude API

で利用でき、

  • コンポーザブル（組み合わせ可能）: Claudeは自動的にどんなスキルが必要かを特定し、組み合わせて利用できる
  • ポータブル: 同じフォーマットで、 アプリ、 Claude Code、 APIで利用できる
  • 効率的: 必要な時にだけロードされる (つまり、コンテキストやトークンを消費しにくい)
  • パワフル: 実行可能なコードを含められるため、テキスト生成よりも適したタスクには適したアプローチができる

というものだそうです。他の機能と比較することで理解を深めていきましょう。

Claude Skills と CLAUDE.md / Command との違い

以下のようにまとめてみました。

CLAUDE.md Command Skill
誰が実行するか 起動時に自動で実行 ユーザが明示的に実行 モデルが判断して必要な時に実行
コンテキストの自動消費 ×
CLAUDE.md + 参照ファイル分		 ⚪
コマンド実行時に、コマンドのmd分		 △
起動時に、フロントマターの分 + スキル起動時に、スキルのmd分
その他 Claudeアプリでも利用可能。プログラムなども同梱可能

※「コンテキストの自動消費」は目安です。どの方法も記述量が多ければコンテキストを消費します。

スキルにプログラムが同梱可能、というのは大きな特徴ですが、私が考える最も重要なことは 「人間が利用方法を覚えていなくても、モデルが必要に応じて自動で起動してくれる」 ことだと思います。

例えば、PHPのコードを書く時はPHP用のスキルが、TypeScriptならTypeScript用のスキルが自動で起動します。

コマンドの場合、 ユーザが明示的に /review-typescript などのコマンドを実行する必要がありますし、存在を覚えておく必要があります。

また、プロジェクトローカルのスキルであれば、 GitHub ActionsでClaude Codeが動く際にも、AIが自動的に 判断してスキルを利用してくれます。

公式スキルを読んでみる

公式からスキルのサンプルがいくつか提供されています。

anthropics/skills を見ると、

This repository contains example skills that demonstrate what's possible with Claude's skills system. These examples range from creative applications (art, music, design) to technical tasks (testing web apps, MCP server generation) to enterprise workflows (communications, branding, etc.).

と書いてあり「アート、音楽、デザイン」のようなクリエイティブなもの、「テスト、MCPサーバー生成」のような技術的なもの、「コミュニケーション、ブランディング」などのエンタープライズのワークフローの例があるようです。

そして、これらは Claude Code からこちらのコマンドでインストールできます。

# まず、 マーケットプレイスに anthroupics/skills を追加
/plugin marketplace add anthropics/skills
# 次に、 /plugin
/plugin
## => Browse and install plugins
## => Select marketplace // ここにanthropics/skillsが出てくる
## => document-skills と example-skills をインストール
## => Claude Codeを再起動

※マーケットプレイスを経由せず直接インストールする方法もあります。 前述のGitHubをご確認下さい

2025年11月現在、上記の方法で行った場合、 ~/.claude/plugins にインストールされており、
Claude Skillsの本体は、 ~/.claude/plugins/marketplaces/anthropic-agent-skills にインストールされています。

一つピックアップしてみましょう。 slack-gif-creator を見てみます

slack-gif-creator

  • SKILL.md
  • pythonのユーティリティコード

が入っているように見えます。

スキルのyamlフロントマター(最初の---で囲まれている部分)を見てみましょう

---
name: slack-gif-creator
description: Toolkit for creating animated GIFs optimized for Slack, with validators for size constraints and composable animation primitives. This skill applies when users request animated GIFs or emoji animations for Slack from descriptions like "make me a GIF for Slack of X doing Y".
license: Complete terms in LICENSE.txt
---

どうやら、ユーザーがSlack用にアニメーション付きGIFか絵文字を作りたい時に起動されるようです。何はともあれ使ってみましょう。

デモ

成果物

回転する赤い四角

...正直、スキルがあるからこれができたって感じではないですが、ふわっとしたつぶやきからスキルが起動したことはわかりました！

中身を少し詳しく見てみましょう。

SKILL.mdの抜粋を見る
## Slack's Requirements
...

## Toolkit Structure
...

## Core Validators
...

## Animation Primitives
...

### Shake
...

### Bounce
...

### Spin / Rotate
``python
from templates.spin import create_spin_animation, create_loading_spinner

# Clockwise spin
frames = create_spin_animation(
    object_type='emoji',
    object_data={'emoji': '🔄', 'size': 100},
    rotation_type='clockwise',
    full_rotations=2
)

# Wobble rotation
frames = create_spin_animation(rotation_type='wobble', full_rotations=3)

# Loading spinner
frames = create_loading_spinner(spinner_type='dots')
``

## Helper Utilities
...

### GIF Builder (Assembly & Optimization)
...

### Text Rendering
...

### Color Management
...

## Optimization Strategies
...

## Example Composition Patterns
...

## Philosophy

This toolkit provides building blocks, not rigid recipes. To work with a GIF request:

1. **Understand the creative vision** - What should happen? What's the mood?
2. **Design the animation** - Break it into phases (anticipation, action, reaction)
3. **Apply primitives as needed** - Shake, bounce, move, effects - mix freely
4. **Validate constraints** - Check file size, especially for emoji GIFs
5. **Iterate if needed** - Reduce frames/colors if over size limits

**The goal is creative freedom within Slack's technical constraints.**

## Dependencies

To use this toolkit, install these dependencies only if they aren't already present:

``bash
pip install pillow imageio numpy
``

結構がっつり書かれていますね。

  • Slackの(画像の)仕様
  • スキルのディレクトリの中にどんなツール(ヘルパー関数)があるか
  • ヘルパー関数の使い方サンプル
  • Philosophy で、どのようにGifを作るかの作業手順的なもの
  • pythonの依存関係について(これは最後に書くものなのか？)

が記載されています。

実際に作ってみる

「スキルを作るスキル」が先ほどのexample-skillsに入っているので、それを使ってスキルを作ってみましょう。

Claude Codeを使っていると2倍働いて(?)疲れますよね！そこで、「疲れたなぁ」と言うとリラックスできる音楽を表示してくれるスキルを作ってみます。

スキルを作る

この後色々とやり取りがありましたが、最終的に以下ができあがりました！

---
name: relax-youtube
description: ユーザーが疲れていそうな時に、リラックスできるYouTube動画を提案します。 (project)
---

# Relax YouTube

## Overview

This skill provides relaxing YouTube videos when users express fatigue or stress. It searches for healing music and nature sounds to help users unwind and relax.

## When to Use

Trigger this skill when users express any of the following sentiments:
- 疲れた (tired)
- しんどい (tough/hard)
- 癒されたい (want to be healed)
- リラックスしたい (want to relax)
- Similar expressions of fatigue, stress, or need for relaxation

## How It Works

When triggered, follow these steps:

1. **Acknowledge the user's feelings** with a brief, empathetic message

2. **Search for healing content** using WebSearch with queries like:
   - "YouTube ヒーリング音楽" (healing music)
   - "YouTube リラックス 音楽" (relaxation music)
   - "YouTube 癒し 自然音" (healing nature sounds)
   - "YouTube meditation music"

3. **Select 3-5 videos** from the search results that:
   - Are from reputable channels (avoid spam)
   - Have reasonable view counts and positive engagement
   - Focus on healing, relaxation, meditation, or nature sounds
   - Preferably have long durations (30+ minutes) for sustained relaxation

4. **Present the recommendations** in this format:
   - Brief introduction suggesting relaxation
   - List each video with:
     - Title
     - YouTube URL
     - Brief description (duration, type of content)
   - Warm closing message

## Example Output Format

``

お疲れ様です。少し休憩しませんか？リラックスできる音楽を見つけました：

1. **[動画タイトル]**
   <https://youtube.com/watch?v=>...
   (1時間 | ヒーリング音楽)

2. **[動画タイトル]**
   <https://youtube.com/watch?v=>...
   (2時間 | 自然音・雨の音)

3. **[動画タイトル]**
   <https://youtube.com/watch?v=>...
   (30分 | 瞑想音楽)

ゆっくり休んでくださいね。

``

## Notes

- Focus on Japanese content when possible, as the user communicates in Japanese
- Prioritize quality and authenticity over quantity
- Avoid videos with ads or interruptions if information is available
- If WebSearch doesn't return good results, suggest well-known healing music channels as alternatives

必要な場所に配置(~/.claude/skills/relax-youtube/SKILL.md)し、使ってみましょう！

ヒーリングスキル

無事、動いているようです

弊社での利用例の紹介と運用の注意点

現在、各言語ごとのコーディング規約やレビュー時の観点のスキルを作って運用しています。

以下のように、構成しています。

  • vue3-devスキル(フロントエンドの開発時のスキル)
    • SKILL.md (TypeScriptや、Vue3のコードを書く時に起動するようなdescriptionを書く)
    • references/
      • Vue3の独自コーディング規約に沿った開発のmd
      • zodスキーマの書き方のmd
      • APIリクエストを送るコードの書き方のmd
      • 汎用コンポーネントの作成/メンテナンス(例えばStorybookも一緒に触ることを指示します)のmd

Claude SkillsにはProgressive Disclosure という仕組みがあり、

  • SKILL.md には、「こういう場合はこのreferenceを参照してね」という形で参考資料を紐づける
  • references/ 以下の文書は、「こういう場合」に当てはまるまで読み込まれない

という動きをします。そのため、コンテキストを節約できます。
referencesの内容ごとにスキルを作ってもいいのかもしれませんが、、 Claudeにこっちの構成をオススメされたのでこうしています()

さて、準備完了かと思いましたが、このスキルが配置されている状態で 「@src/xxx.vueをレビューして」と言っても、スキルが発動しませんでした。
descriptionをなるべく緩めにしても、あまり改善しなかったため、 CLAUDE.md に 「フロントエンド開発する際は vue3-dev スキルを使って開発を補助してください」 と書きました。
こうして先ほどのプロンプトでもスキルが発動するようになりました。

vue3-dev skill

リファレンスは必要なものだけが読み込まれており、 Progressive Disclosureも効いていることがわかります。

まとめ

Claude Skillsを使うことで、以下のようなメリットがあります:

  • 覚えなくていい: コマンドを明示的に呼び出す必要がなく、AIが自動的に必要なスキルを判断して起動してくれる
  • 自動化に強い: プロジェクトローカルのスキルであれば、GitHub Actionsでも自動的に利用される
  • 効率的: Progressive Disclosureにより、必要な情報だけが読み込まれる

まだexampleのような本格的なスキルは作っていませんが、お試し段階として研究・活用していきたいと思います！

今後の課題

今回紹介したようなプロジェクト固有のガイドラインをスキルに埋め込む場合、以下の課題があります:

  • 配置場所の問題: .claude/skills/ にドキュメントを置く必要があり、project/docs などに置けない
  • ポータビリティの問題: プロジェクト固有のスキルは、他のプロジェクトに持ち運びにくい

シンボリックリンクで配置場所の問題は解決できそうですが、ポータビリティについては「プロジェクトローカルなスキル」と割り切るのが現実的かもしれません。

ソーシャルデータバンク テックブログ
ソーシャルデータバンク テックブログ

ソーシャルデータバンク株式会社の開発チームです。インフラ、品質、UI/UX、DevOpsなど様々な活動に取り組んでいます。

Discussion