Divi5 Toolkit plugin
Claude Code plugin for Divi 5 with 10 commands and 3 skills: selectors, CSS, section scaffolds, project audit, accessibility
- 69 ★ on the repository
- Last commit
Extended access
Why this level
- The plugin reads WordPress theme files and writes a config into `.claude/`
- `research` calls external sources and `responsive` drives a browser through MCP
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add plugins/divi5-toolkitDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- The plugin reads WordPress theme files and writes a config into `.claude/`
- `research` calls external sources and `responsive` drives a browser through MCP
This is third-party code. Review the repository files before installing.
What it does
The plugin targets Divi 5.13 and later and works where the rest of the work happens: CSS files, the child theme, the terminal and CI. `/divi5-toolkit:setup` detects the installed Divi version, the child theme and the class prefix and writes a config to `.claude/divi5-toolkit.local.md`. `selector` takes a module name such as `blurb title` and returns the wrapper, inner selectors and a ready override. `generate` produces CSS in four formats: Theme Options, a code module, a child theme and Free-Form CSS. The rest are `scaffold` for ready sections (hero, pricing, FAQ), `validate` for specificity and `!important`, `audit` with a CSS health grade for the project, `responsive` for checks at nine screen sizes, `convert` for carrying Divi 4 patterns over and `diagnose` for symptom analysis. `research` refreshes the plugin knowledge base from Divi sources. Three skills hold references on compatibility, CSS patterns and performance.
Who it is for. Freelancers and studios that build WordPress sites on Divi 5 and write CSS and a child theme together with Claude Code.
Good fit when
- You need the selector of a Divi module inner element and a ready style override
- A button ignores styles because of specificity and you must find where priority is lost
- A hero, pricing or FAQ section is built from scratch with responsive layout and accessibility
- Before handoff the project is checked against Core Web Vitals and WCAG 2.1 AA
- A site moves from Divi 4 to Divi 5 and styles need carrying over
Not a fit when
- The site runs on Divi 4 or another theme: the plugin is built for Divi 5
- You need to edit settings inside the Visual Builder, where the built-in Divi agents work
- The job concerns WordPress plugins and the server side, with no CSS in it
Example request
Generate Divi 5 primary button CSS with a gold hover state and show where to paste itLimitations
The plugin is built for Divi 5.13 and newer, and on earlier versions selectors and modules may differ. `responsive` checks a page on a live screen only with a browser MCP server connected, and without one only a static CSS review remains. `research` pulls data from external sources on demand and the author advises running it weekly. The skills and commands suggest CSS changes, and these should be applied to a live site only after a test on a copy. The last commit dates from September 2026.
How to disable. Run `/plugin uninstall divi5-toolkit` or delete the plugin folder. The `.claude/divi5-toolkit.local.md` file in the project is removed by hand.
FAQ
How do I start with Divi5 Toolkit?
Install the plugin and run `/divi5-toolkit:setup` from the project root. It finds the Divi version, child theme and class prefix, asks at most three questions and saves the config.
Which commands does the plugin have?
Ten commands: `setup`, `selector`, `generate`, `scaffold`, `validate`, `audit`, `responsive`, `convert`, `diagnose` and `research`.
How is it different from the built-in Divi agents?
The built-in agents of Divi 5.12 and later work only inside the Visual Builder. The plugin brings Divi knowledge to Claude Code where you edit CSS, the child theme and the pipeline.
Can the plugin check accessibility?
Yes, it checks WCAG 2.1 AA: focus indicators, color contrast, reduced motion and touch target sizes.
Does it help with moving from Divi 4?
Yes, `convert` carries Divi 4 CSS patterns over to Divi 5, and the knowledge base describes the selector and module changes.
Discussion
No questions or reviews yet.
Related
PluginsA Claude Code plugin with 11 commands that builds a WordPress block theme from static markup and converts classic themes to FSE.
145 skill plugins for Claude Code and Codex: Cloudflare, React, Tailwind, Nuxt, APIs, security, testing, installed one by one
A skill that edits UI inside live code with no extra dependencies: components, sections, pages and RTL with Arabic for your stack
A Claude Code plugin with Alsacréations web guides: HTML, CSS, accessibility, WordPress and the agency's own CSS tools.
A CLI that extracts any website's design system into tokens: colors, typography, spacing, shadows, in one run
HTML design for Claude Code and Codex: presentations, landing pages, prototypes, animations and design systems. Playwright and ffmpeg are needed
README in short
The README lists the plugin features and explains why it sits next to the built-in Divi agents. A quick start with `setup` follows, then sample calls and links to workflows: a full landing page, migration from Divi 4 and a project audit.