skills.rest
zeulewan
zeulewanCOMMUNITY
Explore all skills by this author →
Website𝕏@zeulewanGitHub

zensical-debug

Debug and visually verify zensical sites using Chrome DevTools MCP.

Updated Dec 29, 2025
Search Tags:#debugging#port management#local development#web debugging#visual verification#Chrome DevTools MCP#zensical
One-click install
npx skills add https://github.com/zeulewan/claude-code-skills --skill zensical-debug
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: zensical-debug
Source: https://github.com/zeulewan/claude-code-skills/tree/main/zensical-debug
Command: npx skills add https://github.com/zeulewan/claude-code-skills --skill zensical-debug

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The skill enables developers to debug and visually verify zensical sites using Chrome DevTools MCP.

Core Features & Use Cases

  • Guided debugging: Start a zensical debugging session with a few commands and verify visual output.
  • Port management: Manage and allocate Chrome remote debugging ports for stable sessions.
  • Automated verification: Execute MCP actions to navigate, capture screenshots, and verify layout consistency across pages.

Quick Start

Start a debugging session by ensuring Chrome remote debugging port is available, launching Chrome with remote debugging, starting the zensical server, and performing a basic verification:

  • Ensure port is free (e.g., 9222-9225) and start Chrome: /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 &
  • Activate the virtual environment and start the server: source .venv/bin/activate; zensical serve
  • Connect and verify: mcp__chrome-devtools__navigate_page(url="http://127.0.0.1:8000/") mcp__chrome-devtools__take_screenshot() mcp__chrome-devtools__navigate_page(type="reload", ignoreCache=True)

Frequently Asked Questions about zensical-debug

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I debug a zensical site locally with Chrome DevTools?▼

Debugging zensical sites with Chrome DevTools MCP involves launching Chrome with remote debugging enabled on an available port (e.g., 9222), starting your zensical server, then using MCP actions to navigate pages and capture screenshots for visual verification of your local development.

What ports should I use for Chrome remote debugging in zensical development?▼

Chrome remote debugging ports for zensical workflows typically use the range 9222–9225. Ensure your chosen port is free before launching Chrome with the `--remote-debugging-port` flag to avoid conflicts and maintain stable debugging sessions.

Can I automate visual verification of zensical pages during debugging?▼

Yes, automated verification is core to this Skill. Use MCP actions to navigate pages, reload with cache bypass, take screenshots, and validate layout consistency across your zensical site without manual intervention.

Do I need to configure anything before starting a zensical debugging session?▼

Minimal setup is required: ensure Chrome remote debugging port is available, activate your Python virtual environment, and start the zensical server. The Skill handles port management and MCP connection setup with straightforward commands.

How do I capture and verify page layouts in zensical debugging?▼

Navigate to your target URL using MCP navigation actions, then use screenshot capture to record visual state. Reload with cache bypass to test fresh renders, enabling consistent layout verification across your zensical site pages.

What's the workflow for managing multiple Chrome debugging ports in zensical development?▼

Port management in zensical debugging allocates separate remote debugging ports (9222–9225 range) for stable, parallel sessions. Each port supports one Chrome instance, preventing conflicts and enabling isolated debugging workflows.

Related Skills

Explore More Software Engineering Skills→
udecodeudecode
434

browser-debug-setup

Set up a persistent Chrome debugging environment with a dedicated profile.

Official
Intermediate
ColeMurrayColeMurray
2.6k

visual-verification

Capture and upload full-page or viewport screenshots with metadata for UI verification.

Community
Intermediate
akornmeierakornmeier
4

chrome-debug

Debug browser UI issues with Chrome DevTools MCP in headless mode.

Community
Advanced
wesleyegbertowesleyegberto
3

chrome-devtools

Automate browser control and debugging via the Chrome DevTools Protocol.

Community
Advanced