divi5-toolkit

Divi5 Toolkit

The first Claude Code plugin for Divi 5 development. Validates CSS compatibility, generates Divi-ready code, scaffolds page sections, audits project health, checks accessibility, audits Core Web Vitals performance, diagnoses symptoms, learns from errors, and stays current with Divi 5 updates — all powered by Claude instead of GPT-3.5.

For Divi 5.13+ (11 new modules since 5.6 — Timeline, Breadcrumbs, SVG, Table of Contents, Instagram Feed, Tooltip, Post Filter, Charts, Gravity Forms, Imagely Gallery, Payment Button — plus Gradient Variables, Variable Fonts, CSS Grid Editor, Loop Filters, Aspect Ratio/Framing, Variable Generators, pseudo-class editing, Composable Settings, Canvas system, Loop Builder)

Why This Exists

Divi's built-in AI Agents (5.12+) only work inside the Visual Builder and only on what the builder exposes. This plugin gives you Claude with deep Divi 5 knowledge where the rest of your work happens — your CSS files, child theme, terminal, editor, and CI/CD pipeline. It knows Divi's selectors, specificity rules, breakpoints, Design Variables, Free-Form CSS, Composable Settings, Canvas system, and the full module library so you don't have to provide that context manually.

Features

• One-Command Setup: /divi5-toolkit:setup detects your installed Divi version, child theme, and CSS prefix and writes the project config for you
• Selector Lookup: /divi5-toolkit:selector blurb title returns the wrapper, inner selectors, a paste-ready override, and the Free-Form CSS equivalent in seconds
• CSS Generation: Divi 5-ready CSS in four formats (Theme Options, Code Module, Child Theme, Free-Form CSS)
• Section Scaffolding: Complete page section templates (hero, pricing, FAQ, etc.) with CSS, responsive design, and accessibility baked in
• Compatibility Validation: Checks button specificity, numbered selectors, !important usage, CSS variable scope, format correctness, accessibility
• Project Audit: Whole-project CSS health scoring with graded report and prioritized fix list
• Responsive Device Check: Verifies a page at 9 real device sizes (360px Android through 2560px ultrawide) — live viewport testing + screenshots via a browser MCP server, or static CSS risk analysis without one
• Accessibility Checking: WCAG 2.1 AA compliance — focus indicators, color contrast, reduced motion, touch targets
• Divi 5 Knowledge Base: Complete selector reference, 20+ D5-native modules, Design Variable system, Preset hierarchy, responsive breakpoints, Composable Settings, Canvas system, Loop Builder + Loop Filters
• Error Learning: Paste Divi errors — the plugin analyzes, fixes, and remembers the pattern
• Self-Updating: /divi5-toolkit:research refreshes the plugin's own knowledge base from upstream Divi sources on demand (recommended weekly — check last_research in your config)
• Migration Support: Converts Divi 4 CSS patterns for Divi 5 compatibility
• CSS Examples: Animation patterns, dark mode, WooCommerce, accessibility fixes, design tokens, button variants

Quickstart

Already have the plugin loaded? (See Installation if not.)

From your project root, in Claude Code:

/divi5-toolkit:setup

It reads wp-content/themes/Divi/style.css for the installed version, finds your child theme and existing CSS class prefix, asks at most three questions, and writes .claude/divi5-toolkit.local.md. (Manual alternative: copy plugins/divi5-toolkit/templates/divi5-toolkit.local.md to that path and edit css_prefix.)

Type /divi5-toolkit: — autocomplete should show all 10 commands. Try one:

/divi5-toolkit:generate primary button with gold hover state

You should get back Divi 5-ready CSS with body prefix, !important, your custom prefix, and paste instructions. That's it — you're up and running.

Next steps:

• docs/workflows.md — Build a full landing page, migrate from Divi 4, audit a project, add dark mode, etc.
• docs/usage.md — What every command, agent, and skill does in detail
• docs/configuration.md — Tune the plugin for your project type

Commands

Agents

Skills

Documentation

The tables above are quick references. For depth, see the docs/ directory:

Internal docs:

• CLAUDE.md — Developer guidance for working ON the plugin (architecture, conventions, contributing)
• STATE.md — Project state snapshot (current version, component inventory, knowledge topics)

What the Plugin Knows

Divi 5 Architecture

