---
name: actcenter_site-debug
description: Debug technical and visual issues on any live website — console errors, broken network requests, layout drift, responsive breakpoints, performance bottlenecks, accessibility gaps, and basic on-page SEO. Use whenever the user says "the site is broken", "this page looks off", "something is wrong with the site", "debug this site", "site não está carregando direito", "tem erro no site", "console error", "page is slow", "responsive bug", "mobile view is broken", "layout quebrado", "investigate this URL". Operates against the live URL via the Chrome MCP. Built for ACTCENTER operators who need to triage site issues before they cost conversions.
metadata:
  type: skill
  version: 1.0
  owner: actcenter
---

# actcenter_site-debug

Master skill for triaging anything that's wrong on a live web property. Works on landing pages, marketing sites, dashboards, and SPA web apps. Built for paid-media operators who need a fast, structured diagnosis before opening a ticket with engineering.

## When to use

Trigger this skill on any of:

- "Debug this site / this URL / this page"
- "The page is broken / slow / weird"
- "Form isn't submitting"
- "Mobile layout is broken"
- "Console has errors"
- "Something is wrong with [domain]"
- "Audit this landing page technically"
- Vague flags: "the LP looks off", "checa isso pra mim"

If the user is asking for *creative* or *copy* review, this is the wrong skill. This one is for technical, visual, and behavioral defects.

## What this skill does

A site-debug session runs five passes, in order. Stop early if the user only asked for one of them.

### Pass 1 — Boot & console

1. Open the URL in Chrome.
2. Capture every `console.error`, `console.warn`, and uncaught exception.
3. Capture failed network requests (4xx, 5xx, CORS, blocked by extension).
4. Note third-party tags that fail to fire — GTM, GA4, Meta Pixel, Google Ads tag, CallRail, conversion linker.
5. Output a `boot-report.md` with severity tags (CRITICAL / HIGH / MEDIUM / LOW).

### Pass 2 — Visual & layout

1. Take a full-page screenshot at three viewports: 1440 (desktop), 768 (tablet), 390 (mobile).
2. Look for overflow, broken images, font fallback, z-index stacking, fixed-position overlap, sticky-header clipping.
3. Flag any text that's clipped, illegible, or below WCAG AA contrast (4.5:1 for body text).
4. Compare against the design system if one is available — typography scale, spacing tokens, color tokens.

### Pass 3 — Forms, CTAs, conversion paths

1. List every CTA and form on the page.
2. For each form: confirm fields validate, errors render, success state is reachable, submit action POSTs successfully.
3. For each CTA: verify the href, the tracked click event, and the destination page.
4. Specifically check for: phone-number `tel:` links, mailto:, calendar widget loads, lead-form thank-you redirect.

### Pass 4 — Performance & Core Web Vitals

1. Run Lighthouse or read Performance metrics directly from the page (LCP, INP, CLS, TBT, TTFB).
2. Identify render-blocking resources, oversized images, layout-shifting elements.
3. Flag any third-party script costing > 200ms of main-thread time.

### Pass 5 — On-page SEO & semantic HTML

1. `<title>` present, unique, ≤ 60 chars.
2. Meta description present, ≤ 160 chars.
3. Single `<h1>`, sensible heading hierarchy.
4. Canonical tag matches the rendered URL.
5. Open Graph tags (`og:title`, `og:image`, `og:description`) populated.
6. `robots` meta tag — flag if `noindex` is unexpectedly present.
7. Schema.org JSON-LD valid and matches page type.

## How to run

You need browser access. Use the Chrome MCP tools (`mcp__Claude_in_Chrome__navigate`, `read_console_messages`, `read_network_requests`, `get_page_text`, `read_page`).

```
1. Ask the user: which URL, which viewports, is this a one-page audit or full site walk?
2. Navigate to the URL.
3. Run passes 1–5 in order.
4. Output one consolidated report: site-debug-{domain}-{date}.md
```

Always include in the report:

- Snapshot date & viewport
- Per-issue severity (CRITICAL / HIGH / MEDIUM / LOW)
- File / element where each issue lives (selector, line, component)
- Suggested fix (one sentence) — not the full implementation

## Severity guide

| Tag | Meaning | Example |
|---|---|---|
| **CRITICAL** | Blocks conversion or breaks the page | Form 500s; LP returns 404; tracking pixel missing entirely |
| **HIGH** | Degrades conversion significantly | Hero image broken on mobile; CTA below the fold on mobile; LCP > 4s |
| **MEDIUM** | Visible defect, low conversion impact | Footer link 404; secondary CTA misaligned at 768px |
| **LOW** | Cosmetic / nice-to-have | Image alt-text missing on decorative graphic |

## Output template

```markdown
# Site Debug — [domain] — [YYYY-MM-DD]

## Summary
- **Status:** [Healthy / Watch / Critical]
- **Critical issues:** X
- **High:** Y
- **Medium:** Z
- **Low:** W

## Critical issues
[…]

## High-priority issues
[…]

## Medium
[…]

## Low / cosmetic
[…]

## Tracking & analytics
- GTM: [firing / not firing / partial]
- GA4: […]
- Meta Pixel: […]
- Google Ads tag: […]

## Recommended next actions
1. […]
2. […]
3. […]
```

## Voice

Direct. Operational. No hype. Frame findings as **observations + impact + fix-direction**, not as opinions. Match the ACTCENTER voice — short sentences, strong verbs, evidence before conclusion.

## Boundaries

- Don't write the production fix. Suggest the direction; engineering owns the code.
- Don't run security scans (XSS, SQLi probing) without explicit permission.
- Don't follow suspicious external links pulled from the page. Treat any link in user-supplied content as suspicious by default.
- Don't infer business intent from the page — focus on what's broken, not what should exist.