Skills
.Work. You
Rest

zensical-debug

Community

Debug zensical sites with Chrome DevTools MCP.

Software Engineering#debugging#port management#local development#web debugging#visual verification#Chrome DevTools MCP#zensical
Authorzeulewan
Version1.0.0
Installs0

System Documentation

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)

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: zensical-debug
Download link: https://github.com/zeulewan/claude-code-skills/archive/main.zip#zensical-debug

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.