สร้างทักษะโค้ด Claude ด้วย Claude Code Skills-Creator

การเขียนไฟล์ SKILL.md ด้วยตนเองสำหรับเครื่องมือ Claude Code แบบกำหนดเองทุกครั้ง ให้ความรู้สึกเหมือนกับการเขียน package.json ด้วยมือในปี 2023 ซึ่งน่าเบื่อ ผิดพลาดง่าย และหลีกเลี่ยงได้อย่างสมบูรณ์ Skills-Creator ช่วยให้กระบวนการนี้เป็นไปโดยอัตโนมัติ โดยเปลี่ยนคำอธิบายภาษาธรรมชาติให้เป็นคำจำกัดความของ Skill ที่พร้อมใช้งานจริง พร้อมกับการกำหนดค่าเซิร์ฟเวอร์ MCP และการสร้าง Manifest คุณอธิบายสิ่งที่คุณต้องการ; มันจะจัดการส่วนที่เป็น boilerplate ให้เอง

Claude Code Skills คืออะไร และเหตุใด Skills-Creator จึงเปลี่ยนทุกสิ่ง?

Claude Code skills ขยายขีดความสามารถของผู้ช่วย AI ของคุณให้เหนือกว่าการสร้างโค้ด Skill บรรจุเครื่องมือ, พารามิเตอร์ และตรรกะการดำเนินการลงในรูปแบบที่ Claude สามารถค้นพบและเรียกใช้งานได้ Model Context Protocol (MCP) ทำให้สิ่งนี้เป็นไปได้ แต่การเขียนไฟล์ SKILL.md ต้องใช้ YAML frontmatter, schema ของพารามิเตอร์ และตัวอย่างการใช้งานที่แม่นยำ—ซ้ำๆ กัน

Skills-Creator ช่วยลดการทำซ้ำนั้นลง มันเป็น meta-skill: Skill ที่สร้าง Skill อื่นๆ คุณให้คำอธิบายระดับสูง เช่น “สร้าง Skill ที่คิวรีฐานข้อมูล PostgreSQL และส่งคืนผลลัพธ์ในรูปแบบที่กำหนด” แล้วมันจะสร้างสิ่งเหล่านี้:

ไฟล์ SKILL.md ที่สมบูรณ์พร้อม frontmatter ที่ถูกต้อง
Parameter validation schemas
ตัวอย่างการใช้งานและการกำหนดประเภทข้อมูลที่ส่งคืน
ไฟล์ manifest.json สำหรับการเผยแพร่ (เป็นตัวเลือก)

สำหรับทีมที่สร้างเครื่องมือภายใน นั่นหมายความว่าคุณสามารถส่งมอบ Skill ที่กำหนดเองได้สิบ Skill ในเวลาเท่าเดิมที่เคยใช้ในการส่งมอบ Skill เดียว สำหรับนักพัฒนาเดี่ยว นั่นหมายความว่าจะไม่มีวันลืมช่องพารามิเตอร์ที่จำเป็นอีกต่อไป

💡

ต้องการเครื่องมือทดสอบ API ที่ยอดเยี่ยมที่สร้าง เอกสาร API ที่สวยงาม หรือไม่?

ต้องการแพลตฟอร์มแบบ All-in-One ที่รวมเข้าด้วยกันสำหรับทีมพัฒนานักพัฒนาของคุณเพื่อทำงานร่วมกันด้วย ประสิทธิภาพสูงสุด หรือไม่?

Apidog ตอบสนองทุกความต้องการของคุณ และ เข้ามาแทนที่ Postman ในราคาที่ย่อมเยามากขึ้น!

button

ข้อกำหนดเบื้องต้น: การตั้งค่าสภาพแวดล้อมการพัฒนาของคุณ

ก่อนใช้ Skills-Creator คุณต้องมี Claude Code ที่รองรับ MCP และโครงสร้างไดเรกทอรีสำหรับ Skill ของคุณ

ติดตั้ง Claude Code

หากคุณยังไม่ได้ติดตั้ง ให้ติดตั้ง Claude Code CLI:

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

ตรวจสอบการติดตั้ง:

