Use this skill when validating CSS for Divi 5 compatibility, checking for unsupported features, troubleshooting Divi CSS issues, or when the user mentions CSS not working in Divi. Provides compatibility rules, validation patterns, and fixes for common issues.
/plugin marketplace add cjsimon2/Divi5-ToolKit/plugin install cjsimon2-divi5-toolkit@cjsimon2/Divi5-ToolKitThis skill inherits all available tools. When active, it can use any tool Claude has access to.
references/unit-conversions.mdWhen reviewing CSS for Divi 5, check for these issues:
| Feature | Status | Fix |
|---|---|---|
ch unit | NOT SUPPORTED | Use rem (75ch -> 60rem) |
ex unit | NOT SUPPORTED | Use em or rem |
| Container Queries | NOT YET | Coming in future update |
@container | NOT YET | Use media queries |
| Feature | Status | Notes |
|---|---|---|
| CSS Variables | SUPPORTED | Must be in :root for global scope |
calc() | SUPPORTED | Full support |
clamp() | SUPPORTED | Full support |
min() | SUPPORTED | Full support |
max() | SUPPORTED | Full support |
| Flexbox | SUPPORTED | Native to Divi 5 layout |
| CSS Grid | SUPPORTED | Full support |
px | SUPPORTED | Standard unit |
em | SUPPORTED | Relative to parent font |
rem | SUPPORTED | Relative to root font |
% | SUPPORTED | Percentage |
vw | SUPPORTED | Viewport width |
vh | SUPPORTED | Viewport height |
vmin | SUPPORTED | Viewport minimum |
vmax | SUPPORTED | Viewport maximum |
/* INVALID - ch not supported */
max-width: 75ch;
width: 60ch;
/* VALID - use rem instead */
max-width: 60rem; /* 75ch -> 60rem */
width: 48rem; /* 60ch -> 48rem */
Conversion formula: 1ch -> approx. 0.8rem (varies by font)
/* WILL NOT WORK - Divi overrides this */
.et_pb_button {
background-color: #000000;
}
/* WILL WORK - proper override */
body .et_pb_button {
background-color: #000000 !important;
}
Required for buttons:
body prefix for specificity!important on all properties/* WILL NOT WORK - wrong scope */
.my-section {
--my-color: #2ea3f2;
}
.other-element {
color: var(--my-color); /* Undefined! */
}
/* WILL WORK - :root scope */
:root {
--my-color: #2ea3f2;
}
.other-element {
color: var(--my-color); /* Works! */
}
<!-- INVALID - raw CSS in Code Module -->
.my-class { color: red; }
<!-- VALID - wrapped in style tags -->
<style>
.my-class { color: red; }
</style>
/* VALID for Theme Options - no tags */
:root {
--my-color: #2ea3f2;
}
body .et_pb_button {
background-color: var(--my-color) !important;
}
<!-- INVALID for Theme Options - has tags -->
<style>
:root { --my-color: #2ea3f2; }
</style>
Symptom: Custom button colors/styles ignored Cause: Low specificity, missing !important Fix:
body .et_pb_button {
background-color: #000000 !important;
border-radius: 0 !important;
/* ALL properties need !important */
}
Symptom: Text stretches across entire screen
Cause: Using ch unit or no max-width
Fix:
.et_pb_text_inner p {
max-width: 60rem; /* NOT 75ch */
}
Symptom: Variables undefined or not applying Cause: Wrong scope or wrong syntax Fix:
/* Variables MUST be in :root */
:root {
--my-color: #2ea3f2;
}
/* Reference with var() */
.element {
color: var(--my-color);
}
Symptom: Hover effects ignored Cause: Divi's inline styles override Fix:
body .et_pb_button:hover {
background-color: #222222 !important;
/* Include ALL hover properties */
}
Symptom: Fallback font displays instead Cause: Font not loaded or wrong name Fix:
/* Ensure font is loaded via Google Fonts or @font-face */
/* Use exact font name with proper fallbacks */
font-family: 'Fira Sans', system-ui, sans-serif !important;
Symptom: Background color different than expected Cause: Divi's inline styles Fix:
.et_pb_section.my-dark-section {
background-color: #1d1f22 !important;
}
Symptom: Layout doesn't match design Cause: Divi 5 uses Flexbox by default, conflicts with custom Fix: Work with Divi's Flexbox, don't fight it
/* Use Divi's built-in flex controls in Visual Builder */
/* Or override completely */
.et_pb_row {
display: flex !important;
flex-direction: row !important;
gap: 2rem !important;
}
When reviewing CSS for Divi 5, verify:
ch or ex units@container queriesbody prefix and !important:root<style> tags<style> tags!importantrem not chUsually means low specificity. Add !important.
Check for typos or unsupported properties.
Using ch or ex. Replace with rem or em.
Syntax error. Check for missing semicolons, braces, or quotes.
Check:
/* If Divi uses: */
style="background-color: blue !important;"
/* You need higher specificity: */
body .et_pb_section#my-id {
background-color: red !important;
}
/* Or use ID selector for highest specificity */
Configure in .claude/divi5-toolkit.local.md:
---
validation_mode: advisory # or "strict"
---
When issues aren't resolved:
/divi5-toolkit:research command for current infoThis skill should be used when the user asks to "create an agent", "add an agent", "write a subagent", "agent frontmatter", "when to use description", "agent examples", "agent tools", "agent colors", "autonomous agent", or needs guidance on agent structure, system prompts, triggering conditions, or agent development best practices for Claude Code plugins.
This skill should be used when the user asks to "create a slash command", "add a command", "write a custom command", "define command arguments", "use command frontmatter", "organize commands", "create command with file references", "interactive command", "use AskUserQuestion in command", or needs guidance on slash command structure, YAML frontmatter fields, dynamic arguments, bash execution in commands, user interaction patterns, or command development best practices for Claude Code.
This skill should be used when the user asks to "create a hook", "add a PreToolUse/PostToolUse/Stop hook", "validate tool use", "implement prompt-based hooks", "use ${CLAUDE_PLUGIN_ROOT}", "set up event-driven automation", "block dangerous commands", or mentions hook events (PreToolUse, PostToolUse, Stop, SubagentStop, SessionStart, SessionEnd, UserPromptSubmit, PreCompact, Notification). Provides comprehensive guidance for creating and implementing Claude Code plugin hooks with focus on advanced prompt-based hooks API.