Cara Membuat Keterampilan Kode Claude dengan Claude Code Skills-Creator

Menulis file SKILL.md secara manual untuk setiap alat Claude Code khusus terasa seperti menulis package.json secara manual pada tahun 2023—melelahkan, rawan kesalahan, dan sama sekali dapat dihindari. Skills-Creator mengotomatiskan proses ini dengan mengubah deskripsi bahasa alami menjadi definisi skill yang siap produksi, lengkap dengan konfigurasi server MCP dan pembuatan manifes. Anda menjelaskan apa yang Anda inginkan; itu menangani boilerplate.

Apa itu Claude Code Skills dan Mengapa Skills-Creator Mengubah Segalanya?

Claude Code skills memperluas kemampuan asisten AI Anda di luar pembuatan kode. Sebuah skill mengemas sebuah alat, parameternya, dan logika eksekusi ke dalam format yang dapat ditemukan dan dipanggil oleh Claude. Model Context Protocol (MCP) memungkinkan hal ini, tetapi menulis file SKILL.md membutuhkan YAML frontmatter yang tepat, skema parameter, dan contoh penggunaan—berulang kali.

Skills-Creator menghilangkan pengulangan itu. Ini adalah meta-skill: sebuah skill yang membangun skill. Anda memberikan deskripsi tingkat tinggi seperti “Buat skill yang mengkueri database PostgreSQL dan mengembalikan hasil yang diformat,” dan itu menghasilkan:

Sebuah SKILL.md lengkap dengan frontmatter yang tepat
Skema validasi parameter
Contoh penggunaan dan definisi tipe pengembalian
manifest.json opsional untuk publikasi

Untuk tim yang membangun alat internal, ini berarti Anda dapat mengirimkan sepuluh skill khusus dalam waktu yang biasanya dibutuhkan untuk mengirimkan satu skill. Untuk pengembang solo, ini berarti tidak akan pernah lagi melupakan bidang parameter yang wajib diisi.

💡

Ingin alat Pengujian API yang hebat yang menghasilkan Dokumentasi API yang indah?

Ingin platform All-in-One terintegrasi untuk Tim Pengembang Anda bekerja sama dengan produktivitas maksimum?

Apidog memenuhi semua permintaan Anda, dan menggantikan Postman dengan harga yang jauh lebih terjangkau!

button

Prasyarat: Menyiapkan Lingkungan Pengembangan Anda

Sebelum menggunakan Skills-Creator, Anda memerlukan Claude Code dengan dukungan MCP dan struktur direktori untuk skill Anda.

Instal Claude Code

Jika Anda belum melakukannya, instal Claude Code CLI:

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

Verifikasi instalasi:

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

Konfigurasi MCP di Claude Code

Buat direktori dan file konfigurasi:

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

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

Tambahkan konfigurasi server Skills-Creator:

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

Kloning Repositori Skills-Creator

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

Ini membangun skill ke /path/to/skills-creator/dist/index.js. Gunakan jalur absolut di config.json Anda.

Siapkan Direktori Output Skills

mkdir -p ~/claude-skicks

Variabel lingkungan SKILLS_OUTPUT_DIR memberi tahu Skills-Creator di mana harus menulis skill yang dihasilkan.

Membangun Skill Pertama Anda dengan Skills-Creator: Panduan Langkah demi Langkah

Mari kita bangun skill yang menghasilkan spesifikasi OpenAPI dari tipe TypeScript—kebutuhan umum untuk pengembang backend.

Langkah 1: Mulai Claude Code dan Panggil Skills-Creator

claude

Setelah Claude memuat, verifikasi Skills-Creator tersedia:

/list-tools

Anda akan melihat:

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

Langkah 2: Jelaskan Skill Anda

Di prompt Claude, ketik:

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 mengurai deskripsi ini dan mengekstrak:

Nama skill: openapi-generator
Input: Antarmuka TypeScript (file atau kode mentah)
Output: OpenAPI 3.0 YAML
Fitur: jalur, skema, contoh

Langkah 3: Tinjau SKILL.md yang Dihasilkan

Setelah beberapa detik, Skills-Creator menulis ~/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

Dari Kode

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

Format Pengembalian

Alat ini mengembalikan string YAML yang berisi:

openapi: "3.0.0"
info: Judul, versi, deskripsi
paths: Jalur CRUD yang dibuat secara otomatis
components.schemas: Antarmuka TypeScript sebagai skema


### Langkah 4: Hasilkan Manifes (Opsional)

Jika Anda berencana untuk mempublikasikan skill ke marketplace, minta Skills-Creator untuk membuat manifes:

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