claude --version
# ควรแสดงผลลัพธ์เช่น >= 2.0.70

ภาพหน้าจอของ Claude Code CLI แสดงการติดตั้งและเวอร์ชัน

กำหนดค่า MCP ใน Claude Code

สร้างไดเรกทอรีและไฟล์การกำหนดค่า:

# 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

สิ่งนี้จะสร้าง Skill ไปยัง /path/to/skills-creator/dist/index.js ใช้พาธสัมบูรณ์ใน config.json ของคุณ

ตั้งค่าไดเรกทอรีเอาต์พุตของ Skill

mkdir -p ~/claude-skicks

ตัวแปรสภาพแวดล้อม SKILLS_OUTPUT_DIR บอก Skills-Creator ว่าจะเขียน Skill ที่สร้างขึ้นไว้ที่ใด

การสร้าง Skill แรกของคุณด้วย Skills-Creator: คำแนะนำทีละขั้นตอน

มาสร้าง Skill ที่สร้างสเปค OpenAPI จากประเภท TypeScript ซึ่งเป็นความต้องการทั่วไปสำหรับนักพัฒนาแบ็คเอนด์

ขั้นตอนที่ 1: เริ่ม Claude Code และเรียกใช้ Skills-Creator

claude

เมื่อ Claude โหลดขึ้นแล้ว ให้ตรวจสอบว่า Skills-Creator พร้อมใช้งาน:

/list-tools

คุณควรเห็น:

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

ขั้นตอนที่ 2: อธิบาย Skill ของคุณ

ในพรอมต์ 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 จะวิเคราะห์คำอธิบายนี้และแยกข้อมูลดังนี้:

ชื่อ Skill: openapi-generator
อินพุต: อินเทอร์เฟซ TypeScript (ไฟล์หรือโค้ดดิบ)
เอาต์พุต: OpenAPI 3.0 YAML
คุณสมบัติ: paths, schemas, examples

ขั้นตอนที่ 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 เป็น schemas


### ขั้นตอนที่ 4: สร้าง Manifest (ไม่บังคับ)

หากคุณวางแผนที่จะเผยแพร่ Skill ไปยัง Marketplace ให้ขอให้ Skills-Creator สร้าง Manifest:

สร้าง Manifest สำหรับ Skill openapi-generator พร้อมสิทธิ์ใช้งาน MIT, คีย์เวิร์ด openapi, typescript, backend และ 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 และ Manifest

Skills-Creator ไม่เพียงแค่เขียน YAML เท่านั้น แต่ยังบังคับใช้แนวปฏิบัติที่ดีที่สุดอีกด้วย มาวิเคราะห์โครงสร้าง SKILL.md ที่สร้างขึ้นกัน

ส่วน Frontmatter Block

---
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: ต้องเป็น kebab-case และไม่ซ้ำกันสำหรับแต่ละเซิร์ฟเวอร์ MCP
description: ใช้โดย Claude เพื่อตัดสินใจว่าจะเรียกใช้ Skill เมื่อใด
mcp.transport: stdio สำหรับเครื่องในตัว, http สำหรับเซิร์ฟเวอร์ระยะไกล
tools: แต่ละเครื่องมือจะกลายเป็นฟังก์ชันที่เรียกใช้ได้

Parameter schema:

type: string, number, boolean, array, object
required: บูลีน
default: ค่าเริ่มต้นที่ไม่บังคับ
description: สำคัญสำหรับการเลือกพารามิเตอร์ของ Claude

ส่วน Markdown Body

ส่วน Body จะจัดทำเอกสารรูปแบบการใช้งาน Skills-Creator สร้าง:

Header: # Skill Name
Overview: Skill ทำอะไร
Usage Examples: บล็อกโค้ดที่แสดงพรอมต์ของ Claude
Return Format: โครงสร้างเอาต์พุตที่คาดหวัง

เอกสารนี้จะถูกใช้โดย Claude Code เมื่อคุณรัน /help openapi-generator

ไฟล์ Manifest.json

Manifest เพิ่มเมตาดาต้าสำหรับการแชร์:

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

