Erfassen Sie mit Chrome DevTools MCP das aktuelle Seitenlayout, die Stile und die Struktur einer Live-Webseite. Verwenden Sie diese Option, wenn Sie die vorhandene Benutzeroberfläche verstehen müssen, bevor Sie Änderungen vornehmen – erfasst Screenshots, DOM-Struktur, berechnete Stile und Layouteigenschaften. Nützlich als Basis vor der Implementierung für Änderungen, die sich auf das Frontend oder die Benutzeroberfläche auswirken.
Installieren Sie den KI-Skill page-inspector schnell in Ihrer Entwicklungsumgebung über die Kommandozeile
Quelle: 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:
Erfassen Sie mit Chrome DevTools MCP das aktuelle Seitenlayout, die Stile und die Struktur einer Live-Webseite. Verwenden Sie diese Option, wenn Sie die vorhandene Benutzeroberfläche verstehen müssen, bevor Sie Änderungen vornehmen – erfasst Screenshots, DOM-Struktur, berechnete Stile und Layouteigenschaften. Nützlich als Basis vor der Implementierung für Änderungen, die sich auf das Frontend oder die Benutzeroberfläche auswirken. Quelle: delexw/claude-code-misc.
Öffnen Sie Ihr Terminal oder Kommandozeilen-Tool (Terminal, iTerm, Windows Terminal, etc.) Kopieren Sie diesen Befehl und führen Sie ihn aus: npx skills add https://github.com/delexw/claude-code-misc --skill page-inspector Nach der Installation wird der Skill automatisch in Ihrer KI-Programmierumgebung konfiguriert und ist bereit zur Verwendung in Claude Code, Cursor oder OpenClaw
Stabile Felder und Befehle für KI/Such-Zitate.
npx skills add https://github.com/delexw/claude-code-misc --skill page-inspectorErfassen Sie mit Chrome DevTools MCP das aktuelle Seitenlayout, die Stile und die Struktur einer Live-Webseite. Verwenden Sie diese Option, wenn Sie die vorhandene Benutzeroberfläche verstehen müssen, bevor Sie Änderungen vornehmen – erfasst Screenshots, DOM-Struktur, berechnete Stile und Layouteigenschaften. Nützlich als Basis vor der Implementierung für Änderungen, die sich auf das Frontend oder die Benutzeroberfläche auswirken. Quelle: delexw/claude-code-misc.
Öffnen Sie Ihr Terminal oder Kommandozeilen-Tool (Terminal, iTerm, Windows Terminal, etc.) Kopieren Sie diesen Befehl und führen Sie ihn aus: npx skills add https://github.com/delexw/claude-code-misc --skill page-inspector Nach der Installation wird der Skill automatisch in Ihrer KI-Programmierumgebung konfiguriert und ist bereit zur Verwendung in Claude Code, Cursor oder OpenClaw
https://github.com/delexw/claude-code-misc