Claude Code Skills を Claude Code Skills-Creator で構築する方法

カスタムのClaude CodeツールごとにSKILL.mdファイルを手動で作成するのは、2023年にpackage.jsonを手書きするようなもので、面倒でエラーが発生しやすく、完全に避けるべきです。Skills-Creatorは、自然言語の記述を本番環境対応のスキル定義に変換することで、このプロセスを自動化します。これにはMCPサーバーの構成とマニフェストの生成も含まれます。あなたはやりたいことを記述するだけで、定型的な作業はSkills-Creatorが処理します。

Claude Codeスキルとは何か、そしてSkills-Creatorがすべてを変える理由

Claude Codeスキルは、AIアシスタントの機能をコード生成の範囲を超えて拡張します。スキルは、ツール、そのパラメーター、および実行ロジックを、Claudeが発見して呼び出すことができる形式にパッケージ化します。モデルコンテキストプロトコル（MCP）によりこれが可能になりますが、SKILL.mdファイルを作成するには、正確なYAMLフロントマター、パラメーターのスキーマ、使用例を繰り返し記述する必要があります。

Skills-Creatorはその繰り返しを排除します。これはメタスキル、つまりスキルを構築するスキルです。あなたは「PostgreSQLデータベースをクエリし、整形された結果を返すスキルを作成する」といった高レベルな記述を提供するだけで、Skills-Creatorが以下を生成します。

適切なフロントマターを含む完全なSKILL.md
パラメーター検証スキーマ
使用例と戻り値の型定義
公開用のオプションのmanifest.json

内部ツールを構築するチームにとっては、これまで1つをリリースするのにかかっていた時間で、10個のカスタムスキルをリリースできることを意味します。個人開発者にとっては、必須のパラメーターフィールドを二度と忘れることがなくなるでしょう。

💡

美しいAPIドキュメントを生成する優れたAPIテストツールをお探しですか？

開発チームが最大限の生産性で協力できる、統合されたオールインワンプラットフォームが必要ですか？

Apidogはあなたのすべての要求に応え、Postmanをはるかに手頃な価格で置き換えます！

ボタン

前提条件：開発環境のセットアップ

Skills-Creatorを使用する前に、MCPサポート付きのClaude Codeと、スキル用のディレクトリ構造が必要です。

Claude Codeのインストール

まだインストールしていない場合は、Claude Code CLIをインストールしてください。

npm install -g @anthropic-ai/claude-code

インストールを確認してください。

claude --version
# Should show something like >= 2.0.70

Claude CodeでのMCP設定

構成ディレクトリとファイルを作成します。

# macOS/Linux
mkdir -p ~/.config/claude-code
touch ~/.config/claude-code/config.json

# Windows
mkdir %APPDATA%\claude-code
echo {} > %APPDATA%\claude-code\config.json

Skills-Creatorサーバーの設定を追加します。

{
  "mcpServers": {
    "skills-creator": {
      "command": "node",
      "args": ["/path/to/skills-creator/dist/index.js"],
      "env": {
        "SKILLS_OUTPUT_DIR": "~/claude-skills"
      }
    }
  }
}

Skills-Creatorリポジトリのクローン

git clone https://github.com/anthropics/skills.git
cd skills/skills/skill-creator
npm install
npm run build

これにより、スキルは/path/to/skills-creator/dist/index.jsにビルドされます。config.jsonでは絶対パスを使用してください。

スキル出力ディレクトリのセットアップ

mkdir -p ~/claude-skicks

SKILLS_OUTPUT_DIR環境変数は、Skills-Creatorに生成されたスキルをどこに書き込むかを指示します。

Skills-Creatorで最初のスキルを構築する：ステップバイステップのチュートリアル

TypeScript型からOpenAPIスペックを生成するスキルを構築しましょう。これはバックエンド開発者にとって一般的なニーズです。

ステップ1：Claude Codeを起動し、Skills-Creatorを呼び出す

claude

Claudeがロードされたら、Skills-Creatorが利用可能であることを確認します。

/list-tools

以下が表示されるはずです。

Available tools:
- skills-creator:generate-skill (Generate a new skill from description)

ステップ2：スキルを記述する

Claudeのプロンプトで、次のように入力します。

Use the skills-creator tool to generate a skill called "openapi-generator" that takes TypeScript interface definitions and generates OpenAPI 3.0 YAML specs. The skill should accept file paths or raw TypeScript code as input and return a valid OpenAPI spec with paths, schemas, and example responses.

Skills-Creatorはこの記述を解析し、以下を抽出します。

スキル名: openapi-generator
入力: TypeScriptインターフェース（ファイルまたは生のコード）
出力: OpenAPI 3.0 YAML
機能: パス、スキーマ、例

ステップ3：生成されたSKILL.mdを確認する

数秒後、Skills-Creatorは~/claude-skills/openapi-generator/SKILL.mdを書き出します。

---
name: openapi-generator
description: Generates OpenAPI 3.0 specifications from TypeScript interfaces
version: 1.0.0
author: Claude Skills Creator
mcp:
  transport: stdio
tools:
  generate-from-file:
    description: Generate OpenAPI spec from TypeScript file
    parameters:
      filePath:
        type: string
        description: Path to TypeScript file containing interfaces
        required: true
      includeExamples:
        type: boolean
        description: Include example values in schema
        default: true
  generate-from-code:
    description: Generate OpenAPI spec from raw TypeScript code
    parameters:
      code:
        type: string
        description: TypeScript interface definitions as string
        required: true
      title:
        type: string
        description: API title for the OpenAPI spec
        default: "Generated API"
---

# OpenAPI Generator Skill

This skill transforms TypeScript interfaces into OpenAPI 3.0 specifications.

## Usage Examples

### From File
```typescript
// Input: ~/project/src/types.ts
export interface User {
  id: number;
  name: string;
  email: string;
}

// Claude: Use openapi-generator with filePath "~/project/src/types.ts"
// Output: OpenAPI spec with User schema

コードから

// Claude: Use openapi-generator with code "export interface Product {...}" and title "Product API"

戻り値の形式

ツールは以下の内容を含むYAML文字列を返します。

openapi: "3.0.0"
info: タイトル、バージョン、説明
paths: 自動生成されたCRUDパス
components.schemas: スキーマとしてのTypeScriptインターフェース


### ステップ4：マニフェストの生成（オプション）

スキルをマーケットプレイスに公開する予定がある場合は、Skills-Creatorにマニフェストを生成するよう依頼します。

Create a manifest for the openapi-generator skill with license MIT, keywords openapi, typescript, backend, and repository URL https://github.com/your-org/openapi-generator-skill


これにより、~/claude-skills/openapi-generator/manifest.jsonが作成されます。

```json
{
  "name": "openapi-generator",
  "version": "1.0.0",
  "description": "Generates OpenAPI 3.0 specs from TypeScript",
  "license": "MIT",
  "keywords": ["openapi", "typescript", "backend"],
  "repository": {
    "type": "git",
    "url": "https://github.com/your-org/openapi-generator-skill"
  },
  "mcp": {
    "transport": "stdio",
    "tools": [...]
  }
}

生成されたファイルの理解：SKILL.mdとマニフェスト

Skills-Creatorは単にYAMLを書き出すだけでなく、ベストプラクティスを強制します。生成されたSKILL.mdの構造を詳しく見ていきましょう。

フロントマターブロック

---
name: openapi-generator
description: Generates OpenAPI 3.0 specifications from TypeScript interfaces
version: 1.0.0
author: Claude Skills Creator
mcp:
  transport: stdio
tools:
  generate-from-file:
    description: Generate OpenAPI spec from TypeScript file
    parameters:
      filePath:
        type: string
        description: Path to TypeScript file containing interfaces
        required: true
