/audit

name: audit
description: Perform a comprehensive CSS audit across all project files. Scores overall Divi 5 compatibility, identifies patterns and anti-patterns, and produces an actionable improvement report with prioritized fixes.
argument-hint: [directory-or-file]
allowed-tools: Read, Glob, Grep, Write
context: fork

Divi 5 CSS Audit

You are performing a comprehensive CSS audit for Divi 5 compatibility. **Use ultrathink mode** for thorough analysis. This goes far beyond single-file validation — it analyzes the entire project holistically.

Step 1: Read Project Config

Read `.claude/divi5-toolkit.local.md` if it exists. Apply these settings (use defaults if missing):

accessibility_level: aa                   # "aa" | "aaa" | "off"
flag_composable_alternatives: true        # true | false
css_prefix: my                            # custom class prefix
divi_version: "5.6"                       # target Divi version

**Behavior:**

• `accessibility_level: off` — Skip Category E entirely. Reweight remaining categories proportionally so the total still maxes at 100.
• `accessibility_level: aaa` — Use stricter thresholds: 7:1 contrast for normal text (vs. 4.5:1), focus indicators must be ≥ 2px, flag any animation triggered by hover/focus without reduced-motion fallback.
• `flag_composable_alternatives: false` — Skip the "Composable Settings Opportunities" report section in Step 6.
• `divi_version: "5.0"` or `"5.1"` — Mention in the report that Composable Settings (5.2+), pseudo-class editing (5.3+), Aspect Ratio/Framing (5.5+), and certain bug fixes are not available on the user's target version.

Step 2: Discover CSS Sources

Scan the project for all CSS:

**/*.css
**/*.scss
**/*.less
**/style.css
**/custom.css
**/functions.php  (for wp_enqueue_style and inline CSS)
**/*.html          (for <style> blocks)
**/*.php           (for inline styles)

Also check for any design token files.

Step 3: Collect Metrics

For each CSS file, gather:

• Total lines of CSS
• Number of selectors
• Number of `!important` declarations
• Number of `.et_pb_*` selectors
• Number of CSS variables defined/used
• Number of media queries
• Number of `clamp()`/`min()`/`max()` usage
• Number of hardcoded colors vs. variable references

Step 4: Run Audit Checks

Each category has a point budget (A 40, B 20, C 15, D 10, E 15 — total 100) and is scored independently: **deduction categories** (A, D) start at their max and lose points per finding; **award categories** (B, C, E) earn points per criterion met. Every category is floored at 0 and capped at its max.

Category A: Divi 5 Compatibility (max 40 — start at 40, deduct per finding)

| # | Check | Severity | Points | |---|-------|----------|--------| | A1 | Button selectors have `body` prefix + `!important` | Critical | -10 each | | A2 | No numbered selectors (`.et_pb_*_0`) | Critical | -8 each | | A3 | CSS variables in `:root` scope | High | -4 each | | A4 | Code Module CSS wrapped in `<style>` tags | High | -5 each | | A5 | Theme Options CSS has no `<style>` tags | High | -5 each | | A6 | Module Element fields have properties only (no selectors) | High | -5 each | | A7 | `.et_pb_*` overrides use `!important` | Medium | -2 each | | A8 | No shortcode references (`[et_pb_*]`) — D4 artifact | High | -5 each |

Category B: Design System Quality (max 20 — award per criterion)

| # | Check | Severity | Points | |---|-------|----------|--------| | B1 | Design tokens defined (CSS variables in `:root`) | High | +6 | | B2 | Consistent spacing scale (not random pixel values) | Medium | +3 | | B3 | Color values use variables, not hardcoded hex | Medium | +4 (reduce proportionally per hardcoded color) | | B4 | Font stacks have fallbacks | Medium | +3 | | B5 | Naming convention follows BEM or consistent pattern | Low | +2 | | B6 | Custom class prefix used (avoids Divi conflicts) | Medium | +2 |

Category C: Responsive Design (max 15 — award per criterion)

| # | Check | Severity | Points | |---|-------|----------|--------| | C1 | Uses fluid values (`clamp()`, `min()`/`max()`, `vw`, `calc()`) where appropriate | Medium | +6 | | C2 | Media queries align with the project's active Divi breakpoints (defaults: 767, 980) | Medium | +4 | | C3 | No `!important` in media queries that could be avoided | Low | +2 | | C4 | No fixed pixel font sizes without responsive alternative | Medium | +3 |

Category D: Performance (max 10 — start at 10, deduct per finding)

| # | Check | Severity | Points | |---|-------|----------|--------| | D1 | Total CSS size (flag if > 50KB custom CSS) | Medium | -4 if over | | D2 | Duplicate selectors | Medium | -1 each (max -3) | | D3 | Unused selectors (classes not found in templates) | Low | -1 each (max -2) | | D4 | Overly broad selectors (`* {}`, `div {}`) | Medium | -2 each | | D5 | Excessive `!important` (> 30% of declarations) | Low | -3 |

Category E: Accessibility (max 15 — award per criterion, with one critical deduction)

**Skipped entirely if `accessibility_level: off`** (rescale: final score = (A+B+C+D) × 100/85). **Stricter thresholds applied if `accessibility_level: aaa`.**

| # | Check | Severity | Points | |---|-------|----------|--------| | E1 | Focus styles present (`:focus`, `:focus-visible`) | High | +5 | | E2 | `prefers-reduced-motion` query present (auto-award if no animations exist) | Medium | +4 | | E3 | `prefers-color-scheme` support (dark mode) | Low | +1 | | E4 | Text color contrast appears WCAG-compliant | High | +3 (deduct 1 per likely violation) | | E5 | Touch targets suggest adequate size (padding on buttons) | Medium | +2 | | E6 | `outline: none` without replacement focus indicator | Critical | -5 each |

Step 5: Calculate Score

Category score = clamp(category points, 0, category max)
Total Score    = A + B + C + D + E          (0–100)
                 (if accessibility_level: off → (A+B+C+D) × 100/85, rounded)

Grade Scale

| Score | Grade | Meaning | |-------|-