Communitygithub.com

mehdi214designer/server-studio

Enregistre un serveur de développement local dans l'application Server Studio. À utiliser lorsque vous créez, construisez ou configurez un projet qui exécute un serveur local (npm run dev, vite, next, php -S, wp-env, Local WP, un serveur statique, etc.), ou lorsque l'utilisateur dit « enregistrer ce serveur », « ajouter au tableau de bord », « ajouter à Server Studio », « enregistrer dans Server Studio », « inscrire le serveur ». Ajoute le nom du projet, la commande d'exécution, le dossier et l'URL/port pour qu'il apparaisse dans l'application Server Studio pour un lancement en un clic.

Qu'est-ce que server-studio ?

Cette compétence permet d'enregistrer automatiquement un serveur de développement local dans l'application Server Studio, un tableau de bord qui liste les serveurs locaux pour un démarrage/arrêt en un clic. Elle est conçue pour les développeurs utilisant des frameworks et outils comme Vite, Next.js, Astro, PHP intégré, WordPress (wp-env ou Local WP), Storybook, ou tout serveur statique. Lorsqu'un projet est créé ou configuré avec un serveur local, cette compétence capture le nom du projet, sa commande d'exécution, son dossier de travail et son URL/port. Elle applique une règle d'or : chaque projet se voit attribuer un port unique et permanent, garanti par un script d'assistance qui empêche les conflits de ports et verrouille le port pour les mises à jour futures. Le script s'intègre au flux de travail de l'assistant IA pour enregistrer automatiquement le serveur à la fin de la construction du projet, avec une notification concise à l'utilisateur. Server Studio est disponible sur macOS, Windows et Linux, et le tableau de bord se met à jour automatiquement en quelques secondes.

Compatible avec✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/mehdi214designer/server-studio/tree/HEAD/skill

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

Documentation

Enregistrer le serveur dans le tableau de bord

L'utilisateur exécute Server Studio, une application qui liste leurs serveurs locaux pour un démarrage/arrêt en un clic. Cette compétence ajoute un serveur à ce tableau de bord pour ne rien perdre.

Quand l'utiliser

Après avoir construit ou configuré quoi que ce soit qui s'exécute sur un port local, enregistrez-le. Exemples :

  • Vous avez créé un site/application et la commande de développement est npm run dev sur localhost:3000
  • Vous avez démarré un aperçu statique, un serveur Vite/Next/Astro, php -S, wp-env, Storybook, etc.
  • L'utilisateur demande de « sauvegarder le serveur », « l'ajouter au tableau de bord », « enregistrer ceci »

Si la commande d'exécution ou le port n'est pas encore évident, déterminez-le d'abord (vérifiez les scripts de package.json, le port par défaut du framework, ou ce que le serveur a affiché au démarrage). Ne devinez pas au hasard.

La règle d'or : un port permanent par projet

Chaque projet reçoit UN port fixe, unique, qui ne change JAMAIS. Une entrée enregistrée n'est utile que si son port reste correct, donc :

  1. Allouer une fois. Pour un nouveau projet, laissez le script choisir un port libre jamais utilisé avec --assign (ou passez une --url spécifique). Cela garantit qu'aucun deux projets ne partagent un port.

  2. Intégrez-le dans le projet pour que le serveur de développement utilise TOUJOURS ce port exact, jamais un port aléatoire. Utilisez l'option de port strict du framework afin qu'il échoue bruyamment plutôt que de dériver vers un autre port.

    Fusionner, jamais remplacer. S'il existe déjà une configuration là où vous écrivez, modifiez uniquement les clés du port et du port strict et laissez toutes les autres clés exactement comme elles sont. Un bloc server contient souvent les paramètres proxy, host, https ou hmr que quelqu'un a réglé à la main, et les perdre est bien pire qu'un port dérivant. Si vous ne pouvez pas effectuer cette modification de manière chirurgicale, arrêtez-vous et informez l'utilisateur plutôt que de réécrire le bloc.

    • Vite : dans vite.config, définissez server.port sur <n> et server.strictPort sur true, en conservant toutes les autres clés déjà présentes dans server. Uniquement s'il n'y a aucun bloc server du tout, ajoutez-en un contenant uniquement ces deux là. (Ou laissez la configuration intacte et utilisez vite --port <n> --strictPort dans le script de développement.)
    • Next.js : script de développement → next dev -p <n>
    • Astro : astro dev --port <n>
    • CRA / react-scripts : PORT=<n> react-scripts start
    • Node/Express simple : lisez process.env.PORT || <n> et documentez le port
    • PHP : php -S localhost:<n> Mettez le même port exact dans les --command et --url que vous enregistrez.
  3. Ne jamais réaffecter. Réexécuter la compétence pour le même projet conserve son port verrouillé — il ne fait que mettre à jour les autres champs. Le script applique cela ; ne passez pas --force sauf si l'utilisateur souhaite explicitement déplacer un projet vers un nouveau port.

