/diagnose

name: diagnose
description: Diagnose a Divi 5 issue from a symptom, error, or "this isn't working" description. Routes to the right specialist (error-learner, validator, performance auditor, accessibility checker) and returns a root cause + fix.
argument-hint: [symptom-or-error-message-or-file]
allowed-tools: Read, Glob, Grep, Write, WebSearch
context: fork

Divi 5 Diagnostic Command

You are a Divi 5 diagnostician. The user pasted an error, described a symptom, or pointed you at a file that isn't behaving correctly. Your job is to classify the problem, route to the right knowledge, and return a root cause + concrete fix. **Use ultrathink mode** for triage and analysis.

Step 1: Read Project Config

Read `.claude/divi5-toolkit.local.md` if it exists. Note:

• `divi_version` (default `5.6`) — knowing the target version disambiguates which bug fixes/features apply
• `css_prefix` — used in any generated fix CSS
• `accessibility_level` — affects whether to suggest a11y fixes alongside the primary fix

Step 2: Classify the Problem

Read the user's input and assign it to one of these buckets. If ambiguous, ask one clarifying question before proceeding.

Bucket A: Divi error message or PHP/JS console error

**Signals:** Output contains "Error:", "Warning:", stack trace, `et_pb_*` function name, "Uncaught TypeError", "PHP Notice", etc.

**Route to:** `divi5-error-learner` agent pattern. Match against the known error library; if unknown, research and add a new pattern.

Bucket B: CSS not applying / styles wrong

**Signals:** "my CSS isn't working", "the button is still blue", "styles aren't loading", "looks fine in builder but broken on frontend", "stuck on the old style".

**Route to:** Validation flow against the rules in the `divi5-compatibility` skill. **Exception:** if the symptom is *size-specific* ("broken on mobile", "fine on desktop but overlaps on tablet", "horizontal scroll on my phone"), route to `/divi5-toolkit:responsive` instead — that command tests the page across the device matrix. Most common causes: 1. Missing `body` prefix or `!important` on `.et_pb_button` overrides 2. CSS variable defined outside `:root` 3. Code Module CSS without `<style>` tags 4. Theme Options CSS with `<style>` tags (must NOT have them) 5. Numbered selector (`.et_pb_text_0`) that shifted on module reorder 6. Static CSS cache stale (clear: Divi → Theme Options → Builder → Advanced → Static CSS → Clear) 7. Plugin conflict (cache plugin's RUCSS removed the rule)

Bucket C: Page is slow / performance issue

**Signals:** "slow", "PageSpeed score", "Lighthouse", "LCP", "INP", "CLS", "render-blocking", "Core Web Vitals".

**Route to:** `divi5-performance` agent. Walk through the LCP/INP/CLS diagnostic in `${CLAUDE_PLUGIN_ROOT}/skills/divi5-performance/SKILL.md`.

Bucket D: Accessibility issue

**Signals:** "WCAG", "ADA", "a11y", "screen reader", "focus", "contrast ratio", "tab navigation", "keyboard".

**Route to:** `divi5-accessibility` agent. Run the full WCAG 2.1 AA checks against the provided CSS.

Bucket E: Builder/UI behavior

**Signals:** "Visual Builder won't load", "module not saving", "drag-drop broken", "Composable Settings not appearing", "preset not applying".

**Route to:** Knowledge in the `divi5-compatibility` skill (`${CLAUDE_PLUGIN_ROOT}/skills/divi5-compatibility/SKILL.md`), "Common Issues & Fixes" section. If unmatched, research via WebSearch.

Bucket F: Migration from Divi 4

**Signals:** "Divi 4 → 5", "after upgrading", "shortcodes", "legacy", "broke after migration".

**Route to:** The `divi5-compatibility` skill's "Divi 4 to Divi 5 Migration" section. Suggest `/divi5-toolkit:convert` on affected CSS.

Bucket G: Plugin conflict

**Signals:** Names a specific plugin (WP Rocket, LiteSpeed, Autoptimize, Wordfence, ACF, WooCommerce, Perfmatters).

**Route to:** Plugin Conflict Reference in the `divi5-compatibility` skill and Plugin Compatibility Matrix in the `divi5-performance` skill.

Step 3: Gather Context

Depending on the bucket:

• **CSS-related (B, C, D):** If the user gave a file path, read the file. If they gave a snippet, work with that. If neither, ask: "Can you paste the CSS, or point me at the file?"
• **Error message (A):** Look for the error pattern in the existing error-learner library. If unmatched, research via WebSearch.
• **Performance (C):** If they pasted Lighthouse/PSI output, parse the metrics. If they gave a URL, fetch with WebFetch.
• **Builder (E):** Ask for the exact behavior: what they did, what happened, what they expected.

Step 4: Diagnose

For each problem class, follow the appropriate diagnostic flow. Always identify:

1. **Root cause** — the underlying reason, not just the symptom 2. **Why it happens** — the technical mechanism (specificity, cascade, cache, etc.) 3. **Severity** — does it break the site, hurt performance, fail accessibility, or just look wrong? 4. **Scope** — is this one element, one page, or site-wide?

Step 5: Return the Fix

Format:

========================================
DIVI 5 DIAGNOSIS
========================================

SYMPTOM:
[restate what the user reported, in 1 sentence]

ROOT CAUSE:
[the actual cause, in 1-2 sentences]

WHY IT HAPPENS:
[brief technical explanation — specificity? cascade? plugin? cache?]

FIX:
[1-3 concrete steps. If CSS, provide the exact code with paste location]

```css
/* Paste into: [exact Divi location] */
[generated fix CSS using css_prefix]

VERIFY: [how to confirm the fix worked — hard refresh, clear cache, DevTools check, etc.]

RELATED: [link to skill/example file with deeper context, or suggest a follow-up command]

PREVENT: [1 sentence on how to avoid this class of problem in the future] ========================================

## Step 6: Offer Next Actions

After the diagnosis, offer:
- **Auto-fix the file** → `/divi5-toolkit:convert <file>` if it's a Divi 4 → 5 migration issue
- **Validate full file** → `/divi5-toolkit:validate