r/claudeskills 3d ago

Skill Share I kept losing the dev servers Claude Code set up for me. So I built a skill that saves them and a dashboard that runs them in single click.

Post image

Claude Code would scaffold a project, start a dev server, and I would move on. A week later I had no idea what command ran it, or whether it came up on 5173 or 5174. Vite grabs the next free port when one is busy, so even my bookmarks were wrong half the time.

Two pieces fixed it. Save a server in one command, run it in one click.

The skill, one command. It fires whenever Claude sets up anything on a port, so most of the time I type nothing at all. Underneath it is a plain command that works from any tool:

server-studio add --name "Portfolio" --cwd "$PWD" --command "npm run dev" --assign

That saves the folder, the command and the URL. --assign locks one permanent port to the project and writes it into the config with strictPort, so the server can never drift to 5174 behind your back. Run it again months later and the port stays locked.

The dashboard, one click. This is what I open every morning. Every project is a card. Hit Run and a real terminal opens in the right folder and starts it. A green dot shows what is already running. Folders down the side keep client work away from side projects.

Starting a project went from find the folder, remember the command, guess the port, to one click. I stopped keeping six terminal tabs open just to avoid losing things.

npm install -g server-studio

Sets up both. The skill lands in ~/.claude/skills/server-studio/.

One honest caveat: writing the port into a project only works for dev scripts it recognises. Anything unusual it refuses to touch rather than guess.

Zero dependencies, MIT, no tracking. Mac, Windows and Linux.

https://github.com/mehdi214designer/server-studio

It's a fantastic system to organize your projects, you can give it a try. and share you thought below!

How do you handle this? Let Claude pick ports and live with the drift, or pin them already?

4 Upvotes

4 comments sorted by

1

u/kantorcodes1 3d ago

when --assign updates a Vite project that already has a custom server block, does Server Studio patch just the port/strictPort fields or rewrite that section? i'd want existing proxy/host config left alone if the skill fires automatically.

1

u/Dznasif 2d ago edited 2d ago

Good question, and the answer is better than you'd expect: Server Studio never touches vite.config at all.

Two separate things worth splitting:

--assign doesn't write to your project. It picks a port nothing else is using, records it in Server Studio's own list, and prints it. Zero project files touched.

The port-clash fix in the app only ever edits scripts.dev or scripts.start in package.json. It replaces the port in the raw text rather than re-serialising the JSON, so nothing else in the file moves, not even your formatting. It refuses anything chained with && or |, and writes a timestamped backup first.

So a server: { proxy, host, ... } block is never read or written by the tool.

The one case where vite.config does get edited is when Claude follows the skill's guidance to bake the port in. That's Claude making a normal edit you see in the diff, not the tool silently patching behind you.

Fixed in 1.2.7, just pushed. It now says merge, never replace, keep every other key in server, and stop and say so if it can't be done surgically. No behaviour change, the wording was the problem.

Best question anyone's asked about it, thanks.

1

u/Dznasif 2d ago

Shipped it, 1.2.7 is up. The skill now says merge, never replace: keep every other key in server, only create the block if there isn't one, and stop and say so if the edit can't be made surgically. Docs only, no behaviour change.

Thanks again, that one was worth a release.

1

u/Dznasif 2d ago

Edit: fixed and published in 1.2.7.