Comment l'enregistrer

Exécutez le script d'assistance avec les champs que vous connaissez. Seuls --name (ou --url/--command) sont requis.

Pour un NOUVEAU projet, ajoutez --assign pour obtenir un port garanti unique, puis lisez la ligne PORT <n> qu'il affiche et intégrez ce port dans la configuration du projet (voir la règle d'or ci-dessus).

node "$HOME/.claude/skills/server-studio/register-server.js" \
  --name "Nom du projet" \
  --project "À quoi il sert" \
  --folder "WordPress" \
  --cwd "/chemin/absolu/vers/projet" \
  --command "npm run dev -- --port 3001 --strictPort" \
  --url "localhost:3001" \
  --tag "Vite" \
  --note "quoi que ce soit à retenir, ex. identifiants" \
  --assign

Guide des champs :

  • --name — étiquette courte, ex. « Site Portfolio »
  • --project — le projet/tâche auquel il appartient
  • --folder — nom du dossier sous lequel le classer, créé s'il n'existe pas encore (affiché dans la barre latérale). --category fonctionne toujours comme alias pour les anciens appelants.
  • --cwd — dossier absolu du projet ; la commande d'exécution s'y exécute
  • --command — la commande exacte qui démarre le serveur (c'est ce que le bouton Exécuter lance)
  • --url — adresse ou port nu (3000 fonctionne, devient localhost:3000)
  • --tag — petit détail : Vite, MAMP, Next, php
  • --note — rappels optionnels (identifiants, pièges)

Comportement

  • Le script fait correspondre un projet existant par dossier (cwd) ou nom. S'il est trouvé, il met à jour cette entrée mais conserve son port verrouillé ; sinon, il ajoute une nouvelle entrée. Sans danger à exécuter plusieurs fois, il ne créera pas de doublons et ne déplacera pas le port d'un projet.
  • Les ports sont uniques parmi toutes les entrées. --assign choisit le port libre le plus bas à partir de 3001.
  • Le script affiche PORT <n> — utilisez ce numéro lors du câblage de la configuration de développement du projet.
  • Les données sont écrites dans le fichier de données de Server Studio : ~/Library/Application Support/Server Studio/data.json sur macOS, %APPDATA%\Server Studio\data.json sur Windows, ~/.config/server-studio/data.json sur Linux.
  • Le tableau de bord se met à jour automatiquement toutes les quelques secondes, donc les entrées nouvelles/mises à jour apparaissent d'elles-mêmes.

Comportement par défaut pour l'assistant

Lorsque vous terminez la construction de quelque chose qui a un serveur local, enregistrez-le automatiquement et informez l'utilisateur en une ligne de ce que vous avez enregistré. Restez décontracté, par exemple « « X » a été enregistré dans votre Server Studio, rechargez l'onglet pour l'exécuter. » Ne sautez l'enregistrement que s'il n'y a vraiment aucun serveur local impliqué.

Skills associés