d3js-visualization

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.

```

┌─────────────────────────────────────────────────────────────────┐

│ 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

└── .vscode/ # VS Code configuration

├── settings.json

└── launch.json

```

Prerequisites

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

Installation

```bash

cd skills-mcp

pip install -r requirements.txt

```

Running the API Server

```bash

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:

```bash

python server.py

```

Key Files to Edit

| File | Purpose |

|------|---------|

| skills-manager.html | Frontend UI (vanilla JS, Tailwind CSS, Lucide icons) |

| skills_manager_api.py | Backend REST API (Flask) |

| server.py | MCP server for Claude Desktop integration |

| skills_manager_app.py | Standalone app (combines API + launcher for .exe) |

API Endpoints

| Method | Endpoint | Description |

|--------|----------