Ini membuat `~/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": [...]
  }
}

Memahami File yang Dihasilkan: SKILL.md dan Manifes

Skills-Creator tidak hanya menulis YAML—tetapi juga menegakkan praktik terbaik. Mari kita bedah struktur SKILL.md yang dihasilkan.

Blok Frontmatter

---
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
---

Bidang utama:

name: Harus kebab-case, unik per server MCP
description: Digunakan oleh Claude untuk memutuskan kapan memanggil skill
mcp.transport: stdio untuk lokal, http untuk server jarak jauh
tools: Setiap alat menjadi fungsi yang dapat dipanggil

Skema parameter:

type: string, number, boolean, array, object
required: Boolean
default: Nilai default opsional
description: Penting untuk pemilihan parameter Claude

Isi Markdown

Isi mendokumentasikan pola penggunaan. Skills-Creator menghasilkan:

Header: # Nama Skill
Overview: Apa yang dilakukan skill
Usage Examples: Blok kode yang menunjukkan prompt Claude
Return Format: Struktur output yang diharapkan

Dokumentasi ini digunakan oleh Claude Code saat Anda menjalankan /help openapi-generator.

Manifest.json

Manifes menambahkan metadata untuk berbagi:

{
  "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": { ... }
}

Mengapa itu penting: Saat Anda mempublikasikan ke marketplace seperti SkillsMP, manifes memungkinkan pencarian dan pembuatan versi.

Menguji, Mengulang, dan Menyebarkan Skill Kustom Anda

Langkah 1: Terapkan Logika Skill

Skills-Creator hanya menghasilkan definisi. Anda harus menulis handler. Buat ~/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 });
  }
};

Fungsi convertTypeScriptToOpenAPI adalah tempat logika bisnis Anda berada. Gunakan pustaka seperti ts-morph untuk mengurai AST TypeScript.

Langkah 2: Bangun Server MCP

Buat ~/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');

Langkah 3: Perbarui Konfigurasi Claude Code

Arahkan Claude Code ke server skill Anda:

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

Langkah 4: Uji di Claude Code

claude

/list-tools

Anda akan melihat openapi-generator:generate-from-file dan openapi-generator:generate-from-code.

Jalankan pengujian:

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

Jika berhasil, Anda akan melihat output YAML. Jika tidak, periksa log MCP di panel output Claude Code.

Langkah 5: Berulang dengan Skills-Creator

Jika Anda perlu menambahkan alat (misalnya, generate-from-database), jangan edit SKILL.md secara manual. Jalankan:

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 akan:

Membaca SKILL.md yang ada
Menambahkan definisi alat baru
Memperbarui versi manifes
Menulis panduan migrasi di badan markdown

Membangun Skill yang Membangun Skill

Rantai Meta-Skill

Anda dapat membangun skill yang menggunakan Skills-Creator secara internal. Misalnya, skill-bootstrapper yang membuat kerangka skill baru berdasarkan templat.

// 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}` };
});

Manajemen Versi

Lacak versi skill di Git:

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

Ketika Skills-Creator memperbarui skill, ia akan menaikkan versi di manifes. Komit setiap versi untuk rollback.

Menguji Skill secara Programatik

// 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');
  });
});

Jalankan pengujian sebelum menyebarkan pembaruan skill.

Mempublikasikan Skill Anda

Ke Registri Pribadi

Kemas skill Anda sebagai paket npm:

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

Tim Anda menginstalnya:

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

Perbarui konfigurasi Claude Code:

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

Ke Marketplace SkillsMP

Buat akun di skillsmp.com
Jalankan skills-mp publish ~/claude-skills/openapi-generator
CLI membaca manifest.json dan mengunggah skill Anda

Pengguna kemudian dapat menginstal melalui:

skills-mp install openapi-generator

Kesimpulan

Skills-Creator mengubah pengembangan skill dari konfigurasi manual menjadi generasi otomatis. Anda menjelaskan niat, ia menghasilkan boilerplate. Anda fokus pada logika bisnis, ia menangani kepatuhan protokol MCP. Untuk tim yang membangun integrasi Claude Code kustom, ini memangkas waktu pengembangan sebesar 80% dan memastikan konsistensi di seluruh definisi skill. Mulailah dengan skill sederhana hari ini, lalu hubungkan Skills-Creator ke dalam pipeline otomatisasi Anda untuk menskalakan kemampuan agen di seluruh tumpukan Anda.

Ketika skill tersebut berinteraksi dengan API Anda, validasi dengan Apidog untuk menjamin kontrak agen-alat yang andal.

button