Skills環境別のセットアップと使い方
これまでの説明で、Skillsへの理解が深まったと思います。ここからは、実際に手元で試せる方法を紹介します。
Claude Desktopでの利用
Claude DesktopはClaude公式のデスクトップアプリケーションです。Chatインターフェースを通じてClaudeモデルと会話できるほか、MCPサーバーやその他のツールとの連携により、幅広いタスクに対応できます。
Claude DesktopでSkillsを利用する手順は以下の通り簡単です。
- 設定→機能を開く
- 公式から提供されるSkillsを有効化する
これだけで利用可能です。また、自作のSkillsをzipファイルとしてアップロードすることも可能です。Skillsを有効化すると、Claude Desktopが「このSkillsを使って何か作りましょうか」と親切に提案してくれます。
Anthropic SDKでの利用
次に、Anthropic SDKでの利用方法を説明します。公式Skillsとユーザーが作成したカスタムSkillsの両方を利用できます。利用にはAnthropic APIキーが必要です。また、Anthropic SDKをラップしているAI SDKのAnthropic Providerからも利用可能です。
詳細な利用方法については、次回詳しく紹介します。
Claude Codeでの利用
最後に、Claude Codeでの使い方を説明します。Claude CodeはAnthropicが提供するコーディングAIエージェントです。コマンドラインなどから直接Claudeと対話しながらコーディング作業を進められます。ファイルの読み書き、コード実行、git操作などの開発タスクを、自然言語の指示だけで実行できる点が特徴です。
Claude CodeでSkillsを利用する方法は3つあります。
1. プラグインのインストール
Claude Codeを起動後、下記のコマンドを実行すると、公式から提供されるSkillsがすべてインストールされます。
/plugin marketplace add anthropics/skills
2. 会話形式でのインストール
対話的にインストールする方法もあります。
-
/pluginと入力 -
Browse and install pluginsを選択 -
anthropic-agent-skillsを選択 -
次の2つの選択肢から選ぶ：
-
document-skills：docx、pdf、pptx、xlsx を扱うSkillsをインストール（公式リポジトリで公開） -
example-skills：その他のツールをインストール
-
3. スコープ別の手動配置
MCPの設定ファイル.mcp.jsonと同様に、特定のSkillsをClaude Codeの特定のスコープに登録することもできます。
個人レベル（グローバルスコープ）
下記のディレクトリを作成し、Skillsを配置することで、すべてのプロジェクトで利用可能になります。
mkdir -p ~/.claude/skills/my-skill-name
プロジェクトレベル（ローカルスコープ）
下記のディレクトリ内にプロジェクト固有のSkillsを配置できます。チーム内でSkillsを共有する場合におすすめです。
mkdir -p .claude/skills/my-skill-name
実行環境に関する注意点
ClaudeにSkillsを使わせる場合、実行環境が異なる点に注意が必要です。
- Claude Desktop / Anthropic SDK：Anthropic側が用意するsandbox（コード実行環境）を利用
- Claude Code：優先的にローカル環境でコードを実行
実行するコードに必要な権限と環境を判断して、適切な方法を選択することをおすすめします。
公式Skillsを使ってみる
実際に公式Skillsを使ってみましょう。今回使用するのはfrontend-designというSkillsです。
このSkillsは、AIエージェントにフロントエンドを構築させる際に、AIらしさを軽減し、デザインの質を向上させ、プロダクションレベルのUIを構築できるようにします。Claude CodeでこのSkillを利用するには、プロジェクトの下記のディレクトリに frontend-design SkillのSKILL.mdをコピーします。
.claude/skills/frontend-design/SKILL.md
そして、下記のプロンプトを使って、Claude Codeに指示を出します。
frontend-design Skill を使って、CodeZine についての紹介ページを 1 つ作成してください。
以下の要件で作成をお願いします:
- 出力先: index.html
- HTML5 と CSS を使用（CSS は<style>タグ内に記述）
- レスポンシブデザイン対応
- CodeZine の特徴や魅力を伝えるランディングページ風のレイアウト
- セクション例: ヒーロー、特徴紹介、カテゴリ、CTA など
参考として、Skillsを使用しない場合の生成結果も見てみましょう。
まとめ
本記事では、Claude Skillsの基本概念と利用方法について解説しました。次回は、実際に業務で利用できるSkillsの実装方法やベストプラクティスに基づいた設計について詳しく紹介します。
