Skip to content
AI Primer
💻 Developer Tools

diy-mcp-connector

sshh12by sshh1222 days ago11

Builds a dedicated MCP server for a single web app by walking through API discovery, tool design, security review, implementation, testing, and deployment. Use when the user asks to create an MCP server, connect a web app to Claude Code, or build a tool integration for any web app.

Install

npx skills add https://github.com/sshh12/claude-plugins --skill diy-mcp-connector
Show step-by-step
  1. 1

    Open your terminal

    • Mac: Press ⌘ Space, type "Terminal", press Enter
    • Windows: Press Win R, type "cmd", press Enter
  2. 2

    Paste the command above and press Enter

    Use the Copy command button, then paste in your terminal (Mac: ⌘V, Windows: Ctrl V).

  3. 3

    Restart Claude Code

    Close and reopen Claude Code, or start a new session, so it picks up the new skill.

Where it lives
~/.claude/skills/sshh12--claude-plugins--plugins--diy-mcp-connector--skills--diy-mcp-connector/
├── SKILL.md
└── ... (skill resource files)
View on GitHub

Comments

X@Eito_Miyamura

"RT @ShrivuShankar: built a skill to convert any web app into an agent-friendly mcp server: using this to churn out…"

Always review skill code before installing. Third-party skills may contain scripts that run on your machine.

First 3 tasks to try

  1. 1Ask the user which web app they want to connect
    Ask the user which web app they want to connect
  2. 2Detect available browser tools (claude mcp list) — see references/1-capture-a
    Detect available browser tools (`claude mcp list`) — see `references/1-capture-api.md` for the detection table and preference order
  3. 3If no browser tools found, ask if they have HAR files or want to set up a browse
    If no browser tools found, ask if they have HAR files or want to set up a browser tool (Claude for Chrome is the easiest)

Related skills

🔧 Operations

kanban-orchestrator

Decomposition playbook + specialist-roster conventions + anti-temptation rules for an orchestrator profile routing work through Kanban. The "don't do the work yourself" rule and the basic lifecycle are auto-injected into every kanban worker's system prompt; this skill is the deeper playbook when you're specifically playing the orchestrator role.

by NousResearch · 8 days ago146.2k
🔧 Operations

kanban-worker

Pitfalls, examples, and edge cases for Hermes Kanban workers. The lifecycle itself is auto-injected into every worker's system prompt as KANBAN_GUIDANCE (from agent/prompt_builder.py); this skill is what you load when you want deeper detail on specific scenarios.

by NousResearch · 8 days ago146.2k
🎨 Design

p5js

p5.js sketches: gen art, shaders, interactive, 3D.

by NousResearch · 11 days ago146.2k
🎨 Design

frontend-design

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.

by anthropics · 20 days ago132.8k