Elementor Pro Designer Skill

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

5 stars 2 forksFrontend & Design

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add jainshwetank/elementor-pro-designer-skill --skill elementor-pro-designer-skill

Manual install

git clone --depth 1 https://github.com/jainshwetank/elementor-pro-designer-skill.git /tmp/elementor-pro-designer-skill
mkdir -p ~/.claude/skills
cp -r /tmp/elementor-pro-designer-skill/. ~/.claude/skills/elementor-pro-designer-skill

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# Elementor Pro V4 — Visual Builder Skill

## How to Use This Skill

This file covers the V4 panel structure and decision rules. Detailed references are in:

- **references/panel.md** — Full tab/widget/field reference, Variables Manager, Class Manager
- **references/classes.md** — Class system, variable naming, how many to create, state variants
- **references/patterns.md** — Reusable layout patterns with panel instructions
- **references/troubleshooting.md** — Common problems and fixes

Read the relevant reference before giving panel instructions.

---

## V4 vs V3: What Changed

V4 is a breaking change from V3 in several areas. Never suggest V3 patterns.

| Area | V3 | V4 |
|---|---|---|
| Primary layout widget | Container | **Flexbox** (atomic) |
| Secondary layout widget | Inner Container | **Div block** (atomic) |
| Panel tabs | Content / Style / Advanced | **General / Style / Interactions** — no Advanced tab |
| Class system | Limited | **Class Manager** — global reusable classes with 4 states |
| Design tokens | Not native | **Variables Manager** — CSS custom properties |
| Interactions | Basic | Native per-element, stackable, scroll-triggered |
| Typography | Text Editor widget | **Paragraph** (atomic) replaces Text Editor |

**Critical**: If you catch yourself writing "Advanced tab" or "Container widget" — stop. Those are V3. In V4: Style tab, Flexbox widget, and Interactions tab.

---

## First Questions to Ask

Read the full skill on GitHub

Details

Skill name: elementor-pro-designer-skill
Repository: jainshwetank/elementor-pro-designer-skill
License: MIT
Repo updated: 30 March 2026

FAQ

What does the Elementor Pro Designer Skill skill do?

How do I install the Elementor Pro Designer Skill skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add jainshwetank/elementor-pro-designer-skill --skill elementor-pro-designer-skill. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Elementor Pro Designer Skill popular?

It lives in jainshwetank/elementor-pro-designer-skill, which has 5 GitHub stars and 2 forks.

Related skills

Image First Frontend

jinshiqwq/image-first-frontend

Generate a polished frontend reference screenshot through a configurable GPT-image-2-compatible generations endpoint, save and show versioned previews inside the project, revise selected previews through a configurable /images/edits endpoint, and reproduce only the user-approved design as functional frontend code with high visual fidelity. Use when Codex is asked to design, build, restyle, or recreate a web page, application screen, dashboard, landing page, or UI component through an image-first workflow, design approval loop, screenshot-driven implementation, pixel matching, or a 1:1 frontend

Frontend & Design

Cockpit UI Skill

KrasAndy/cockpit-ui-skill

暗色 cockpit 风格的 UI/UX 词库与 cheatsheet。Claude 在开发能源 / 工业驾驶舱、暗色 dashboard、B 端 SaaS 前端时加载本 skill,会按 cheatsheet 中的三主题 token、字号 / 间距 / 圆角 / 阴影梯度、6 个核心组件 API(LayoutShell / SplitPane / ResponsiveGrid / DataTable / ThemeProvider / I18nProvider)以及实际可导出的 React + TypeScript 代码。

Frontend & Design

Interface Polish

Tsavsar/interface-polish

A checklist of concrete UI craft rules covering border radius, shadows, animation timing, typography, color tokens, accessibility, layout spacing, and microcopy. Use this skill whenever building, reviewing, or refining any web UI, component, page, landing page, or design system code, even if the user only says "make it look better", "polish this", "review my component", or asks for a button, menu, modal, form, or any frontend work. Also use it when writing UI copy like button labels, empty states, or confirmation dialogs. Distilled from the interfaces.dev cheat sheet.

Frontend & Design

Build Your Own Component

ethankongee/build-your-own-component

Generate a complete UI component library with 24 components (Accordion through Tooltip). Supports React or Vanilla JS. Can produce 1-3 design variations for side-by-side comparison. Use when the user wants to create a component library, design system, UI kit, or build reusable UI components.

Frontend & Design

Oh My Design

favorPotato/oh-my-design

Use this skill when the user asks to design / mock up / prototype a UI, iterate on visual design, compare visual candidates, or explore visual approaches before implementation. Triggered by phrases like "design a UI", "mockup", "prototype the screen", "give me 3 visual options", "make it look like…", or any request that is fundamentally about look-and-feel rather than business logic. The skill writes React 18 prototypes under `<cwd>/.design/<slug>/`, hands the user a Tweaks panel to pick / iterate, and returns the selection plus a self-describing manifest the next agent can implement against.

Frontend & Design

Apple Design

XOVIET-GAME/apple-design-skill

Complete Apple Human Interface Guidelines (HIG) and Apple Design System standard. Use when designing, building, or auditing UI/UX for iOS, iPadOS, macOS, watchOS, visionOS, or Apple-styled web and mobile applications.

Frontend & Design

Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.