2026年に学ぶべき最もやりがいのあるAIスキルは何かと問われれば、答えは「スキル」に違いない。
Claude CodeからOpenClaw、Hermes Agentに至るまで、主流エージェントのほとんどが、業務の質と効率を向上させるためにSkillsに依存している。スキルのサポートを受けていないエージェントは、繰り返しトレーニングを必要とする新入社員のようなものであり、スキルを身につけたエージェントは、箱から出してすぐに一緒に仕事をする経験豊富な同僚のようなものです。
SkillsはAgentの分野で最も影響力のあるイノベーションの1つになりつつあります。つまり、モデルは脳であり、エージェントは体であり、スキルは手である。AIに “教える ”方法を知ることは、AIに “尋ねる ”方法を学ぶこと以上に重要です。反復タスク、暗黙のチーム知識、オペレーションの詳細を.skillファイルにカプセル化すれば、AIは最も信頼できるデジタルアシスタントとなる。
1.スキルとは
2025年10月16日、Anthropicは初めてAgent Skillsをリリースした。この機能は当初Claude Codeでのみ利用可能で、Proの有料アカウントが必要だった。
人間解放エージェントのスキル
同年12月18日、Anthropicはエージェントスキルを統一規格として全ユーザーに提供しました。その後、Codex、Cursor、Antigravity、OpenCode、Trae、Qoder、CodeBuddyなどのコーディングエージェントや、Claude Cowork、Skywork、MiniMax Agent、Buckleなどのデスクトップエージェントが次々とスキルに対応しました。
2026年春以降に登場したOpenClawや、最近ヒットしたHermes Agentもこの機能をサポートしている。
スキルとは「スキルのパッケージ」を意味する。人間には、サイクリング、水泳、運転、料理、写真など、さまざまなスキルがある。
Anthropicの公式定義: スキルは、開発者が構造化されたフォルダでクロードコードを拡張することを可能にするモジュール機能のセットです。各スキルにはコアとなるSKILL.mdファイルと関連する補助リソースが含まれています。ユーザーがClaude Codeにリクエストすると、リクエストの内容とスキルの説明に基づいて、対応するスキルを呼び出すかどうかをシステムが自動的に判断します。
もっとわかりやすく説明すると、スキルはAI用にカスタマイズされた標準業務マニュアル（SOP）です。各スキルにはインストラクション、リソースファイル、リファレンスのための特別なフォルダがあります。このフォルダによって、AIは「初心者」から「熟練者」へと素早く移行することができる。
この3つの違いを比喩を使って説明しなさい：
プロンプトは顧客の注文のようなもので、指示は明確だが実行はシェフ次第であり、MCPはAIが徒手空拳で作業する必要がないようにキッチンツールと食材を提供し、スキルは一連の動作、品質のボトムライン、実行基準を定義する秘密のレシピとスタッフコードである。スキルがあれば、AIは杓子定規に働き、ユーザーの意図を推測する必要はない。
2.スキルのコア構造
基本概念を理解した後、スキルのアーキテクチャをフォルダレベルで分析する。
Claude Code のインストールフォルダ(デフォルトでは C ドライブにあり、ファイル名は .Claude) を開き、Skills files ディレクトリを探します：
スキルクリエイター」スキルのフォルダ構造
- SKILL.md：名称、トリガー条件、タスクフロー、実行ガイドラインを含むSKILLコアコマンド。
- スクリプト： PythonやBashスクリプトなどの実行可能コードを保存
- リファレンス：技術仕様書、APIドキュメント、コードスニペット、デザインガイドラインなどのリファレンスドキュメントをオンデマンドで保存。
- assets（アセット）：テンプレート、フォント、画像、ロゴなどのストレージ素材リソース。
標準的なスキルの構成は以下の通り：
skill-name/
├── SKILL.md (必需)
│ ├── YAML frontmatter (必需)
│ │ ├── name: (必需)
│ │ └── description: (必需)
│ └── Markdown instructions (必需)
└── Bundled Resources (可选)
├── scripts/ - 可执行代码
├── references/ - 参考文档
└── assets/ - 资源文件
SKILL.mdは必須だが、それ以外はすべてオプションで、必要に応じて柔軟に設定できる。
エージェントはkillを実行する際に以下の処理を行います：
- SKILL.mdを最初のガイドとして使用し、大規模モデルのSKILLの要件を理解する。
- 現在のタスクと連動してスクリプト、リファレンス、アセットを呼び出すかどうかを判断する
- ユーザーのタスクは、”plan-do-watch ”のフィードバックループを通じて達成される。
SKILL.mdはアーキテクチャーで最も重要な部分である：
SKILL.mdの内部解剖（Cang He氏撮影）
まず名前だが、これは通常「frontend-design」のように英語とハイフンで構成される。
記述はYAMLメタデータの核となる側面であり、その品質はエージェントがスキルを正確に発動できるかどうかに直接影響する。
例として、Anthropicの公式フロントエンドデザインスキルには、以下の記述欄がある：
"frontend-design.skill "の説明フィールド。
中国語への翻訳：このスキルは、ウェブコンポーネント、ページ、またはアプリケーションの開発シナリオに適した高度なデザインでプロフェッショナルなフロントエンドインターフェースを作成するために使用され、画一的なAIスタイルを避け、創造的で洗練されたコードを生成します。
説明欄は、クロードコードが自動的にスキルをトリガーし、ロードする状況を直接決定します。十分に明確かつ正確に書かれていない場合、たとえそのスキルが強力であったとしても、エージェントは必要なときにそのスキルを使うことを覚えられないかもしれません。
ベストプラクティスに基づいた、良い説明文を書くための核となる戦略とテンプレートは以下の通り：
基本理念：きっかけは正義
Descriptionの最初の仕事は、それを人間に見せることではなく、AIのルーティングメカニズムに見せることである。つの質問に明確に答える必要がある。どのようなシナリオで、あるいはどのような言葉で使うべきか？
“黄金構造」の公式
高品質の説明文は通常、次のように続く：[1文のコア機能] + [実行する具体的なアクション] + [明確なトリガーキーワード/シナリオ]。
素晴らしい文章例だ：
ケースA：コード・レビューのスキル
name: security-code-review
description: Reviews code for security vulnerabilities and best practices. Use when the user asks to "review code", "check for bugs", "analyze security", or mentions specific issues like SQL injection, XSS, or performance bottlenecks.
ケースB：PDF処理スキル
name: pdf-processor
description: Extracts text, tables, and metadata from PDF files; merges or splits documents. Use when working with PDF files, converting PDFs to text, filling forms, or when the user uploads a PDF and asks for summary/extraction.
良い説明文を書く秘訣は、ユーザーの質問の仕方をシミュレーションすることだ。AIへのリクエストの仕方を想像し、そのリクエストのキーワードをすべて説明文に書く。
標準的なSKILL.mdのMarkdownフォーマットはおおよそ以下の通り：
---
name: 你的skill名称
description: 简要描述该技能的功能以及何时该使用它
---
# 你的技能名称
## 指令 (Instructions)
为 Claude Code 提供清晰、逐步的操作指南。
## 目标 (Goal)
## 示例 (Examples)
展示使用该技能的具体代码或操作案例。
PDF分析」スキルを作成するためのSKILL.mdの例：
---
name: pdf
description: 从PDF文档中提取和分析文本。当用户要求处理或阅读PDF时使用。
---
# PDF 处理技能：
1.使用本文件夹中的extract_text.py脚本提取PDF中的文本：
python3 extract_text.py <input_file>
2.提取后，请以结构化格式总结要点。
3.スキルズの3つのコアメカニズム
スキルのコア・アーキテクチャには、連動して機能する3つのメカニズムが含まれている。
SKILL.mdのRemotionスキル（動画作成に特化）の設定を例にとってみましょう：
---
name: remotion-best-practices
description: Best practices for Remotion - Video creation in React
metadata:tags: remotion, video, react, animation, composition
---
## When to use
Use this skills whenever you are dealing with Remotion code to obtain the domain-specific knowledge.
## Captions
When dealing with captions or subtitles, load the [./rules/subtitles.md](./rules/subtitles.md) file for more information.
## Using FFmpeg
For some video operations, such as trimming videos or detecting silence, FFmpeg should be used. Load the [./rules/ffmpeg.md](./rules/ffmpeg.md) file for more information.
## Audio visualization
When needing to visualize audio (spectrum bars, waveforms, bass-reactive effects), load the [./rules/audio-visualization.md](./rules/audio-visualization.md) file for more information.
## How to use
Read individual rule files for detailed explanations and code examples:
SKILLは3つのメカニズムによってAIの行動を制約する：
メカニズム1: スマートスイッチ (YAMLメタデータ)
各スキルファイルの先頭（-で囲まれた部分）にはコントロールパネルがあり、これは常にクロードコード・システム・ティップスのメタデータとして読み込まれ、スキルの「スイッチ」や「パーミッションカード」のようになっている。
メカニズムII：従量制参照（漸進的開示）
従来のAIには ”記憶 ”の問題がある。開発仕様を一度に入力すると、短期記憶（コンテキスト・ウィンドウ）が破裂し、AIが幻覚を見てしまうのだ。
スキルの巧妙な設計は、脳のスペースを取らず、必要なときにだけ読み込まれることだ。ユーザーは本棚のツールキットのように何十ものスキルを作成し、クロード・コードはそれを見て回らず、特定のスキルがトリガーされたときだけ、関連する「カンニングペーパー」を脳にロードする。
メカニズムIII：作用の方向性とサブエージェント
スキルはAIに命令を読ませるだけでなく、AIに「実行」をさせる。スキルの指導の下、クロード・コードはコマンドラインの実行、ファイルの検索、テストの実行、その他の操作を行うことができます。複雑なタスクの場合、エージェントはサブエージェントを呼び出してサブタスクに特化させ、終了後に結果を報告することができます。
プログレッシブ・ディスクロージャーは、スキルの最も重要な設計思想です。一度にすべてを読み込むのではなく、スキルの情報は3つのプログレッシブ・レイヤーで表示されます：
| レベル | エレメント | ローディングのタイミング | トークン割り当て | は英語の -ity、-ism、-ization に対応する。 |
|---|---|---|---|---|
| 一層目 | メタデータ（名前＋説明） | 常に文脈の中で | 約100ワード | スキルが発動するタイミングを決める |
| セカンドレイヤー | SKILL.md件名 | スキル発動後 | <5000字 | コア・ワークフロー |
| 三階 | サポートリソース（スクリプト／参考文献／資産） | オン・デマンド・ロード | 限りなく | 詳細なリファレンスと実行可能コード |
この設計の利点は明らかです。スキルに何百ページもの技術文書が含まれていると仮定した場合、会話のたびにすべてを読み込むと、コンテキストがすぐになくなってしまいます。プログレッシブな情報開示により、Claude Codeは必要なときだけ関連ドキュメントを読み込みます。これは、よく整理されたガイドブックを使って必要な章だけを読むようなものです。
4.スキルとプロンプト、MCP、エージェント、プロジェクトの違い
スキルを理解した上で、それが他の概念とどう違うのかを明確にする必要がある：
つまり、Skillsは調理済みの料理、Promptは調理済みの料理、Projectは食材、MCPは物流と持ち帰りシステムである。Skillsを使えば、アプローチはすでに設定されており、ユーザーは料理名を指定するだけで、AIが素早く正確に実行し、トークンのコストを節約することができる。
クロード・コードでは、SKILL.mdファイルには以下の関数が含まれている：
- 目標、方法、期待される結果をAIに知らせるきめ細かいプロンプトを含む。
- AIが使用できるツールと実行可能コードを指定する
- コマンド・エージェントは、軌道から外れないように厳密なシーケンスに従うこと。
5、スキルの上手な使い方
質の高いスキルの獲得には、主に3つのルートがある：
1) 公式推薦
コードを放り投げたくないユーザーや、すぐに使えるソリューションを探しているユーザーには、最適なエントリー・ポイントだ。
GitHub Anthropicには、複雑なデータを扱うためのxlsxスキルや、ビジネスプレゼンテーションのレイアウトを自動化するpptxスキルなど、強力な基本スキルがあらかじめ公式に組み込まれている。
Anthropic スキル
https://github.com/anthropics/skills
人間工学の公式スキル
Skill-creator "をインストールすることを強くお勧めします。これはGitHubで80K以上のスターを持つスキル作成ツールで、どんなスキルでも非常に簡単に作成できます。
スキルクリエイター：
https://github.com/anthropics/skills/tree/main/skills/skill-creator
Skill-creator.skill
インストール・コマンドはクロード・コードで簡単に入力できる：
このスキルのインストールを手伝ってください：
https://github.com/anthropics/skills/tree/main/skills/skill-creator
スキルクリエーターインストールコマンド
2) オープンソースのスキル市場
エージェント・スキルは、世界中の開発者が貢献しているオープンスタンダードである。
agentskills.ioは、AI時代の「App Store」または「npm Source」であり、幅広い業界の専門家の仕事を検索する公式推奨のグローバルスキルレジストリである。
GitHub Open Source Treasure Troveはプログラマーのための情熱の宝庫であり、anthropics/skillsの公式リポジトリやコミュニティが管理するawesome-agent-skillsのリストを直接検索することができる。
GitHubのOpenSkillsオープンソースリポジトリは、マルチプラットフォームに対応しており、他のAIエージェントにスキルの使い方を「教える」ためのプロジェクトルールのMarkdownファイルを自動的に作成する。
オープンスキル・プロジェクトの住所
https://github.com/numman-ali/openskills
また、skillsmp.comやskillsdirectory.comといったスキル専門のビジネスプラットフォームもある。
3) 自分で作る
ウェブ上の最高のスキルは、しばしば社内で書かれている。外部からダウンロードしたスキルも良いが、それは常識的なものであり、本当に商業的な堀を築くのは、あなた自身の「暗黙のビジネス秘密」である：
- 企業固有のコード命名規則
- 金メダルセールスの顧客返金対応における独自ドメイン・フレーズ
- 複雑なクレーム処理における財務省のインボイス・コンプライアンスのボトムライン
6.ハンズオン・スキル：HTMLインフォグラフィック・ジェネレーター
日々の仕事の中で、テキストからビジュアルなインフォグラフィックを作りたいとき、次のようなキュー・ワードを参考にするとよい：
提炼下面文字内容的核心关键点，创建一个HTML网页。
文字内容：
{这里是一段文字}
网页的设计要求如下：
1.视觉设计：采用{Magazine Layout}风格布局，{深色}主题色，营造现代高端氛围。
2.字体与排版：
·使用超大字体或数字突出核心要点，中文采用大号粗体，强调视觉冲击力。
·英文使用小号字体作为点缀，与中文形成比例反差，提升设计层次感。
3视觉元素：
·融入超大视觉元素（如标题、背景图或装饰）以突出重点，与小型元素形成强烈对比。
·使用简洁的勾线风格图形作为数据可视化或配图元素，保持现代感和清晰度。
4.色彩与效果：运用高亮色（单色透明度渐变）营造科技感，每种高亮色独立使用，避免不同高亮色之间的渐变混杂。
5.技术要求：引入专业图标库（如Font Awesome或Material Icons，通过CDN加载），避免使用emoji作为主要图标。
6.内容要求：提炼内容关键要点，不忽略重要细节。
このキュー・ワードを使ってモデル情報を整理することで、AIは視覚的なインフォグラフィックを生成することができる：
Qwen3.6プラス・モデルのインフォグラフィック
プロンプトをコピーして、AI Chatのウェブサイトに行って生成し、ダウンロードして、毎回スクリーンショットを撮るのは面倒だ。このプロンプトで「HTMLインフォグラフィックジェネレーター」スキルを作り、クロードコードやOpenClawにインストールすることができます。将来必要になったら、エージェントに「HTML Infographic Generator.skillを呼び出してxxxを生成して」と伝えればいい。
まず、スキルに名前をつけ、「html-infographic-generator」のように小文字の英語、標準的な文法を使い、単語をハイフンでつなぐ。
先に説明したSkillsのファイル構造デザイン・アーキテクチャに従うと、インフォグラフィック・ジェネレーターは通常SKILL.mdファイルのみを必要とし、必要に応じてreferencesフォルダのデザイン・ガイドラインやassetsフォルダのサンプルで補強することができます：
html-infographic-generator/
├── SKILL.md # 入口文档（设计规范+操作流程）
├── references/
│ └── design-guide.md # 详细设计指南
SKILL.mdはMarkdownフォーマットで、軽量なマークアップ言語であり、プレーンテキスト形式で文書を記述し、HTML/PDFに変換することができます。
SKILL.mdには通常、以下の内容が含まれている：
---
name: 你的skill名称
description: 简要描述该技能的功能以及何时该使用它
---
# 你的技能名称
## 指令 (Instructions)
为 Claude Code 提供清晰、逐步的操作指南。
## 目标 (Goal)
## 示例 (Examples)
展示使用该技能的具体代码或操作案例。
一番上のラップされた領域は、名前と説明フィールドを含むYAMLメタデータです。
html-infographic-generator」のYAMLメタデータ：
---
name: html-infographic-generator
description: 从用户文字中提炼核心关键点，生成Magazine Layout风格的深色主题HTML信息图网页；当用户需要将文字内容可视化、创建信息图、生成数据展示页面或制作图文混排页面时使用。
---
YAMLメタデータはHTMLインフォグラフィックジェネレーターの機能を定義します: このスキルはユーザーがコンテンツを視覚化する、インフォグラフィックを作成する、データプレゼンテーションページを生成する、またはグラフィックマッシュアップページを生成する必要があるときにロードされます。
説明フィールドは、エージェントが自動的にスキルを呼び出すタイミングを決定する鍵であり、”Generate HTML from this text for me. ”ではなく、”Generate HTML from the text uploaded by the user. ”のように、二人称を省略した命令文で使用するように設計されています！".単語数は、スキルのトリガーとなるキーワードを含めて、通常500語未満です。
YAMLメタデータを記述した後に、具体的な実行命令を記述します。"html-infographic-generator.skill "のSKILL.mdは次のようになっています：
# HTML信息图生成器
## 任务目标
- 本 Skill 用于：从用户提供的文字内容中提炼核心关键点，生成视觉冲击力强的HTML信息图网页
- 能力包含：文本关键点提炼、信息架构设计、HTML/CSS代码生成、视觉设计实现
- 触发条件：用户发送文字内容并希望生成可视化信息图、数据展示页面、图文混排网页
## 设计规范
### 1. 视觉设计
- **布局风格**：采用Magazine Layout（杂志排版）风格，强调网格系统、留白对比、视觉层次
- **主题色调**：深色主题，背景色使用 `#0a0a0a` 或 `#1a1a1a`，营造现代高端氛围
- **视觉层次**：通过大小、粗细、位置、色彩对比建立清晰的信息层级
### 2. 字体与排版
- **中文文本**：使用大号粗体（60-120px），突出核心要点，强调视觉冲击力
- 标题字体：`font-weight: 700-900`
- 推荐字体：Noto Sans SC、Source Han Sans（通过Google Fonts加载）
- **英文文本**：使用小号字体（12-16px）作为点缀，与中文形成比例反差
- 字体选择：Roboto、Inter、SF Pro Display
- 用途：副标题、注释、装饰性文字
- **行高与间距**：
- 标题行高：1.1-1.3
- 正文行高：1.6-1.8
- 段落间距：使用em或rem单位保持比例一致性
### 3. 视觉元素
- **超大视觉元素**：融入超大标题、背景图或装饰元素以突出重点
- 标题字号可达120-200px
- 背景图使用低透明度（10-30%）避免干扰文字
- **对比原则**：超大元素与小型元素形成强烈对比
- **图形风格**：使用简洁的勾线风格图形作为数据可视化或配图元素
- 可使用CSS绘制几何图形（圆、线、矩形）
- SVG图标保持线条简洁（stroke-width: 1.5-2px）
### 4. 色彩与效果
- **基础色板**：
- 背景：`#0a0a0a`、`#1a1a1a`
- 主文字：`#ffffff`、`#f0f0f0`
- 次要文字：`#888888`、`#666666`
- **高亮色方案**（单色透明度渐变）：
- 青色系：`rgba(0, 255, 255, 0.8)` → `rgba(0, 255, 255, 0.1)`
- 洋红系：`rgba(255, 0, 255, 0.8)` → `rgba(255, 0, 255, 0.1)`
- 金色系：`rgba(255, 215, 0, 0.8)` → `rgba(255, 215, 0, 0.1)`
- 绿色系：`rgba(0, 255, 128, 0.8)` → `rgba(0, 255, 128, 0.1)`
- **渐变规则**：每种高亮色独立使用，避免不同高亮色之间的渐变混杂
- **科技感营造**：使用透明度渐变、发光效果（box-shadow）、渐变边框
### 5. 技术要求
- **图标库**：引入Font Awesome或Material Icons（通过CDN加载）
```html
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<!-- Material Icons -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
- フォントライブラリグーグルフォントの導入
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;700;900&family=Roboto:wght@300;400;700&display=swap" rel="stylesheet"> - 絵文字禁止絵文字をメインアイコンにせず、プロフェッショナルなアイコンライブラリで統一する。
6.コンテンツ要件
- キーポイントの絞り込み：
- 核となるテーマ、重要なデータ、重要な発見を特定する
- 重要な詳細を保持し、重要な情報を省略しない
- 合理的なグループ分けによる情報の階層化
- インフォメーションアーキテクチャ：
- メインタイトル：最も中心的なメッセージ
- サブタイトル：追加説明またはガイダンス
- ボディ・パラグラフ：推敲
- データ/リスト：構造化されたプレゼンテーション
手続き
ステップ1：テキスト分析とキーポイント抽出
- ユーザーが提供したテキストコンテンツを読む
- 核となるテーマ、重要なデータ、重要な発見を特定する
- 3～8つの核となるキーポイントの絞り込み
- 情報の優先順位付けと階層化
ステップ2：情報アーキテクチャ設計
- 大見出し（最も中心となる情報）の内容を決める
- 小見出しと本文の段落を計画する
- デザインデータのプレゼンテーション（図、リスト、チャート）
- ビジュアル要素のレイアウトを決定する（ヘッダー位置、装飾要素、ホワイトスペース領域）
ステップ3：HTMLコード生成
- 必須リソースの紹介（Font Awesome、Google Fonts）
- HTMLの構造を書く：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>信息图</title> <!-- 引入资源 --> </head> <body> <!-- 内容结构 --> </body> </html> - CSSスタイルを書く：
- 基本スタイル（リセット、フォント、カラー変数）
- レイアウトスタイル（グリッドシステム、コンテナ、スペーシング）
- コンポーネントスタイル（見出し、段落、カード、アイコンなど）
- エフェクトスタイル（グラデーション、シャドウ、アニメーション）
ステップ4：アウトプットとデリバリー
- 完全なHTMLファイルの生成（インラインCSS付き）
- コードが適切にフォーマットされ、明確にコメントされていること。
- write_fileユーティリティを使って、ユーザーの作業ディレクトリにファイルを保存する。
リソース・インデックス
デザイン・ガイドライン
- 詳細な設計仕様：references/design-guide.mdを参照。
- 含まれるもの：マガジンレイアウトのスタイルノート、カラースキーム、レイアウトテンプレート、ベストプラクティス
HTMLテンプレート
- ベーステンプレート： assets/template.html を参照。
- 含まれるもの： インフラ、リソース紹介、サンプルスタイル、共通コンポーネント
ほら
設計原則
- 視覚的インパクトを優先特大のフォント、強いコントラスト、明るい色で視覚的なフォーカルポイントを作る。
- ホワイトスペースはデザイン白い空間を活かして、通気性と洗練性を生み出す
- 色使いの抑制色の混乱を避けるため、暗い背景色＋単色のハイライト色
- モバイル適応レスポンシブデザインの採用により、さまざまなデバイスで読みやすさを確保
技術的実現
- すべてのスタイルはHTMLファイルにインライン化され、ファイルをスタンドアロンで実行できるようにする。
- CSS変数を使用して色と間隔を管理し、メンテナンスを容易にする。
- 視覚効果のためにCSSの使用を優先し、外部画像への依存を減らす。
- コードが明確に構造化され、適切にコメントされていることを確認する。
コンテンツハンドリング
- 重要な詳細は省かないが、情報過多は避けること
- 視覚的階層を利用して、読む順番を導く
- 図＋アイコン＋短い説明文の形で、データに基づいたコンテンツが優先される
使用例
例1：製品データの表示
輸入年間販売データをテキストで送信します。
扱う：
- コアデータの精緻化：総売上高、成長率、市場シェアなど。
- 情報アーキテクチャの設計：主見出し（コアデータ）＋データカード（詳細指標）
- HTMLの生成：特大デジタル表示、グラデーション背景、アイコン装飾の使用
輸出HTMLインフォグラフィックファイル
例2：重要な知識ポイントのまとめ
輸入ユーザは、特定のトピックに関するナレッジコンテンツや記事を送信します。
扱う：
- 3～5点のコアとなる知識の絞り込み
- 情報アーキテクチャーの設計：主見出し＋箇条書きリスト＋追加メモ
- HTMLの生成：番号付きリスト、アイコンタグ、カードレイアウトの使用
輸出構造化HTMLインフォグラフィック
例3：イベントのタイムライン
輸入: ユーザーは、イベントの展開についての説明を送信する。
扱う：
- 重要なタイムポイントとイベントの絞り込み
- 情報アーキテクチャの設計：タイムラインレイアウト＋イベントカード
- HTMLの生成：垂直／水平タイムライン、ノードマークアップ、グラデーションエフェクトの使用
輸出タイムライン形式のHTMLインフォグラフィック
SKILL.md包含任务目标、设计规范、操作步骤、资源索引、注意事项和使用示例，详细规定skill的工作流程和输出标准，全程使用Markdown格式编写。
为帮助Agent更好理解该skill，还创建了references参考文件夹，包含design-guide.md设计指南：
HTMLインフォグラフィック・デザイン・ガイドライン
ディレクトリ
-
- 雑誌レイアウト・スタイルの注意事項
-
- ダークテーマの配色
-
- フォント・タイポグラフィのベストプラクティス
-
- 視覚的要素のデザイン原則
-
- 一般的なレイアウトテンプレート
雑誌レイアウト・スタイルの注意事項
コア機能
マガジン・レイアウト・スタイルは、伝統的な雑誌のビジュアル・デザインを取り入れ、強調する：
-
- グリッドシステム: 列ベースのレイアウトで、秩序あるビジュアル構造を作成
-
- 比較のために空白のページを残すコンテンツを際立たせ、高級感を演出するために余白を多くとる。
-
- 視覚階層情報の大きさ、厚さ、位置による明確な優先順位の確立
-
- グラフィックとテキストの混在: テキストとビジュアル要素の有機的な組み合わせによるプレゼンテーションの強化
デザインポイント
1.グリッドシステム
/* 基础网格布局 */
.container {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 24px;
max-width: 1400px;
margin: 0 auto;
padding: 40px;
}
/* 内容区域 */
.content-wide {
grid-column: span 12; /* 全宽 */
}
.content-main {
grid-column: span 8; /* 主内容 */
}
.content-side {
grid-column: span 4; /* 侧边栏 */
}
2.ホワイトスペースの使用
- ページの余白：40-80px
- 要素間隔：24-48px
- 段落間隔：1.5-2em
- リスト項目の間隔：12-20px
3.ビジュアル・ヒエラルキー
Level 1: 超大标题 (120-200px) - 最核心信息
Level 2: 大标题 (48-72px) - 重要章节
Level 3: 中标题 (24-36px) - 段落标题
Level 4: 正文 (16-18px) - 详细内容
Level 5: 辅助文字 (12-14px) - 注释、说明
design-guide.mdは長すぎるので、詳細は省略する。
このドキュメントは、デザインスタイル、デザインポイント、ページレイアウトテンプレート、デザインチェックリストの詳細で、エージェントがスキルタスクを理解するためのSKILLの注釈付きドキュメントです。
html-infographic-generator.skillはどのようなテキストでもトップレベルの美的インフォグラフィックに生成することができます。プロンプトを入力する必要はなく、テキストを直接入力するだけです。エージェントはそれ自身で要約し、改良してHTMLインフォグラフィックを生成します。これは、製品紹介、プロモーションプログラム、新しいメディア素材、その他のビジュアルコンテンツに適しています。
このスキルはBuckle Skill Storeで無料で公開されています。「HTML Infographic Generator」というキーワードで検索して、見つけて使ってみてください。
ボタン屋に電話
スキルのアドレス
https://www.coze.cn/?skill_share_pid=7614920172729843731
7.パブリック・スキルの設置
自分でスキルを作成するだけでなく、一般に公開されているスキルをインストールすることもできます。
スキルは通常GitHubにホストされ、Anthropicのオープンソーススキルが統一された場所に保存されている。
アンソロピックのオープンソーススキル
倉庫の住所
https://github.com/anthropics/skills/tree/main/skills
専門的なSKILL市場もある：
https://www.skillhub.club
https://agentskills.io
https://skillsmp.com
https://www.skillsdirectory.com
https://skillhub.tencent.com
スキルのインストールは簡単で、Claude CodeかOpenClawに入力してください：
このスキルのインストールを手伝ってください：
https://github.com/anthropics/skills/tree/main/skills/skill-creator
"Skill-creator "は、GitHubで8万人以上のスターを獲得しているスキル作成に特化したツールで、これを使えばタイピングだけで非常に簡単にスキルを作成することができる：
クリエイター・スキルを使って、PPT SKILLという言葉を作るのを手伝ってください。
エージェントは自動的にフレームワークSKILL.mdを設計し、スクリプトを実行してスキルの作成を完了します。
8.スキルの作成と展開のベストプラクティス
Anthropicの公式文書とコミュニティの実践によると、スキルの作成と展開には通常4つの段階がある：
ステージ1：ニーズと境界線の定義
手を汚す前に3つの質問に答えよう：
1) このスキルは具体的にどのような問題を解決するのか？原則は「単一業務」であり、各スキルは1つのコンピテンシーにのみ焦点を当てます。PDFを処理する」は広すぎます。「PDFから表を抽出し、CSVに変換する」が良い定義です。
2) きっかけとなったキーワード／シナリオは何か？これによって説明欄の書き方が決まります。Help with documents」ではなく、「Used to extract text and forms from PDFs when the user refer to PDFs, forms or document extraction」と書きましょう。
3) 必要なリソースは？スクリプト、テンプレート、参考資料、サンプルデータなど。それらを事前に整理し、スキルフォルダの対応するサブディレクトリに入れてください。
ステージ2：スキルフォルダーの構築
ファイル構造は要件を決定した後に作成され、3つの保存場所を選択することができる：
| 類型論 | トレール | 使用シナリオ |
|---|---|---|
| 個人スキル | ~/.claude/skills/ | パーソナルワークフローの最適化、実験的機能 |
| プロジェクト・スキル | .claude/skills/ | チームワーク、プロジェクト特有の知識 |
| プラグイン・スキル | プラグインシステムによるインストール | プロジェクト横断的な共有、公開 |
コアファイルSKILL.mdの構造：
---
name: your-skill-name
description: 清晰描述Skill的功能和触发场景，最多1024字符。
allowed-tools: Read, Grep # 可选：白名单工具列表
--------------------------------------------------
# Skill标题
## 功能说明
为Claude提供清晰的分步操作指导
## 使用示例
展示具体应用场景和方法
## 注意事项
边界条件、常见陷阱等
命名規則：nameフィールドは小文字、数字、ハイフンのみを使用し、64文字以内とする。フォルダ名はnameと一致していなければなりません。
フェーズ III: コア命令の作成
Anthropicの社内チームの経験から、最も価値のあるコンテンツは「よくある落とし穴」のセクションであることが分かっています。
高品質のSKILL.mdは通常含まれている：
1) 責任の境界を明確にする：エージェントに何ができて、何が絶対にできないかを伝える。SQL分析スキルは、SELECTクエリの実行のみに明確に制限し、DROP、DELETEなどの危険な操作を禁止する。
2）具体的な手順：段落テキストではなく、番号付きリストを使用する。エージェントは、ストーリー性のあるテキストよりも、構造化されたコンテンツによく従う。
3) 入力と出力の指定：フォーマットと予想される出力の例が示され、結果のランダム性が大幅に低減される。
(4)ハード制約：”must”、”forbidden”、”always ”などの絶対的な言葉を使う。少なくとも3つの明示的な制約と1つの出力例を持つスキルは、結果の安定性を60%改善できることがわかった。
フェーズ4：テスト、デバッグ、繰り返し
作成が完了したら、リスト通りに確認する：
- パスチェック：SKILL.mdが正しいディレクトリ（.claude/skills//）にあることを確認する。
- YAMLチェックサム：メタデータが正しくフォーマットされ、エラーなくラップされていることを確認する。
- トリガーテスト: 自然言語で質問をし、エージェントがそのスキルを認識し、使用を要求するかを観察する。
- バリデーションの実行：出力が期待される形式と内容に合致しているかチェックする。
SKILLが発動しない場合、90%は記述が十分に具体的に書かれていないケースです。claude -debug を実行すると、デバッグ時に詳細なロードログを見ることができる。
理解する」ことよりも重要なのは、「実行する」ことだ。繰り返しの作業、慣れ親しんだプロセス、そしてあなた自身の経験が再利用可能な能力となるように、最初の.skillを書いてみよう。
SKILLが作られた瞬間、エージェントとスキルについての理解の多くが明らかになる。
