⏳ This skill is pending AI review.

Scores will appear once the review pipeline completes.

v1.0.0

elementor-pro-designer-skill

@jainshwetank⭐ 5 stars

Use this skill whenever helping someone build, design, or troubleshoot layouts in Elementor Pro V4 using the visual editor. Triggers on ANY mention of Elementor, page builder, Flexbox widget, Div block, section layout, widget configuration, responsive breakpoints, dark mode, scroll animations, Interactions tab, Variables Manager, Class Manager, Custom Code snippets, or any visual design work inside the Elementor panel. Also trigger when someone asks how to position elements, set spacing, apply typography, configure dark mode, prevent FOUC, or build scroll-triggered effects in Elementor. ALWAYS use this skill before suggesting any Elementor V4 implementation — it contains critical V4-specific panel structure, common AI mistakes to avoid, and production-tested patterns.

Choose how to use this skill

You do not need every option. Choose the path your AI client supports. The stable page stays the same; versioned files are immutable.

Adopt or update this skill from https://proskills.md/skills/other/jainshwetank-elementor-pro-designer-skill. First identify the installation path supported by this platform, detect whether it is already installed, compare the installed version with the latest stable release, show me what will change, and only then install or update it. If no native installer is available, use the complete package or source fallback described on the page.

1. Native installer

This listing has no registered native installer command. Use the complete package or source fallback below, depending on what your client supports.

Do not guess an installer command or replace an existing version without reviewing the diff.

2. Complete package recommended

Download the ZIP when available. It includes SKILL.md plus the references, security notes and version metadata.

No complete ProSkills package is published for this listing yet.

3. Prompt-only

Copy the prompt above when the agent can read the stable page or when you want to adopt the workflow without installing a skill.

Need only the instruction file?

Download SKILL.md only if your client requires a single file. The complete ZIP is safer for a full installation because it preserves the references and release context.

No path installs or executes anything by itself. Your agent still needs access to the project files. Before updating, compare the installed version and review the diff.

—/10

// RATINGS

⭐GitHub Stars

⭐ 5 on GitHubGitHub ↗

New / niche

🟢ProSkills Score

—

📍

Not yet listed on ClawHub or SkillsMP

// README

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
Target	PHP developer building addons	Designer using the visual editor
Covers	Widget_Base API, hooks, PHP	Panel tabs, classes, variables, patterns
Design intent	None	Panel-first, class-first, anti-hardcode
V4 specifics	Partial	Complete — no V3 contamination

Install

Claude.ai (upload)

Download elementor-pro-designer-skill.skill from Releases
In Claude.ai, start a new chat
Upload the .skill file
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

// HOW IT'S BUILT

KEY FILES

SKILL.mdREADME.md

// REPO STATS

5 stars

// SHARE

Share on X Share on LinkedIn