Capture el diseño, los estilos y la estructura de la página actual desde una página web en vivo utilizando Chrome DevTools MCP. Úselo cuando necesite comprender la interfaz de usuario existente antes de realizar cambios: captura capturas de pantalla, estructura DOM, estilos calculados y propiedades de diseño. Útil como punto de referencia previo a la implementación de cambios que afectan la interfaz de usuario o la interfaz de usuario.
Instala rápidamente el skill de IA page-inspector en tu entorno de desarrollo mediante línea de comandos
Fuente: 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:
Capture el diseño, los estilos y la estructura de la página actual desde una página web en vivo utilizando Chrome DevTools MCP. Úselo cuando necesite comprender la interfaz de usuario existente antes de realizar cambios: captura capturas de pantalla, estructura DOM, estilos calculados y propiedades de diseño. Útil como punto de referencia previo a la implementación de cambios que afectan la interfaz de usuario o la interfaz de usuario. Fuente: delexw/claude-code-misc.
Abre tu terminal o herramienta de línea de comandos (Terminal, iTerm, Windows Terminal, etc.) Copia y ejecuta este comando: npx skills add https://github.com/delexw/claude-code-misc --skill page-inspector Una vez instalado, el skill se configurará automáticamente en tu entorno de programación con IA y estará listo para usar en Claude Code, Cursor u OpenClaw
Campos y comandos estables para citas de IA/búsqueda.
npx skills add https://github.com/delexw/claude-code-misc --skill page-inspectorCapture el diseño, los estilos y la estructura de la página actual desde una página web en vivo utilizando Chrome DevTools MCP. Úselo cuando necesite comprender la interfaz de usuario existente antes de realizar cambios: captura capturas de pantalla, estructura DOM, estilos calculados y propiedades de diseño. Útil como punto de referencia previo a la implementación de cambios que afectan la interfaz de usuario o la interfaz de usuario. Fuente: delexw/claude-code-misc.
Abre tu terminal o herramienta de línea de comandos (Terminal, iTerm, Windows Terminal, etc.) Copia y ejecuta este comando: npx skills add https://github.com/delexw/claude-code-misc --skill page-inspector Una vez instalado, el skill se configurará automáticamente en tu entorno de programación con IA y estará listo para usar en Claude Code, Cursor u OpenClaw
https://github.com/delexw/claude-code-misc