Skip to content
Conduit

skill

elementor-pro-designer-skill

Claude AI skill for Elementor Pro visual editor — for designers using the panel, not PHP developers. Class system, Variables Manager, dark mode, responsive patterns.

jainshwetank/elementor-pro-designer-skillcommunitylistedunreviewed
Use skill

Set up

Skills are installed by placing their folder where your agent loads skills.

Download ZIP from GitHub Open the repository

The download comes from github.com/jainshwetank/elementor-pro-designer-skill itself, not from our server, so what you get is exactly what its author published.

Install instructions come from the README

Skills do not use an MCP config. Follow the steps in the README below.

README

synced Oct 17, 2026

elementor-pro-designer-skill

A Claude skill for designing in the Elementor Pro V4 visual editor.

Every existing Elementor skill for Claude is written for PHP developers building addons. This one is for designers and builders working in the visual panel — the actual Elementor interface most people use every day.

What it does

Gives Claude accurate, panel-first knowledge of Elementor Pro V4 so it can:

  • Give instructions using correct V4 panel field names (not CSS properties)
  • Follow the decision hierarchy: classes → panel settings → variables → code
  • Avoid the common AI mistakes that produce unmaintainable builds
  • Set up dark mode correctly using [data-theme] CSS variable swaps
  • Configure responsive behavior at all 4 V4 breakpoints
  • Build staggered scroll animations using the native Interactions tab
  • Troubleshoot layout, spacing, typography, and dark mode problems

What's different from other Elementor skills

peixotorms/elementor-*this skill
TargetPHP developer building addonsDesigner using the visual editor
CoversWidget_Base API, hooks, PHPPanel tabs, classes, variables, patterns
Design intentNonePanel-first, class-first, anti-hardcode
V4 specificsPartialComplete — no V3 contamination

Install

Claude.ai (upload)

  1. Download elementor-pro-designer-skill.skill from Releases
  2. In Claude.ai, start a new chat
  3. Upload the .skill file
  4. Start building

Claude Code (CLI)

claude plugin marketplace add [your-github-username]/elementor-pro-designer-skill
claude plugin install elementor-pro-designer-skill

skillfish

npx skillfish add [your-github-username]/elementor-pro-designer-skill

File structure

elementor-pro-designer-skill/
├── SKILL.md                     — Main skill: decision hierarchy, V4/V3 delta, common AI mistakes
├── references/
│   ├── panel.md                 — Full panel tab/field reference, widget list, Class Manager, Variables Manager
│   ├── patterns.md              — Reusable layout patterns with complete panel instructions
│   └── troubleshooting.md      — Common problems and fixes
└── examples/
    └── (golden examples — coming in v1.1)

Compatibility

  • Elementor Pro 4.x
  • WordPress 6.x
  • Tested with Claude Sonnet (claude.ai and Claude Code)

Contributing

Issues and PRs welcome. Most useful contributions:

  • Additional layout patterns from production builds
  • New troubleshooting entries (real problems you hit)
  • Version-specific notes when Elementor Pro updates break behavior
  • Golden examples (complete sections with panel instructions)

Changelog

v1.0.0

  • Initial release
  • Panel reference (all 3 tabs, all fields)
  • V4 vs V3 delta table
  • Common AI mistakes section
  • Decision hierarchy
  • Layout patterns: hero, two-column, frame, step header, staggered entrance
  • Troubleshooting: layout, spacing, typography, dark mode, interactions, custom code
  • Responsive system documentation

License

MIT

↑↓ navigate openesc close