·page-inspector
*

page-inspector

Capturez la mise en page, les styles et la structure actuels à partir d'une page Web en direct à l'aide de Chrome DevTools MCP. À utiliser lorsque vous avez besoin de comprendre l'interface utilisateur existante avant d'apporter des modifications : capture des captures d'écran, la structure DOM, les styles calculés et les propriétés de mise en page. Utile comme base de référence avant la mise en œuvre pour les modifications affectant le frontend ou l'interface utilisateur.

19Installations·1Tendance·@delexw

Installation

$npx skills add https://github.com/delexw/claude-code-misc --skill page-inspector

Comment installer page-inspector

Installez rapidement le skill IA page-inspector dans votre environnement de développement via la ligne de commande

  1. Ouvrir le Terminal: Ouvrez votre terminal ou outil de ligne de commande (Terminal, iTerm, Windows Terminal, etc.)
  2. Exécuter la commande d'installation: Copiez et exécutez cette commande : npx skills add https://github.com/delexw/claude-code-misc --skill page-inspector
  3. Vérifier l'installation: Une fois installé, le skill sera automatiquement configuré dans votre environnement de programmation IA et prêt à être utilisé dans Claude Code, Cursor ou OpenClaw

Source : delexw/claude-code-misc.

Connects to a running Chrome browser session via Chrome DevTools MCP, navigates to the target page, and captures a comprehensive snapshot of the current layout, styles, and structure. This output serves as a baseline reference for implementation.

For the main content area and key UI elements, capture:

Capturez la mise en page, les styles et la structure actuels à partir d'une page Web en direct à l'aide de Chrome DevTools MCP. À utiliser lorsque vous avez besoin de comprendre l'interface utilisateur existante avant d'apporter des modifications : capture des captures d'écran, la structure DOM, les styles calculés et les propriétés de mise en page. Utile comme base de référence avant la mise en œuvre pour les modifications affectant le frontend ou l'interface utilisateur. Source : delexw/claude-code-misc.

Faits (prêts à citer)

Champs et commandes stables pour les citations IA/recherche.

Commande d'installation
npx skills add https://github.com/delexw/claude-code-misc --skill page-inspector
Catégorie
*Créativité
Vérifié
Première apparition
2026-03-09
Mis à jour
2026-03-10

Browse more skills from delexw/claude-code-misc

Réponses rapides

Qu'est-ce que page-inspector ?

Capturez la mise en page, les styles et la structure actuels à partir d'une page Web en direct à l'aide de Chrome DevTools MCP. À utiliser lorsque vous avez besoin de comprendre l'interface utilisateur existante avant d'apporter des modifications : capture des captures d'écran, la structure DOM, les styles calculés et les propriétés de mise en page. Utile comme base de référence avant la mise en œuvre pour les modifications affectant le frontend ou l'interface utilisateur. Source : delexw/claude-code-misc.

Comment installer page-inspector ?

Ouvrez votre terminal ou outil de ligne de commande (Terminal, iTerm, Windows Terminal, etc.) Copiez et exécutez cette commande : npx skills add https://github.com/delexw/claude-code-misc --skill page-inspector Une fois installé, le skill sera automatiquement configuré dans votre environnement de programmation IA et prêt à être utilisé dans Claude Code, Cursor ou OpenClaw

Où se trouve le dépôt source ?

https://github.com/delexw/claude-code-misc