---

主要フィールド:

name: ケバブケースである必要があり、MCPサーバーごとに一意であること
description: Claudeがスキルを呼び出すタイミングを決定するために使用されます
mcp.transport: ローカル用にはstdio、リモートサーバー用にはhttp
tools: 各ツールは呼び出し可能な関数になります

パラメーターのスキーマ:

type: string、number、boolean、array、object
required: 真偽値
default: オプションのデフォルト値
description: Claudeのパラメーター選択にとって重要

Markdown本体

本体は使用パターンを文書化します。Skills-Creatorは以下を生成します。

ヘッダー: # スキル名
概要: スキルが何をするか
使用例: Claudeのプロンプトを示すコードブロック
戻り値の形式: 期待される出力構造

このドキュメントは、/help openapi-generatorを実行したときにClaude Codeによって使用されます。

Manifest.json

マニフェストは共有用のメタデータを追加します。

{
  "name": "openapi-generator",
  "version": "1.0.0",
  "description": "...",
  "license": "MIT",
  "keywords": ["openapi", "typescript", "backend"],
  "repository": {
    "type": "git",
    "url": "https://github.com/your-org/openapi-generator-skill"
  },
  "mcp": { ... }
}

なぜそれが重要なのか: SkillsMPのようなマーケットプレイスに公開する場合、マニフェストによって検索とバージョン管理が可能になります。

カスタムスキルのテスト、反復、デプロイ

ステップ1：スキルロジックの実装

Skills-Creatorは定義のみを生成します。ハンドラーは自分で作成する必要があります。~/claude-skills/openapi-generator/index.tsを作成します。

import { z } from 'zod';
import { convertTypeScriptToOpenAPI } from './converter';

// Schema for tool parameters
const FileParams = z.object({
  filePath: z.string(),
  includeExamples: z.boolean().default(true)
});

const CodeParams = z.object({
  code: z.string(),
  title: z.string().default("Generated API")
});

// MCP Tool Handlers
export const tools = {
  'generate-from-file': async (params: unknown) => {
    const { filePath, includeExamples } = FileParams.parse(params);
    const fs = await import('fs');
    const code = fs.readFileSync(filePath, 'utf8');
    return convertTypeScriptToOpenAPI(code, { includeExamples });
  },
  
  'generate-from-code': async (params: unknown) => {
    const { code, title } = CodeParams.parse(params);
    return convertTypeScriptToOpenAPI(code, { title });
  }
};

convertTypeScriptToOpenAPI関数は、あなたのビジネスロジックが配置される場所です。TypeScript ASTを解析するには、ts-morphのようなライブラリを使用します。

ステップ2：MCPサーバーの構築

~/claude-skills/openapi-generator/server.tsを作成します。

import { Server } from '@modelcontextprotocol/sdk/server/index.js';
import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js';
import { tools } from './index';

const server = new Server({
  name: 'openapi-generator',
  version: '1.0.0'
}, {
  tools: Object.keys(tools).map(name => ({
    name,
    description: `Tool: ${name}`,
    inputSchema: {} // Will be overridden by SKILL.md
  }))
});

server.setRequestHandler('tools/call', async (request) => {
  const tool = tools[request.params.name];
  if (!tool) throw new Error(`Unknown tool: ${request.params.name}`);
  
  const result = await tool(request.params.arguments);
  return { content: [{ type: 'text', text: result }] };
});

const transport = new StdioServerTransport();
await server.connect(transport);
console.error('OpenAPI Generator MCP server running');

ステップ3：Claude Codeの設定を更新する

Claude Codeをスキルのサーバーに設定します。

{
  "mcpServers": {
    "openapi-generator": {
      "command": "node",
      "args": ["~/claude-skills/openapi-generator/dist/server.js"]
    }
  }
}

ステップ4：Claude Codeでテストする

claude

/list-tools

