Skill MCP Claude

技能经理

使用Claude Code CLI集成管理Claude MCP技能的可视化web界面。

项目概述

该项目提供了一个基于浏览器的UI，用于管理MCP（模型上下文协议）服务器中的技能。技能是基于降价的指令集，克劳德可以按需加载以获得专业知识。

建筑

┌─────────────────────────────────────────────────────────────────┐
│                        Skills Manager                           │
├─────────────────────────────────────────────────────────────────┤
│                                                                 │
│   ┌──────────────────┐         ┌──────────────────────────┐    │
│   │  Claude Desktop  │         │     Browser UI           │    │
│   │  (MCP Client)    │         │  skills-manager.html     │    │
│   └────────┬─────────┘         └────────────┬─────────────┘    │
│            │                                │                   │
│            │ stdio/MCP                      │ HTTP REST         │
│            │                                │                   │
│   ┌────────▼─────────┐         ┌────────────▼─────────────┐    │
│   │   server.py      │         │  skills_manager_api.py   │    │
│   │   (MCP Server)   │         │  (Flask API :5050)       │    │
│   └────────┬─────────┘         └────────────┬─────────────┘    │
│            │                                │                   │
│            └────────────┬───────────────────┘                   │
│                         │                                       │
│                         ▼                                       │
│                  ┌──────────────┐                               │
│                  │   skills/    │                               │
│                  │  (folder)    │                               │
│                  └──────────────┘                               │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘

文件结构

skills-mcp/
├── server.py                 # MCP server (FastMCP) - connects to Claude Desktop
├── skills_manager_api.py     # Flask HTTP API server (port 5050)
├── skills_manager_app.py     # Standalone all-in-one app (for .exe build)
├── skills-manager.html       # Web UI (single-file, Tailwind + Lucide)
├── requirements.txt          # Python dependencies
├── build.bat                 # Windows build script for .exe
├── skills/                   # Skills directory
│   ├── my-skill/
│   │   ├── SKILL.md          # Main skill content
│   │   ├── _meta.json        # Metadata (tags, description)
│   │   ├── scripts/          # Optional helper scripts
│   │   └── references/       # Optional reference docs
│   └── another-skill/
│       └── ...
└── dist/                     # Built executable + assets
    ├── SkillsManager.exe
    ├── skills-manager.html
    └── README.md

设置

先决条件

• Python 3.10+
• Node.js（可选，用于Claude Code CLI）
• Claude Code CLI（可选，用于AI功能）

安装

cd skills-mcp
pip install -r requirements.txt

运行API服务器

python skills_manager_api.py

打开时间：http://localhost:5050

运行MCP服务器（适用于Claude Desktop）

当Claude Desktop启动时，MCP服务器会自动运行（在Claude_Desktop_config.json中配置）。

手动测试：

python server.py

发展

要编辑的关键文件

API终点

前端结构

UI是一个内嵌CSS和JavaScript的HTML文件：

• 情态动词：导入、文件夹浏览器、文件上传、生成、查看、Claude控制台
• 状态: skills[], selectedFolderPath, browsePathCache{}等等。
• 关键功能:

- browsePath(path) -导航文件系统 - importSelectedFolder() -将文件夹复制到技能/ - uploadFiles() -上传文件作为新技能 - generateSkill() -人工智能技能生成 - runConsoleCommand() -执行Claude提示

构建可执行文件

# Windows
build.bat

# Or manually
pip install pyinstaller
python -m PyInstaller --onefile --name "SkillsManager" --console ^
    --add-data "skills-manager.html;." skills_manager_app.py

输出： dist/SkillsManager.exe

技能格式

SKILL.md结构

---
name: skill-name
description: When Claude should use this skill
---

# Skill Name

## Overview
What this skill helps with.

## When to Use
- Trigger condition 1
- Trigger condition 2

## Quick Start
\`\`\`code
Example usage
\`\`\`

## Best Practices
- Practice 1
- Practice 2

## Examples
Practical examples here.

\_meta.json结构

{
  "name": "skill-name",
  "description": "One-line description",
  "tags": ["tag1", "tag2"],
  "sub_skills": [],
  "source": "imported"
}

Claude桌面配置

地点： %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "skills": {
      "command": "python",
      "args": ["C:/Users//skills-mcp/server.py"]
    }
  }
}

MCP工具（适用于Claude）

MCP服务器向Claude公开了这些工具：

已知问题/待办事项

• \[\]文件夹浏览器在初始加载时不显示驱动器号（从根驱动器开始）
• \[\]覆盖现有技能前无需确认
• \[\]文件上传不会从拖放中保留文件夹结构
• \[\]Claude控制台输出没有语法高亮显示
• \[\]没有版本控制或备份技能

技术栈

• 后端：Python 3.11、Flask、Flask CORS、FastMCP
• 前端：香草JS、顺风CSS（CDN）、Lucide Icons（CDN）
• 构建：PyInstaller
• 协议：MCP（模型上下文协议）