HTML2Elementor

Converts HTML+CSS into Elementor JSON, with a verifier that checks the cascade

Tested · Works

Test report

Verdict
Tested · Works
Score
7.6/10
Tested
Aug 10, 2026
Environment
Claude Code 2.x (agent harness)

Converted a fresh 3-section landing page and scored it against a hand-written Elementor JSON of the same page using the repo's own verifier: the converter came back with 0 issues, the hand-built version with 16 — inherited var(--muted) text colours, hero max-widths and every margin-bottom silently lost. It also resolved var(--brand) into hashed page-unique colour globals, derived a button hover shade and emitted tablet/mobile flex breakpoints that nobody writes by hand. Two documentation faults cost it: the invocation printed in SKILL.md dies with ModuleNotFoundError when run from the install directory (the package resolves only from the parent dir), and --upload plus the referenced playsand/cleanup_kit.sh depend on a docker sandbox that is not in the repo, so image upload silently no-ops. A page whose content is not inside semantic <section> tags converted to an empty layout.

Scored on four weighted criteria — install, triggering, output vs. baseline, docs. How scoring works

  • Installs cleanly 4/5
  • Triggers reliably 5/5
  • Output vs. baseline 8/10
  • Docs & honesty 2/5

What HTML2Elementor does

A local Python converter that turns an HTML page with its CSS into an Elementor _elementor_data payload plus a kit file of custom colour and typography globals, then verifies the result node-by-node against the source. Triggers when you paste or point at HTML and want it as an Elementor page in WordPress: "convert this landing to Elementor", "Elementor JSON from this markup", "bring this Tailwind mockup into WordPress". Handles CSS custom properties, grid detection, per-side borders and absolute positioning that hand-written Elementor JSON usually loses.

How to install HTML2Elementor

mkdir -p ~/.claude/skills
git clone https://github.com/dudaster/html2elementor.git ~/.claude/skills/html2elementor
cd ~/.claude/skills/html2elementor && python3 -m venv .venv && .venv/bin/pip install -r requirements.txt

Skills live in ~/.claude/skills/ (global) or .claude/skills/ (per-project). Restart Claude Code after installing.

Commands — how to trigger HTML2Elementor

  • /html2elementor Converts HTML+CSS into Elementor JSON, with a verifier that checks the cascade

It also activates on plain-language prompts like these:

  • Convert this HTML landing page into Elementor JSON I can import
  • Turn my CSS custom-properties page into an Elementor kit file
  • Convert this dark CTA band section to Elementor page data

Frequently asked questions

Is the HTML2Elementor skill free?
Yes. The skill itself is free from dudaster/html2elementor. SkillProof publishes the install command and an independent test verdict at no cost.
Does HTML2Elementor work with Claude Code?
We tested it with Claude Code 2.x (agent harness) on Aug 10, 2026. Verdict: Tested · Works. Converted a fresh 3-section landing page and scored it against a hand-written Elementor JSON of the same page using the repo's own verifier: the converter came back with 0 issues, the hand-built version with 16 — inherited var(--muted) text colours, hero max-widths and every margin-bottom silently lost. It also resolved var(--brand) into hashed page-unique colour globals, derived a button hover shade and emitted tablet/mobile flex breakpoints that nobody writes by hand. Two documentation faults cost it: the invocation printed in SKILL.md dies with ModuleNotFoundError when run from the install directory (the package resolves only from the parent dir), and --upload plus the referenced playsand/cleanup_kit.sh depend on a docker sandbox that is not in the repo, so image upload silently no-ops. A page whose content is not inside semantic <section> tags converted to an empty layout.
What is the HTML2Elementor SkillProof Score?
7.6/10 — installs cleanly 4/5, triggers reliably 5/5, output vs. baseline 8/10, docs & honesty 2/5.
How do I install HTML2Elementor?
Copy the install command from this page, run it in your terminal, and restart Claude Code. Skills live in ~/.claude/skills/ (global) or .claude/skills/ inside a project.
Can I use HTML2Elementor with Cursor, Copilot, Gemini CLI, Codex or other AI tools?
The SKILL.md format is native to Claude (Claude Code, Desktop, claude.ai). The instructions inside adapt to other assistants: Cursor rules, GitHub Copilot instructions, Windsurf rules, Custom GPTs, AGENTS.md for OpenAI Codex, and GEMINI.md for Google Gemini CLI — our conversion guides cover each, and the free converter on the tools page does the wrapping for you.