divi-5-builder

Solid

Use this skill when users want to build, edit, or design pages and layouts on Divi 5 WordPress sites. Triggers include creating landing pages, hero sections, testimonial cards, pricing tables, feature grids, blog listing pages with post loops and pagination; adding or modifying sections on existing pages by page ID; setting up design systems with tokens and presets; theme builder templates for headers, footers, and post/page body layouts; mega menus and site navigation; saving to or loading from the Divi library; auditing or cleaning up presets. Handles animations, hover effects, responsive design, and dynamic content. Also covers special effects like WebGL shader backgrounds and advanced CSS animations via the DiviOps Design Library plugin. Do NOT use for custom PHP/plugins, child theme development, standalone CSS authoring, SQL queries, WooCommerce configuration, SEO setup, standalone Three.js projects without WordPress, or non-Divi builders like Elementor.

Web & Frontend 10 stars 0 forks Updated today NOASSERTION

Install

View on GitHub

Quality Score: 72/100

Stars 20%
35
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
80
License 10%
100
Description 5%
100

Skill Content

# Divi 5 Builder Skill Build modern, VB-editable Divi 5 pages programmatically via MCP tools. ## Reference Files Read the right file for the task at hand — don't load everything. | Task | Read first | |------|-----------| | Using MCP tools & targeting | [tools.md](references/tools.md) | | Creating/editing pages | [design-guide.md](references/design-guide.md) → [module-formats.md](references/module-formats.md) | | Copy-paste minimum-valid block snippets | [minimal-snippets.md](references/minimal-snippets.md) (Heading, Text, Button, Blurb, Icon, Image) | | Module attribute paths | [module-formats.md](references/module-formats.md) (Tier 1 free — Tier 2 patterns + Tier 3 per-module are Pro) | | Adding CSS classes to modules | [design-effects.md](references/design-effects.md) — uses `module.decoration.attributes`, NOT `className` | | CSS effects & WebGL shaders | [design-effects.md](references/design-effects.md) | | Mega menus & navigation | [mega-menu-pattern.md](references/mega-menu-pattern.md) | | Presets & cleanup | [presets.md](references/presets.md) | | Design system setup | [SKILL.md](#design-system-lifecycle) (below) → [presets.md](references/presets.md) | | Page templates | [patterns/](references/patterns/) — SaaS landing, more coming | ## Workflow Best Practices 1. **Build incrementally**: `create_page` → `section_append` × N 2. **Always label sections**: `meta.adminLabel` on every section 3. **Label key modules**: Add admin labels to modules you might edit later 4...

Details

Author
oaris-dev
Repository
oaris-dev/diviops
Created
1 months ago
Last Updated
today
Language
PHP
License
NOASSERTION

Integrates with

WordPress · CMS Model Context Protocol · AI

Related Skills

Web & Frontend Featured

code-to-prd

Reverse-engineer any codebase into a complete Product Requirements Document (PRD). Analyzes routes, components, state management, API integrations, and user interactions to produce business-readable documentation detailed enough for engineers or AI agents to fully reconstruct every page and endpoint. Works with frontend frameworks (React, Vue, Angular, Svelte, Next.js, Nuxt), backend frameworks (NestJS, Django, Express, FastAPI), and fullstack applications. Trigger when users mention: generate PRD, reverse-engineer requirements, code to documentation, extract product specs from code, document page logic, analyze page fields and interactions, create a functional inventory, write requirements from an existing codebase, document API endpoints, or analyze backend routes.

16,173 Updated today
alirezarezvani
Web & Frontend Featured

lifecyclemigrate-from-nextjs

Step-by-step migration from Next.js App Router to TanStack Start: route definition conversion, API mapping, server function conversion from Server Actions, middleware conversion, data fetching pattern changes.

14,498 Updated today
TanStack
Web & Frontend Featured

ckmbanner-design

Design banners for social media, ads, website heroes, creative assets, and print. Multiple art direction options with AI-generated visuals. Actions: design, create, generate banner. Platforms: Facebook, Twitter/X, LinkedIn, YouTube, Instagram, Google Display, website hero, print. Styles: minimalist, gradient, bold typography, photo-based, illustrated, geometric, retro, glassmorphism, 3D, neon, duotone, editorial, collage. Uses ui-ux-pro-max, frontend-design, ai-artist, ai-multimodal skills.

62,072 Updated 1 months ago
nextlevelbuilder