Guide d'utilisation

Votre jeton complet (affiché une seule fois lors de l'inscription, et envoyé par email) a la forme :

https://sc.rjtx.fr/mcp/VOTRE_JETON

Perdu ? Contactez l'administrateur pour une révocation, puis réinscrivez-vous pour obtenir un nouveau jeton.

Codex (OpenAI) — compatible via Codex CLI, l'extension Codex pour IDE et l'app ChatGPT desktop (configuration partagée dans ~/.codex/config.toml) :

codex mcp add screenshot --url https://sc.rjtx.fr/mcp/VOTRE_JETON

Ou directement :

[mcp_servers.screenshot]
url = "https://sc.rjtx.fr/mcp/VOTRE_JETON"

Le chat web chatgpt.com ne permet pas d'ajouter un serveur MCP par URL directement — uniquement via un connecteur enregistré. Utilisez Codex CLI, l'extension IDE, ou l'app ChatGPT desktop.

Toutes vos captures sont automatiquement rangées dans votre espace personnel — retrouvez-les, téléchargez-les ou supprimez-les depuis votre tableau de bord.

• « Capture une image de ma page d'accueil en desktop »
• « Documente le flux de connexion de mon appli : login, remplissage, résultat »
• « Prends une capture mobile de la page /pricing »
• « Regroupe les 3 dernières captures dans un ZIP »

screenshot-mcp tourne sur sc.rjtx.fr : seules les URLs accessibles publiquement (ou sur ce même serveur) peuvent être capturées — pas une application qui tourne uniquement sur votre propre machine.

Copiez ce fichier dans .claude/skills/screenshot-docs/SKILL.md (à la racine de votre projet, ou dans ~/.claude/skills/screenshot-docs/SKILL.md pour l'avoir sur tous vos projets). Claude l'utilisera automatiquement dès qu'on lui demande une capture d'écran ou une illustration d'interface.

---
name: screenshot-docs
description: Capture des captures d'écran ou des scénarios interactifs d'une application web via le serveur MCP screenshot-mcp, pour illustrer de la documentation. Utiliser quand on demande une capture d'écran, une illustration d'interface, ou de documenter visuellement un flux utilisateur.
---

# Capture d'écran via screenshot-mcp

Ce skill explique comment utiliser les outils du serveur MCP `screenshot` pour produire
des captures d'écran destinées à de la documentation.

## Outils disponibles

- `mcp__screenshot__screenshot_url` — capture directe d'une URL.
- `mcp__screenshot__run_scenario_inline` — scénario multi-étapes (navigation, clics, formulaires,
  captures intermédiaires).
- `mcp__screenshot__run_scenario_file` — rejoue un scénario JSON versionné dans /scenarios.
- `mcp__screenshot__create_zip` — regroupe plusieurs captures dans un ZIP téléchargeable.
- `mcp__screenshot__get_file` — récupère un fichier déjà généré.
- `mcp__screenshot__list_viewports` / `mcp__screenshot__list_step_types` — références disponibles.

## Bonnes pratiques

- Ce serveur ne peut capturer que des URLs accessibles publiquement (ou sur ce même serveur) —
  pas une application qui ne tourne que sur la machine de l'utilisateur.
- Viewport par défaut `desktop` (1440×900) ; utiliser `mobile` (390×844) pour du responsive.
- Toujours `wait_for_selector` avant une capture pour éviter un état de chargement incomplet.
- `full_page: true` pour capturer une page longue en entier.
- Donner des noms de fichiers explicites (`output_filename`) — chaque capture reste retrouvable
  depuis le tableau de bord personnel de l'utilisateur (https://sc.rjtx.fr/dashboard).

## Exemple : capture simple

« Capture une image de https://mon-app.rjtx.fr en desktop »
→ `screenshot_url(url="https://mon-app.rjtx.fr", output_filename="accueil.png", viewport="desktop")`

## Exemple : scénario multi-étapes

« Documente le flux de connexion : page de login, saisie, résultat »
→ `run_scenario_inline(scenario={
    "name": "Connexion",
    "steps": [
      {"type": "goto", "url": "https://mon-app.rjtx.fr/login"},
      {"type": "screenshot", "output": "01_login.png", "label": "Formulaire"},
      {"type": "fill", "selector": "#email", "value": "demo@exemple.fr"},
      {"type": "fill", "selector": "#password", "value": "demo"},
      {"type": "click", "selector": "button[type=submit]"},
      {"type": "wait_for_selector", "selector": ".dashboard"},
      {"type": "screenshot", "output": "02_dashboard.png", "label": "Tableau de bord"}
    ]
  })`

## Après la capture

Regrouper plusieurs captures avec `create_zip` avant de les intégrer dans un document, ou les
télécharger individuellement depuis le tableau de bord personnel.

À coller tel quel (en adaptant l'URL et les pages) dans Claude Code ou Codex — fonctionne à l'identique dans les deux, le prompt ne fait référence à aucun outil spécifique à un client.

Génère la documentation de l'application https://mon-app.rjtx.fr au format Markdown
(docs/app.md), en illustrant chaque page/flux clé par des captures d'écran, selon ces étapes :

1. Génère un scénario Playwright (JSON) par page ou flux à documenter (accueil, connexion,
   tableau de bord, etc.), avec des captures nommées explicitement (01_accueil.png,
   02_connexion.png, ...).
2. Exécute chaque scénario via le serveur MCP screenshot pour produire les captures.
3. Une fois tous les scénarios joués, regroupe l'ensemble des fichiers produits dans un seul ZIP.
4. Récupère le contenu de ce ZIP.
5. Décompresse-le dans un sous-dossier "captures/" à la racine du fichier Markdown généré.

Rédige ensuite le Markdown en insérant chaque image avec un chemin relatif captures/<nom>.png,
une légende décrivant l'écran, et une brève description du flux illustré.

Ce que fait l'agent à chaque étape (outils MCP réellement appelés) :