Skills Manager

A visual web interface for managing Claude MCP Skills with Claude Code CLI integration.

Project Overview

This project provides a browser-based UI for managing skills in an MCP (Model Context Protocol) server. Skills are markdown-based instruction sets that Claude can load on-demand to gain specialized knowledge.

Architecture

┌─────────────────────────────────────────────────────────────────┐
│                        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)    │                               │
│                  └──────────────┘                               │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘

File Structure

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
└── .vscode/                  # VS Code configuration
    ├── settings.json
    └── launch.json

Setup

Prerequisites

• Python 3.10+
• Node.js (optional, for Claude Code CLI)
• Claude Code CLI (optional, for AI features)

Installation

cd skills-mcp
pip install -r requirements.txt

Running the API Server

python skills_manager_api.py

Opens at: http://localhost:5050

Running the MCP Server (for Claude Desktop)

The MCP server runs automatically when Claude Desktop starts (configured in claude_desktop_config.json).

Manual test:

python server.py

Development

Key Files to Edit

API Endpoints

Frontend Structure

The UI is a single HTML file with embedded CSS and JavaScript:

• Modals: Import, Folder Browser, File Upload, Generate, View, Claude Console
• State: skills[], selectedFolderPath, browsePathCache{}, etc.
• Key Functions:
  • browsePath(path) - Navigate filesystem
  • importSelectedFolder() - Copy folder to skills/
  • uploadFiles() - Upload files as

...