• React 18-based, no Shadow DOM — standard DOM with et_pb_* classes
• JSON block storage (no shortcodes)
• Dynamic CSS (94% smaller stylesheets)
• Critical CSS (eliminates render-blocking requests)
• Composable Settings (5.2) — toggle any design option on any sub-element

CSS Integration Methods

1. Theme Options (global, no tags)
2. Page-Level CSS
3. Free-Form CSS with selector keyword (new in D5)
4. Module Element fields (properties only)
5. Code Module (with <style> tags)
6. Custom HTML Wrappers (new in D5)
7. Semantic Elements (new in D5)
8. Child Theme
9. Attributes Panel (replaces old CSS ID & Classes)

Module Library

• 40+ built-in modules with complete selector reference
• 20+ D5-native modules: Group, Carousel Group, Before/After Image, Canvas Portal, Dropdown, Icon List, Link, Lottie, Timeline, Breadcrumbs, SVG, Table of Contents, Instagram Feed (5.6), Tooltip (5.8), Post Filter + Post Filter Item (5.10), Charts, Gravity Forms, Imagely Gallery, Payment Button (5.11)
• Contact Form 7 Styler (5.3)
• 17+ WooCommerce product modules

Canvas System (New in D5)

• Main Canvas — primary page content
• Local Canvases — per-page detached workspaces
• Global Canvases — site-wide reusable canvases
• Canvas Portal Module — inject canvas content at specific locations
• Interaction Builder — cross-canvas interactions (Click, Mouse, Viewport, Load triggers)
• Off-canvas menus, popups, mega menus, staging areas

Design System

• 7 Design Variable types (Colors, Fonts, Numbers, Images, Text, Links, Gradients)
• Variable Generators: Sizing (5.4), Relative Colorscheme (5.4), Color Scale + Harmony (5.6)
• 4-tier Preset hierarchy (Option Group, Element, Stacked, Nested)
• Composable Settings — enable any option on any sub-element
• Variable Fonts + advanced typography controls (5.9), visual CSS Grid Editor (5.9)
• CSS custom properties fully supported

Responsive Design

• 7 breakpoints (3 active by default: Phone 767px, Tablet 980px, Desktop)
• 4 optional: Phone Wide 860px, Tablet Wide 1024px, Widescreen 1280px, Ultra Wide 2560px
• All breakpoint widths customizable

Accessibility Support

• Semantic Elements (change div to nav, header, section, etc.)
• ARIA attributes via Attributes panel
• Focus indicator patterns (Divi removes defaults)
• Reduced motion support
• WCAG 2.1 AA color contrast guidance
• Touch target sizing

Troubleshooting Knowledge

• Cache plugin conflicts (WP Rocket RUCSS, LiteSpeed, Autoptimize)
• Security plugin issues (Wordfence firewall)
• WooCommerce styling problems
• Divi 4 to 5 migration patterns
• Debugging with Safe Mode, DevTools, D5 Dev Tool
• Divi 5.2–5.13 bug fix history (transform corruption, box-shadow hover, loop CSS, linter false positives, cache-related style loss, preset-class override, migrated Free-Form CSS, and the per-version fixes documented in the compatibility skill)

CSS Example Library

• Button Variants — primary, secondary, outline, sizes
• Design Tokens — complete design system template
• Animations — fade, slide, scale, stagger, hover effects with reduced-motion
• Dark Mode — system-aware with manual toggle
• WooCommerce — product grids, cards, cart, checkout
• Accessibility — focus indicators, skip links, screen reader utilities, high contrast
• Responsive 7-Breakpoints — full 2025-aligned breakpoint template
• Loop Builder — CSS Grid card layouts, masonry, product cards, horizontal lists, pagination
• Forms — Divi 5.3 pseudo-class editing (:checked/:focus/:active), custom checkboxes/radios, Contact Form 7 Styler
• New Modules (5.6–5.11) — Timeline, Breadcrumbs, SVG, Table of Contents, Instagram Feed, Tooltip, Post Filter, Gravity Forms, Charts, Payment Button styling
• Critical CSS — hand-crafted above-the-fold template (in divi5-performance skill)
• Font Loading — local @font-face with CLS-prevention metric overrides (in divi5-performance skill)

Optional MCP Servers

No MCP servers required. For extended capabilities, add to your .mcp.json:

Context7 (Documentation Lookup)

{
  "mcpServers": {
    "context7": {
      "command": "npx",
      "args": ["-y", "@upstash/context7-mcp@latest"]
    }
  }
}

Playwright (Browser Testing)