The first Claude Code plugin for Divi 5 development. CSS generation, compatibility validation, error learning, and self-updating knowledge base — powered by Claude, not GPT-3.5.
How to install divi5-toolkit?
cjsimon2/divi5-toolkit
$git clone https://github.com/cjsimon2/divi5-toolkitInstalls into the current project.
›Prefer a prompt? Paste this to your agent
Install divi5-toolkit by running `git clone https://github.com/cjsimon2/divi5-toolkit`, then use it for the current task and follow its documentation at https://github.com/cjsimon2/divi5-toolkit.
README.md
| 1 | # Divi5 Toolkit |
| 2 | |
| 3 | 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. |
| 4 | |
| 5 | **For Divi 5.6+** (5 new modules — Timeline, Breadcrumbs, SVG, Table of Contents, Instagram Feed — plus Aspect Ratio/Framing, Variable Generators, pseudo-class editing, Composable Settings, Canvas system, Loop Builder) |
| 6 | |
| 7 | ## Why This Exists |
| 8 | |
| 9 | 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. |
| 10 | |
| 11 | ## Features |
| 12 | |
| 13 | - **CSS Generation**: Divi 5-ready CSS in four formats (Theme Options, Code Module, Child Theme, Free-Form CSS) |
| 14 | - **Section Scaffolding**: Complete page section templates (hero, pricing, FAQ, etc.) with CSS, responsive design, and accessibility baked in |
| 15 | - **Compatibility Validation**: Checks button specificity, numbered selectors, `!important` usage, CSS variable scope, format correctness, accessibility |
| 16 | - **Project Audit**: Whole-project CSS health scoring with graded report and prioritized fix list |
| 17 | - **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 |
| 18 | - **Accessibility Checking**: WCAG 2.1 AA compliance — focus indicators, color contrast, reduced motion, touch targets |
| 19 | - **Divi 5 Knowledge Base**: Complete selector reference, 8 new D5 modules, Design Variable system, Preset hierarchy, responsive breakpoints, Composable Settings, Canvas system, Loop Builder |
| 20 | - **Error Learning**: Paste Divi errors — the plugin analyzes, fixes, and remembers the pattern |
| 21 | - **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) |
| 22 | - **Migration Support**: Converts Divi 4 CSS patterns for Divi 5 compatibility |
| 23 | - **CSS Examples**: Animation patterns, dark mode, WooCommerce, accessibility fixes, design tokens, button variants |
| 24 | |
| 25 | ## Quickstart |
| 26 | |
| 27 | Already have the plugin loaded? (See [Installation](#installation) if not.) |
| 28 | |
| 29 | ```bash |
| 30 | # 1. From your project root, copy the config template |
| 31 | mkdir -p .claude |
| 32 | cp /path/to/Divi5-ToolKit/plugins/divi5-toolkit/templates/divi5-toolkit.local.md .claude/divi5-toolkit.local.md |
| 33 | ``` |
| 34 | |
| 35 | Edit `.claude/divi5-toolkit.local.md` and set `css_prefix` to your project's class prefix (e.g., `acme`). Leave the other defaults alone. |
| 36 | |
| 37 | In Claude Code, type `/divi5-toolkit:` — autocomplete should show all 8 commands. Try one: |
| 38 | |
| 39 | ``` |
| 40 | /divi5-toolkit:generate primary button with gold hover state |
| 41 | ``` |
| 42 | |
| 43 | 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. |
| 44 | |
| 45 | **Next steps:** |
| 46 | - [`docs/workflows.md`](docs/workflows.md) — Build a full landing page, migrate from Divi 4, audit a project, add dark mode, etc. |
| 47 | - [`docs/usage.md`](docs/usage.md) — What every command, agent, and skill does in detail |
| 48 | - [`docs/configuration.md`](docs/configuration.md) — Tune the plugin for your project type |
| 49 | |
| 50 | ## Commands |
| 51 | |
| 52 | | Command | Description | |
| 53 | |---------|-------------| |
| 54 | | `/divi5-toolkit:generate` | Generate Divi 5-ready CSS for any component | |
| 55 | | `/divi5-toolkit:validate` | Validate CSS for Divi 5 compatibility | |
| 56 | | `/divi5-toolkit:convert` | Convert existing CSS to Divi 5 format | |
| 57 | | `/divi5-toolkit:diagnose` | Diagnose a Divi 5 symptom/error and return root cause + fix | |
| 58 | | `/divi5-toolkit:research` | Research latest Divi 5 updates | |
| 59 | | `/divi5-toolkit:scaffold` | Generate complete page section templates | |
| 60 | | `/divi5-toolkit:audit` | Run a full project CSS audit with scoring | |
| 61 | | `/divi5-toolkit:responsive` | Check a page across device sizes (phones, tablets, laptops, widescreen) — live browser testing via MCP, or static CSS analysis | |
| 62 | |
| 63 | ## Agents |
| 64 | |
| 65 | | Agent | Triggers When | |
| 66 | |-------|---------------| |
| 67 | | `divi5-validator` | After writing/editing CSS files (via PostToolUse hook, if `auto_validate: true`) | |
| 68 | | `divi5-error-learner` | When you paste Divi error messages or describe CSS issues | |
| 69 | | `divi5-researcher` | On-demand via `/divi5-toolkit:research` or when unknown Divi errors need research | |
| 70 | | `divi5-accessibility` | When reviewing CSS for accessibility, or when writing interactive element styles | |
| 71 | | `divi5-performance` | When the user mentions performance, Core Web Vitals (LCP, INP, CLS), slow Divi pages, render-blocking CSS, font loading, or cache-plugin conflicts | |
| 72 | |
| 73 | ## Skills |
| 74 | |
| 75 | | Skill | Activat |
Related
6 picksType
- jcodemunch-mcpToken-efficient code exploration via tree-sitter AST parsing. 70+ languages, 95%+ token savings.Jul 2026
- minimax-coding-plan-mcpSpecialized MiniMax Model Context Protocol (MCP) server designed for coding-plan usersFeb 2026
- neoNeo.mjs is a self-evolving software organism: a professional end-to-end AI engineering team whose cross-model swarm inhabits live apps via Neural Link, Active Hybrid GraphRAG, DreamService, and self-healing loops.Jul 2026
- shadcn-ui-mcp-serverA Model Context Protocol (MCP) server for shadcn/ui components, providing AI assistants with access to component source code, demos, blocks, and metadata.May 2026
- kicad-mcp-proProduction-grade MCP server for KiCad EDA—PCB design, DRC, simulation, BOM, DFM, and manufacturing.Jul 2026
- taiga-ui-mcpModel Context Protocol server providing Taiga UI documentation search and scaffolding tools.Jul 2026
