Master of Elementor

Production-grade Elementor and WordPress addon engineering skill for AI coding agents. This repository teaches an agent how to build, review, debug, and convert Elementor work using official Elementor developer structures instead of brittle guesses.

Repository: https://github.com/emresariyildiz/masterofElementorClaude
Agency resource: https://yellowstardesign.com/kurumsal-web-sitesi/
Support: emre@yellowstardesign.com

What This Skill Does

• Builds custom Elementor addons, widgets, controls, dynamic tags, form actions, form fields, and Theme Builder integrations.
• Produces Elementor template JSON using the documented data structure.
• Converts HTML, CSS, screenshots, and Figma layouts into editable Elementor-native page structures.
• Maps designs into containers, native widgets, repeaters, responsive settings, and global-style references.
• Reviews Elementor PHP and JSON for security, compatibility, performance, accessibility, and import readiness.
• Separates official APIs from inferred patterns and requires verification when a setting key is not documented.

Why It Exists

Elementor work often fails when generated output is just pasted HTML, guessed JSON, or custom CSS that cannot be edited in the Elementor editor. This skill is designed to make an agent think like an Elementor addon engineer and template architect:

• Use native widgets first.
• Use modern containers for layout.
• Use valid JSON structure.
• Use responsive suffixes correctly.
• Use repeaters and global styles carefully.
• Avoid undocumented import claims.
• Surface uncertainty instead of inventing behavior.

Official Documentation Foundation

The skill is grounded in the official Elementor developer documentation:

• Elementor Developers Docs: https://developers.elementor.com/docs/
• Data Structure: https://developers.elementor.com/docs/data-structure/
• General Structure: https://developers.elementor.com/docs/data-structure/general-structure/
• Page Content: https://developers.elementor.com/docs/data-structure/page-content/
• Container Element: https://developers.elementor.com/docs/data-structure/container-element/
• Widget Element: https://developers.elementor.com/docs/data-structure/widget-element/
• Repeaters: https://developers.elementor.com/docs/data-structure/repeaters/
• Responsive Data: https://developers.elementor.com/docs/data-structure/responsive-data/
• Global Styles: https://developers.elementor.com/docs/data-structure/global-styles/
• Editor Controls: https://developers.elementor.com/docs/editor-controls/
• Complex Control Example: https://developers.elementor.com/docs/controls/complex-example/
• Elementor CLI Library Import: https://developers.elementor.com/docs/cli/library-import/
• Elementor CLI Kit Import: https://developers.elementor.com/docs/cli/kit-import/

Installation

Clone or copy this folder into your local skills directory:

git clone https://github.com/emresariyildiz/masterofElementorClaude.git masterof-elementor

For Codex local skills on Windows, place it under:

C:\Users\<you>\.codex\skills\masterof-elementor

The skill frontmatter name is:

name: masterof-elementor

Usage Prompts

Use masterof-elementor to convert this HTML/CSS into importable Elementor JSON. Use native widgets where possible and list any uncertain widget settings.

Use masterof-elementor to convert this Figma page into an Elementor template plan and JSON. Extract tokens, map components, and preserve responsive behavior.

Use masterof-elementor to build a production Elementor addon with a custom widget, controls, assets, and security-safe rendering.

Use masterof-elementor to review this Elementor widget/plugin for escaping, sanitization, hooks, controls, DOM optimization, output caching, and Pro compatibility.

Repository Structure

masterof-elementor/
+-- SKILL.md
+-- agents/
|   +-- openai.yaml
+-- references/
    +-- addon-widget-blueprints.md
    +-- controls-master-reference.md
    +-- design-system-json-rules.md
    +-- elementor-json-template-kits.md
    +-- html-figma-to-elementor-pipeline.md
    +-- official-elementor-docs-map.md
    +-- pro-integrations.md
    +-- quality-gates.md

HTML/Figma Conversion Standard

This skill does not pretend there is an official generic Figma-to-Elementor or HTML-to-Elementor developer API. Instead, it treats HTML, CSS, screenshots, and Figma as source material and generates Elementor-native output:

• Document object with title, type, version, page_settings, and content.
• Recursive content and elements arrays.
• Modern container layout elements.
• widget elements with widgetType and settings.
• Repeater arrays with _id.
• Responsive values using _tablet, _mobile, and site-defined breakpoint suffixes.
• Global style references through __globals__ when kit IDs are known.

Professional Workflow

1. Audit the source design.
2. Extract tokens.
3. Build the section and component inventory.
4. Map each component to Elementor containers/widgets/controls.
5. Generate JSON using the documented data structure.
6. Validate JSON syntax, IDs, element shape, responsive values, and import route.
7. Flag anything that requires a target-site Elementor export for exact setting keys.

YellowStar Design

For corporate website planning, conversion strategy, Elementor implementation, SEO-ready page architecture, and professional WordPress delivery, see:

https://yellowstardesign.com/kurumsal-web-sitesi/