Help us improve
Share bugs, ideas, or general feedback.
Share bugs, ideas, or general feedback.
Share bugs, ideas, or general feedback.
By cjsimon2
Validate and generate Divi 5-compatible CSS, scaffold page sections with responsive and accessible patterns, audit project styles for compatibility and design quality, and troubleshoot Divi-specific errors with root-cause fixes.
npx claudepluginhub cjsimon2/divi5-toolkit --plugin divi5-toolkitPerform 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.
Convert existing CSS to Divi 5-compatible format. Fixes specificity issues, adds proper overrides, handles format wrapping, and supports Divi 4 to Divi 5 migration.
Generate Divi 5-ready CSS for a component, section, or page element. Outputs in the format you specify (Theme Options, Code Module, Child Theme, or Free-Form CSS).
Research the latest Divi 5 updates, features, CSS compatibility changes, and best practices. Updates plugin knowledge base with new findings.
Generate complete Divi 5 page section templates (hero, pricing, testimonials, FAQ, CTA, etc.) with best-practice CSS, responsive design, and accessibility baked in.
Use this agent when reviewing Divi 5 CSS for accessibility issues. Checks color contrast, focus indicators, touch targets, reduced motion support, semantic elements, and ARIA attribute recommendations. Activates when writing CSS for interactive elements or when the user mentions accessibility, WCAG, ADA, or a11y.
Use this agent when the user pastes Divi error messages, console errors from Divi pages, or describes CSS issues they encountered in Divi 5. Analyzes the error, provides solutions, and updates the plugin's knowledge base to prevent future occurrences.
Use this agent to research the latest Divi 5 updates, features, and compatibility changes. Triggers automatically when plugin knowledge is stale (>7 days since last research) or on-demand when user asks about Divi 5 updates, new features, or compatibility questions.
Use this agent after writing or editing CSS files to validate Divi 5 compatibility. Triggers on CSS file changes and checks for button specificity issues, numbered selectors, missing !important on Divi overrides, and other compatibility problems.
Use this skill when validating CSS for Divi 5 / Divi 5.2 compatibility, checking unsupported features or units, troubleshooting Divi CSS that isn't applying, debugging plugin conflicts (WP Rocket, LiteSpeed, Wordfence, WooCommerce), migrating from Divi 4 to Divi 5, understanding breakpoints, or fixing "styles not working" / "button override not working" / "static CSS cache" issues. Provides compatibility rules, validation patterns, specificity fixes, composable settings alternatives, and a full error-message reference.
Use this skill when writing CSS for Divi 5 / Divi 5.2, styling Divi modules (buttons, sections, rows, blurbs, toggles, forms), working with Free-Form CSS and the `selector` keyword, overriding `.et_pb_*` classes, setting up design tokens or dark mode, adding animations with reduced-motion, styling WooCommerce with Divi, building accessible layouts, or developing a Divi child theme. Provides CSS patterns, class naming conventions, selector specificity guidance, Composable Settings alternatives, Canvas and Loop Builder patterns, and full example files for buttons, design tokens, animations, dark mode, WooCommerce, and accessibility.
Modifies files
Hook triggers on file write and edit operations
Uses power tools
Uses Bash, Write, or Edit tools
Share bugs, ideas, or general feedback.
Own this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge.
Sign in to claimOwn this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge.
Sign in to claimBased on adoption, maintenance, documentation, and repository signals. Not a security audit or endorsement.
AI agent skill for building pages and layouts on WordPress sites running Divi 5. Create sections, modules, presets, theme builder templates, and design systems via MCP tools. Includes CSS effects and WebGL shader backgrounds via the DiviOps Design Library.
Web development tools including frontend design workflows
Generate WordPress Gutenberg blocks using Greenshift/GreenLight. Create sections, layouts, hero sections, galleries, complete pages, and migrate old blocks to modern GreenLight Element format.
UX co-pilot — conversational UX designer with live preview. 376 rules, 161 palettes, 57 font pairings, 67 styles. Phases: Discovery (ABCD questions), Audit (code scan + scored report), Preview (local server + named versions), Export (spec + React/Svelte/Vue components).
Connect Claude Code to TypeUI MCP for curated design systems, UI prompts, and layout variations.
UI/UX design intelligence. 107 styles, 127 palettes, 107 font pairings, 106 charts, 131 reasoning rules, 129 UX guidelines, 16 stacks (React, Next.js, Vue, Nuxt.js, Svelte, Astro, Angular, Remix, SolidJS, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, Jetpack Compose, Nuxt UI). 8 Python scripts: BM25 search, contrast checker, palette generator, token generator, type scale calculator, design system generator, UI auditor, CLI. Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, liquid glass, cyberpunk, spatial UI, data brutalism. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient, design tokens, contrast checker.
The first Claude Code plugin for Divi 5 development. Validates CSS compatibility, generates Divi-ready code, scaffolds page sections, audits project health, checks accessibility, learns from errors, and stays current with Divi 5 updates — all powered by Claude instead of GPT-3.5.
For Divi 5.2+ (Composable Settings, Canvas system, Loop Builder)
Divi AI uses GPT-3.5 and only works inside the Visual Builder. This plugin gives you Claude's superior code generation with deep Divi 5 knowledge — from your terminal, editor, or 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.
!important usage, CSS variable scope, format correctness, accessibilityAlready have the plugin loaded? (See Installation if not.)
# 1. From your project root, copy the config template
mkdir -p .claude
cp /path/to/Divi5-ToolKit/templates/divi5-toolkit.local.md .claude/divi5-toolkit.local.md
Edit .claude/divi5-toolkit.local.md and set css_prefix to your project's class prefix (e.g., acme). Leave the other defaults alone.
In Claude Code, type /divi5-toolkit: — autocomplete should show all 6 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 detaildocs/configuration.md — Tune the plugin for your project type| Command | Description |
|---|---|
/divi5-toolkit:generate | Generate Divi 5-ready CSS for any component |
/divi5-toolkit:validate | Validate CSS for Divi 5 compatibility |
/divi5-toolkit:convert | Convert existing CSS to Divi 5 format |
/divi5-toolkit:research | Research latest Divi 5 updates |
/divi5-toolkit:scaffold | Generate complete page section templates |
/divi5-toolkit:audit | Run a full project CSS audit with scoring |
| Agent | Triggers When |
|---|---|
divi5-validator | After writing/editing CSS files (via PostToolUse hook, if auto_validate: true) |
divi5-error-learner | When you paste Divi error messages or describe CSS issues |
divi5-researcher | On-demand via /divi5-toolkit:research or when unknown Divi errors need research |
divi5-accessibility | When reviewing CSS for accessibility, or when writing interactive element styles |
| Skill | Activates When |
|---|---|
divi5-css-patterns | Writing CSS for Divi, styling Divi modules |
divi5-compatibility | Validating CSS, troubleshooting Divi issues |
The tables above are quick references. For depth, see the docs/ directory: