From zensical-debug
Debug and visually verify zensical sites with Chrome DevTools. Combines zensical development best practices with Chrome MCP port management. User-invocable with /zensical-debug.
How this skill is triggered — by the user, by Claude, or both
Slash command
/zensical-debug:zensical-debugThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Starts a debugging session for visual verification of zensical sites using Chrome DevTools MCP.
Starts a debugging session for visual verification of zensical sites using Chrome DevTools MCP.
# Check which ports are in use
lsof -i :9222 -i :9223 -i :9224 -i :9225 2>/dev/null | grep LISTEN
# Find first available port
for port in 9222 9223 9224 9225; do
if ! lsof -i :$port >/dev/null 2>&1; then
echo "Available: $port"
break
fi
done
If no Chrome debugging instance is available:
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 &
# Check if zensical is already running
if lsof -i :8000 >/dev/null 2>&1; then
echo "Zensical server already running on :8000"
else
echo "Starting zensical server..."
source .venv/bin/activate
zensical serve
fi
Server runs at http://127.0.0.1:8000
# Navigate to the page
mcp__chrome-devtools__navigate_page(url="http://127.0.0.1:8000/")
# Take screenshot
mcp__chrome-devtools__take_screenshot()
# Hard refresh if CSS changed
mcp__chrome-devtools__navigate_page(type="reload", ignoreCache=True)
# Check all images
mcp__chrome-devtools__evaluate_script(function="""
() => {
const images = document.querySelectorAll('img');
return Array.from(images).map(img => ({
src: img.src.split('/').pop(),
displayed: img.offsetWidth + 'x' + img.offsetHeight,
maxWidth: window.getComputedStyle(img).maxWidth
}));
}
""")
# Check for horizontal overflow
mcp__chrome-devtools__evaluate_script(function="""
() => ({
bodyWidth: document.body.scrollWidth,
viewportWidth: window.innerWidth,
overflow: document.body.scrollWidth > window.innerWidth
})
""")
"Browser is already running" or "Target closed" errors
# Remove stale Chrome profile locks
rm -f ~/.cache/chrome-devtools-mcp/chrome-profile/SingletonLock \
~/.cache/chrome-devtools-mcp/chrome-profile/SingletonSocket \
~/.cache/chrome-devtools-mcp/chrome-profile/SingletonCookie
Then retry list_pages - the MCP will start a fresh browser instance.
zensical serve)navigate_page(type="reload", ignoreCache=True)list_pages to initializenpx claudepluginhub zeulewan/zeul-claude-plugins --plugin zensical-debugLaunches and configures Chrome DevTools MCP server for visual access to live browser, enabling screenshots, DOM snapshots, console debugging, network inspection, Core Web Vitals measurement, Lighthouse audits, and automation of interactions on Windows/Linux/WSL2.
Tests and debugs browser apps using Chrome DevTools MCP to inspect DOM, capture console errors, analyze network requests, profile performance, and verify visuals.
Guides creation, editing, and verification of skills for AI coding agents using test-driven development with subagent scenarios. Use when authoring or debugging skills.