vscode-port-monitor-config

Q: How do I install vscode-port-monitor-config?

Run npx skills add https://github.com/libukai/awesome-agent-skills --skill vscode-port-monitor-config in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/vscode-port-monitor-config/ (personal) or .claude/skills/vscode-port-monitor-config/ (project).

by libukaiFrontend & Design

This skill should be used when configuring VS Code Port Monitor extension for development server monitoring. Use when the user asks to "set up port monitoring for Vite", "monitor my dev server ports", "configure port monitor for Next.js", "track which ports are running", "set up multi-port monitoring", "monitor frontend and backend ports", or "check port status in VS Code". Provides ready-to-use configuration templates for Vite (5173), Next.js (3000), and microservices architectures with troubleshooting guidance.

Installs: 507
Last 24h: —
Trending rank: —
Security: Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/libukai/awesome-agent-skills --skill vscode-port-monitor-config

01
Install
Run the command in your project. The CLI asks which agents to install for.
02
Describe the task
Ask your agent for something this skill covers. It loads vscode-port-monitor-config automatically when relevant.
03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

VS Code Port Monitor Configuration

Configure the VS Code Port Monitor extension to monitor development server ports in real-time with visual status indicators in your status bar.

Extension: dkurokawa.vscode-port-monitor

Core Concepts

Port Monitor Features

🔍 Real-time monitoring - Live status bar display
🏷️ Intelligent configuration - Supports arrays, ranges, well-known ports
🛑 Process management - Kill processes using ports
🎨 Customizable display - Icons, colors, positioning
📊 Multiple groups - Organize ports by service/project

Status Icons

🟢 = Port is in use (service running)
⚪️ = Port is free (service stopped)

Configuration Workflow

Step 1: Create Configuration File

Add configuration to .vscode/settings.json:

{
  "portMonitor.hosts": {
    "GroupName": {
      "port": "label",
      "__CONFIG": { ... }
    }
  }
}

Step 2: Choose a Template

Select from common scenarios (see examples/ directory):

Scenario	Template File	Ports
Vite basic	`vite-basic.json`	5173 (dev)
Vite with preview	`vite-with-preview.json`	5173 (dev), 4173 (preview)
Full stack	`fullstack.json`	5173, 4173, 3200
Next.js	`nextjs.json`	3000 (app), 3001 (api)
Microservices	`microservices.json`	Multiple groups

Step 3: Apply Configuration

Copy template content to .vscode/settings.json
Customize port numbers and labels for your project
Save file - Port Monitor will auto-reload

Quick Start Examples

Example 1: Vite Project

{
  "portMonitor.hosts": {
    "Development": {
      "5173": "dev",
      "__CONFIG": {
        "compact": true,
        "bgcolor": "blue",
        "show_title": true
      }
    }
  },
  "portMonitor.statusIcons": {
    "inUse": "🟢 ",
    "free": "⚪️ "
  }
}

Display: Development: [🟢 dev:5173]

Example 2: Microservices

{
  "portMonitor.hosts": {
    "Frontend": {
      "3000": "react",
      "__CONFIG": { "compact": true, "bgcolor": "blue", "show_title": true }
    },
    "Backend": {
      "3001": "api",
      "5432": "postgres",
      "__CONFIG": { "compact": true, "bgcolor": "yellow", "show_title": true }
    }
  }
}

Display: Frontend: [🟢 react:3000] Backend: [🟢 api:3001 | 🟢 postgres:5432]

Best Practices

✅ Do

Use descriptive labels: "5173": "dev" not "5173": "5173"
Add space after emojis: "🟢 " for better readability
Group related ports: Frontend, Backend, Database
Use compact mode for cleaner status bar
Set reasonable refresh interval (3000-5000ms)

❌ Don't

Reverse port-label format: "dev": 5173 ❌
Use empty group names
Set refresh interval too low (<1000ms)
Monitor too many ports (>10 per group)

Common Issues

Port Monitor Not Showing

Check extension is installed: code --list-extensions | grep port-monitor
Verify .vscode/settings.json syntax
Reload VS Code: Cmd+Shift+P → "Reload Window"

Configuration Errors

Check port-label format is correct:

// ✅ Correct
{"5173": "dev"}

// ❌ Wrong
{"dev": 5173}

For more troubleshooting, see references/troubleshooting.md