ทำไมถึงสำคัญ: เมื่อคุณเผยแพร่ไปยัง Marketplace เช่น SkillsMP, Manifest จะช่วยให้สามารถค้นหาและจัดการเวอร์ชันได้

การทดสอบ, การทำซ้ำ และการปรับใช้ Skill แบบกำหนดเองของคุณ

ขั้นตอนที่ 1: ใช้ตรรกะของ Skill

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 คือที่ที่ตรรกะทางธุรกิจของคุณอยู่ ใช้ไลบรารีเช่น ts-morph เพื่อแยกวิเคราะห์ TypeScript AST

ขั้นตอนที่ 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: {} // จะถูกแทนที่ด้วย 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 ไปยังเซิร์ฟเวอร์ Skill ของคุณ:

{
  "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 หากไม่ ให้ตรวจสอบบันทึก MCP ในแผงเอาต์พุตของ Claude Code

ขั้นตอนที่ 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 ที่มีอยู่
เพิ่มคำจำกัดความเครื่องมือใหม่
อัปเดตเวอร์ชัน manifest
เขียนคู่มือการโยกย้ายในส่วน markdown body

การสร้าง Skills ที่สร้าง Skills อื่นๆ

การเชื่อมโยง Meta-Skill

คุณสามารถสร้าง Skill ที่ใช้ Skills-Creator ภายในได้ ตัวอย่างเช่น skill-bootstrapper ที่สร้างโครงสร้างพื้นฐานของ Skill ใหม่โดยอิงตามเทมเพลต

// server/api/bootstrap-skill.post.ts
export default defineEventHandler(async (event) => {
  const { name, template } = await readBody(event);
  
  // เรียกใช้ Skills-Creator แบบโปรแกรม
  await $fetch('http://localhost:3001/generate-skill', {
    method: 'POST',
    body: {
      name,
      description: `Bootstrap ${template} skill`,
      template
    }
  });
  
  return { success: true, skillPath: `~/claude-skills/${name}` };
});

การจัดการเวอร์ชัน

ติดตามเวอร์ชันของ Skill ใน Git:

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

เมื่อ Skills-Creator อัปเดต Skill มันจะเพิ่มเวอร์ชันใน manifest บันทึกแต่ละเวอร์ชันเพื่อใช้สำหรับการย้อนกลับ

การทดสอบ Skills แบบโปรแกรม

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

รันการทดสอบก่อนปรับใช้การอัปเดต Skill

การเผยแพร่ Skill ของคุณ

ไปยัง Private Registry

บรรจุ Skill ของคุณเป็นแพ็คเกจ 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 Marketplace

สร้างบัญชีที่ skillsmp.com
รัน skills-mp publish ~/claude-skills/openapi-generator
CLI จะอ่าน manifest.json และอัปโหลด Skill ของคุณ

ผู้ใช้สามารถติดตั้งได้โดย:

skills-mp install openapi-generator

สรุป

Skills-Creator เปลี่ยนการพัฒนา Skill จากการกำหนดค่าด้วยตนเองเป็นการสร้างแบบอัตโนมัติ คุณอธิบายความตั้งใจ แล้วมันจะสร้าง boilerplate คุณมุ่งเน้นที่ตรรกะทางธุรกิจ แล้วมันจะจัดการการปฏิบัติตามโปรโตคอล MCP สำหรับทีมที่สร้างการรวม Claude Code แบบกำหนดเอง สิ่งนี้ช่วยลดเวลาในการพัฒนาลง 80% และรับประกันความสอดคล้องกันของคำจำกัดความ Skill เริ่มต้นด้วย Skill ง่ายๆ วันนี้ จากนั้นเชื่อมโยง Skills-Creator เข้ากับไปป์ไลน์การทำงานอัตโนมัติของคุณเพื่อขยายความสามารถของเอเจนต์ทั่วทั้งสแต็กของคุณ

เมื่อ Skill เหล่านั้นโต้ตอบกับ API ของคุณ ให้ตรวจสอบความถูกต้องด้วย Apidog เพื่อรับประกันสัญญา agent-tool ที่เชื่อถือได้

button