openapi-generator:generate-from-fileとopenapi-generator:generate-from-codeが表示されるはずです。

テストを実行します。

Use openapi-generator to create an OpenAPI spec from the file ~/project/src/models/User.ts

動作すれば、YAML出力が表示されます。動作しない場合は、Claude Codeの出力パネルでMCPログを確認してください。

ステップ5：Skills-Creatorで反復する

ツール（例：generate-from-database）を追加する必要がある場合でも、SKILL.mdを手動で編集しないでください。次のように実行します。

Use skills-creator to add a new tool called generate-from-database to the openapi-generator skill. It should accept a database connection string and table name, then generate CRUD paths.

Skills-Creatorは以下を行います。

既存のSKILL.mdを読み込む
新しいツール定義を追加する
マニフェストのバージョンを更新する
Markdown本体に移行ガイドを書き込む

スキルを構築するスキルを構築する

メタスキルの連鎖

Skills-Creatorを内部で使用するスキルを構築できます。たとえば、テンプレートに基づいて新しいスキルをスキャフォールディングするskill-bootstrapperなどです。

// server/api/bootstrap-skill.post.ts
export default defineEventHandler(async (event) => {
  const { name, template } = await readBody(event);
  
  // Call Skills-Creator programmatically
  await $fetch('http://localhost:3001/generate-skill', {
    method: 'POST',
    body: {
      name,
      description: `Bootstrap ${template} skill`,
      template
    }
  });
  
  return { success: true, skillPath: `~/claude-skills/${name}` };
});

バージョン管理

Gitでスキルのバージョンを追跡します。

cd ~/claude-skills
git init
git add openapi-generator/
git commit -m "Initial openapi-generator skill"

Skills-Creatorがスキルを更新すると、マニフェストのバージョンがインクリメントされます。ロールバックのために各バージョンをコミットしてください。

プログラムによるスキルのテスト

// test/skill.test.ts
import { describe, it, expect } from 'vitest';
import { tools } from '../openapi-generator/index';

describe('openapi-generator', () => {
  it('should generate spec from file', async () => {
    const result = await tools['generate-from-file']({
      filePath: './test/fixtures/User.ts',
      includeExamples: true
    });
    
    expect(result).toContain('openapi: 3.0.0');
    expect(result).toContain('User');
  });
});

スキルアップデートをデプロイする前にテストを実行してください。

スキルの公開

プライベートレジストリへ

スキルをnpmパッケージとしてパッケージ化します。

// package.json
{
  "name": "@your-org/openapi-generator-skill",
  "version": "1.0.0",
  "main": "dist/server.js",
  "bin": { "openapi-generator-skill": "./bin/start.js" }
}

あなたのチームがそれをインストールします。

npm install -g @your-org/openapi-generator-skill

Claude Codeの設定を更新します。

{
  "mcpServers": {
    "openapi-generator": {
      "command": "openapi-generator-skill"
    }
  }
}

SkillsMPマーケットプレイスへ

skillsmp.comでアカウントを作成します
skills-mp publish ~/claude-skills/openapi-generatorを実行します
CLIがmanifest.jsonを読み込み、スキルをアップロードします

ユーザーは以下を介してインストールできます。

skills-mp install openapi-generator

結論

Skills-Creatorは、スキル開発を手動設定から自動生成へと変革します。あなたは意図を記述し、Skills-Creatorが定型的なコードを生成します。あなたはビジネスロジックに集中し、Skills-CreatorがMCPプロトコルへの準拠を処理します。カスタムのClaude Code統合を構築するチームにとって、これは開発時間を80%削減し、スキル定義全体の一貫性を保証します。今日からシンプルなスキルから始め、その後Skills-Creatorを自動化パイプラインに組み込み、スタック全体でエージェントの機能を拡張してください。

それらのスキルがあなたのAPIと連携する際は、Apidogで検証し、信頼性の高いエージェントとツールの契約を保証してください。

ボタン