Reference Materials

Configuration Options: references/configuration-options.md - Detailed option reference
Troubleshooting: references/troubleshooting.md - Common issues and solutions
Integrations: references/integrations.md - Tool-specific configurations
Advanced Config: references/advanced-config.md - Pattern matching, custom emojis
Examples: examples/ - Ready-to-use JSON configurations

Workflow Summary

Choose template from examples/ directory based on your stack
Copy to .vscode/settings.json
Customize port numbers and labels
Save and verify status bar display
Troubleshoot if needed using references/troubleshooting.md

Port Monitor will automatically detect running services and update the status bar in real-time.

FAQ

What does the vscode-port-monitor-config skill do?

How do I install vscode-port-monitor-config?

Run npx skills add https://github.com/libukai/awesome-agent-skills --skill vscode-port-monitor-config in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/vscode-port-monitor-config/ (personal) or .claude/skills/vscode-port-monitor-config/ (project).

Which AI agents can use vscode-port-monitor-config?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is vscode-port-monitor-config safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains vscode-port-monitor-config?

It is published by libukai in libukai/awesome-agent-skills. It has 507 recorded installs.

More from libukai/awesome-agent-skills

View all →

vscode-sftp-config

libukai/awesome-agent-skills

This skill should be used when setting up SFTP deployment for static websites to production servers, including converting projects from Docker/Express to static hosting, deploying Vue/React/Angular builds, setting up Slidev presentations, or configuring Hugo/Jekyll/Gatsby sites. Use this when the user asks to "setup SFTP deployment", "deploy static site to server", "configure Nginx for static files", "convert from Docker to static hosting", "deploy Vue build to production", "setup subdomain hosting", or "configure SFTP in VS Code". Provides SFTP configuration templates and production-ready Nginx configurations with security headers and caching.

DevOps & Cloud557 installs

vscode-httpyac-config

libukai/awesome-agent-skills

Configure VSCode with httpYac for API testing and automation. This skill should be used specifically when converting API documentation to executable .http files (10+ endpoints), setting up authentication flows with pre-request scripts, implementing request chaining with response data, organizing multi-file collections with environment management, or establishing Git-based API testing workflows with CI/CD integration.

Backend & APIs513 installs

obsidian-to-x

libukai/awesome-agent-skills

发布内容和文章到 X (Twitter)。支持常规推文(文字/图片/视频)和 X Articles(长文 Markdown)。使用真实 Chrome 浏览器绕过反机器人检测。当用户说"发推"、"发到 X"、"发到 twitter"、"分享到 X"、"分享到 twitter"、"发 tweet"、"同步到 X"、"发布到 X"、提到"X Articles"、想从 Obsidian 笔记发布长文内容、或需要转换 Obsidian Markdown 到 X 格式时使用。适用于所有 X/Twitter 发布任务。

Productivity & Automation507 installs

mcp-config

libukai/awesome-agent-skills

Configure MCP (Model Context Protocol) servers for Claude Code. Manage MCP servers at user or project scope with best practices to avoid context pollution.

AI & Agents505 installs

Popular frontend & design skills

View category →

setup-matt-pocock-skills

mattpocock/skills

Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.

Frontend & Design1.1M installs

frontend-design

anthropics/skills

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

OfficialFrontend & Design1M installs

hyperframes-animation

heygen-com/hyperframes

All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.

Frontend & Design1M installs

prototype

mattpocock/skills

Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.

Frontend & Design999.2K installs

hyperframes-core

heygen-com/hyperframes

The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.

Frontend & Design930.5K installs

vercel-react-best-practices

vercel-labs/agent-skills

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

OfficialFrontend & Design843.1K installs

vscode-port-monitor-config

Install

Install

Describe the task

Review the result

SKILL.md

VS Code Port Monitor Configuration

Core Concepts

Port Monitor Features

Status Icons

Configuration Workflow

Step 1: Create Configuration File

Step 2: Choose a Template

Step 3: Apply Configuration

Quick Start Examples

Example 1: Vite Project

Example 2: Microservices

Best Practices

✅ Do

❌ Don't

Common Issues

Port Monitor Not Showing

Configuration Errors

Reference Materials

Workflow Summary

FAQ

More from libukai/awesome-agent-skills

Popular frontend & design skills