mehdi214designer/server-studio

Guardar servidor en el panel

El usuario ejecuta Server Studio, una aplicación que lista sus servidores locales para iniciarlos/detenerlos con un clic. Esta habilidad añade un servidor a ese panel para que nada se pierda.

Cuándo usarla

Después de que construyas o configures cualquier cosa que se ejecute en un puerto local, regístralo. Ejemplos:

• Has creado un sitio/aplicación y el comando de desarrollo es npm run dev en localhost:3000
• Has iniciado una vista previa estática, un servidor Vite/Next/Astro, php -S, wp-env, Storybook, etc.
• El usuario pide 'guardar el servidor', 'añadirlo al panel', 'registrar esto'

Si el comando de ejecución o el puerto no son obvios todavía, averígualos primero (revisa los scripts de package.json, el puerto por defecto del framework, o lo que imprimió el servidor al iniciarse). No adivines a lo loco.

La regla de oro: un puerto permanente por proyecto

Cada proyecto tiene UN puerto fijo y único que NUNCA cambia. Una entrada guardada solo es útil si su puerto se mantiene correcto, así que:

1. Asigna una vez. Para un proyecto nuevo, deja que el script elija un puerto libre nunca usado con --assign (o pasa un --url específico). Garantiza que no dos proyectos compartan puerto.

2. Incorpóralo al proyecto para que el servidor de desarrollo SIEMPRE use ese puerto exacto, nunca uno aleatorio. Usa la opción de puerto estricto del framework para que falle de forma evidente en lugar de derivar a otro puerto.

   Fusiona, nunca reemplaces. Si ya existe configuración donde estás escribiendo, cambia solo las claves de puerto y puerto estricto y deja todas las demás claves exactamente como están. Un bloque server a menudo contiene ajustes de proxy, host, https o hmr que alguien ajustó manualmente, y perderlos es mucho peor que un puerto que derive. Si no puedes hacer esa edición quirúrgicamente, detente y dile al usuario en lugar de reescribir el bloque.

   • Vite: en vite.config, establece server.port a <n> y server.strictPort a true, manteniendo cualquier otra clave ya presente en server. Solo si no hay ningún bloque server, añade uno que contenga solo esas dos. (O deja la configuración intacta y usa vite --port <n> --strictPort en el script de desarrollo).
   • Next.js: script de desarrollo → next dev -p <n>
   • Astro: astro dev --port <n>
   • CRA / react-scripts: PORT=<n> react-scripts start
   • Node/Express plano: lee process.env.PORT || <n> y documenta el puerto
   • PHP: php -S localhost:<n> Pon el mismo puerto exacto en --command y --url que registres.

3. Nunca reasignes. Volver a ejecutar la habilidad para el mismo proyecto mantiene su puerto bloqueado — solo actualiza los otros campos. El script lo aplica; no pases --force a menos que el usuario quiera explícitamente mover un proyecto a un nuevo puerto.

Cómo guardarlo

Ejecuta el script auxiliar con los campos que conozcas. Solo se requiere --name (o --url/--command).

Para un proyecto NUEVO, añade --assign para obtener un puerto garantizado único, luego lee la línea PORT <n> que imprime e incorpora ese puerto en la configuración del proyecto (consulta la regla de oro anterior).

node "$HOME/.claude/skills/server-studio/register-server.js" \
  --name "Nombre del Proyecto" \
  --project "Para qué sirve" \
  --folder "WordPress" \
  --cwd "/ruta/absoluta/al/proyecto" \
  --command "npm run dev -- --port 3001 --strictPort" \
  --url "localhost:3001" \
  --tag "Vite" \
  --note "cualquier cosa para recordar, ej. inicio de sesión" \
  --assign

Guía de campos:

• --name — etiqueta corta, ej. "Sitio Portafolio"
• --project — el proyecto/tarea al que pertenece
• --folder — nombre de la carpeta bajo la que archivarlo, se crea si no existe (se muestra en la barra lateral). --category sigue funcionando como alias para versiones anteriores.
• --cwd — ruta absoluta de la carpeta del proyecto; el comando de ejecución se ejecuta aquí
• --command — el comando exacto que inicia el servidor (esto es lo que ejecuta el botón Ejecutar)
• --url — dirección o puerto simple (3000 funciona, se convierte en localhost:3000)
• --tag — detalle pequeño: Vite, MAMP, Next, php
• --note — recordatorios opcionales (credenciales, problemas conocidos)

Comportamiento

• El script empareja un proyecto existente por carpeta (cwd) o nombre. Si lo encuentra, actualiza esa entrada pero mantiene su puerto bloqueado; de lo contrario añade una nueva. Es seguro ejecutarlo repetidamente, no creará duplicados ni moverá el puerto de un proyecto.
• Los puertos son únicos en todas las entradas. --assign elige el puerto libre más bajo empezando desde 3001.
• El script imprime PORT <n> — usa ese número al conectar la configuración de desarrollo del proyecto.
• Los datos se escriben en el archivo de datos de Server Studio: ~/Library/Application Support/Server Studio/data.json en macOS, %APPDATA%\Server Studio\data.json en Windows, ~/.config/server-studio/data.json en Linux.
• El panel se actualiza automáticamente cada pocos segundos, así que las entradas nuevas/actualizadas aparecen solas.

Comportamiento por defecto para el asistente

Cuando termines de construir algo que tenga un servidor local, guárdalo automáticamente e informa al usuario en una línea lo que has guardado. Mantenlo informal, ej. "Guardado 'X' en tu Server Studio, recarga la pestaña para ejecutarlo." Solo omite guardar si realmente no hay ningún servidor local involucrado.