Html2elementor

Convert HTML+CSS into Elementor JSON that imports into WordPress. Always use this skill whenever the user has HTML/CSS (pasted, file, URL, or AI-generated) and wants it to end up as an Elementor page — phrases like "convert HTML to Elementor", "import this landing into WordPress as Elementor", "make this Tailwind mockup an Elementor page", "turn my markup into Elementor JSON", "recreate this site in Elementor", or any variant. Do not try to produce Elementor JSON by hand — Elementor has non-obvious quirks (shared system-color globals that break previous pages, lazy-load hiding backgrounds, wid

16 stars 4 forksFrontend & Design

Install

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

npx skills add dudaster/html2elementor --skill html2elementor

Manual install

git clone --depth 1 https://github.com/dudaster/html2elementor.git /tmp/html2elementor
mkdir -p ~/.claude/skills
cp -r /tmp/html2elementor/. ~/.claude/skills/html2elementor

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

From the SKILL.md

# html2elementor

Paste HTML+CSS, get a JSON payload you can drop into `_elementor_data`. A small, free, open-source HTML → Elementor converter that runs locally.

## When to use this skill

Use whenever the user has HTML on one side and wants Elementor on the other. Triggering phrases include (but aren't limited to):

- "convert this HTML to Elementor"
- "import this landing page into WordPress"
- "recreate this design as an Elementor page"
- "turn my mockup into Elementor"
- "bring this Tailwind page into WordPress"
- "I have HTML from [tool X], make it Elementor"
- "Elementor JSON from this markup"

Also use it implicitly — the user pastes or attaches HTML and asks "make this work in Elementor" without naming a tool.

**Don't use for:**
- Editing pages that are already Elementor (use WP-CLI / REST API directly).
- Plain WordPress pages with no Elementor (just `wp_insert_post` with `post_content`).
- Figma / Sketch / design files — this converts markup, not design-tool exports. If the user has a Figma file, suggest they first export to HTML with a tool like Figma-to-HTML or Anima, then run that output through this skill.

## The four-step flow

**Prepare → convert → verify → import.** The first three are local and identical regardless of the user's WordPress setup. The fourth depends on how they run WordPress.

### Step 0 — Prepare the input

Read the full skill on GitHub

Details

Skill name: html2elementor
Repository: dudaster/html2elementor
License: MIT
Repo updated: 23 April 2026

FAQ

What does the Html2elementor skill do?

How do I install the Html2elementor skill?

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

Is Html2elementor popular?

It lives in dudaster/html2elementor, which has 16 GitHub stars and 4 forks.

Related skills

Interaction Design

rastian/interaction-design-skills

Apply interaction design (IxD) principles and frameworks to product and service design work. Use this skill when designing or evaluating interaction flows, micro-interactions, feedback mechanisms, affordances, mental models, component states, response time, animation and transitions, error recovery, input validation, task flows, or navigation patterns. Core audiences: product designers, UX designers, UI designers, service designers, and interaction designers working on digital products and services. Trigger on: interaction flow, micro-interaction, affordance, feedback design, state design (hov

Frontend & Design

Find Domain

paveldevyatov/ai-domain-name-generator

AI domain name generator, domain finder and domain availability checker — brainstorms brandable names and domain hacks for a project, then checks which are really free at the registries (RDAP and whois), honest about zones it can't verify. Use when the user wants to find, brainstorm, generate or check a domain name, asks whether a domain like X.com is available or taken, wants domain hacks (bit.ly-style names), or needs a brand or product name with a free domain for a project, startup or app.

Frontend & Design

Design Trends

growthaudit/claude-design-skills

Apply 2026 web design trends as complete styling systems to any artifact — landing pages, dashboards, presentations, components, or creative builds. Use this skill whenever the user mentions a design trend by name (e.g. "neo-brutalism", "neumorphism", "retrofuturism", "maximalism", "collage", "gamified", "dark mode", "vibrant", "bold typography", "3D immersive", "experimental navigation", "sustainable design", "motion design") or asks for something "trendy", "2026 style", "anti-design", "dopamine design", "Y2K", "retro-futuristic", "scrapbook style", "raw aesthetic", or similar. Also trigger w

Frontend & Design

Web Motion

Schmandarine/web-motion-skill

Closes the agentic coding loop for web animation. Lets Claude scroll the user's page while recording it (Playwright), extract frames, build a labelled contact sheet, and reason about timing/easing/trajectory frame-by-frame — plus motion design principles (Disney's 12, adapted for web, GSAP, CSS, scroll input) to name and fix what's wrong. Use whenever the user wants to add, improve, debug, or review any animation — scroll effects, transitions, hover states, entrance/exit, loading states, micro-interactions. Trigger even if the user doesn't say "animation" but describes something moving, appear

Frontend & Design

Work Canvas

JingbiaoMei/work-canvas-skill

Turn an agent's own work — progress, debugging, analysis, comparisons, decisions — into one self-contained, reviewable HTML page (a "work canvas" / 网页看板) the user opens in a browser. Use when the user asks to create an interactive, reviewable, "alignment", progress, status, comparison, or summary HTML / dashboard / report / 看板 to see where a long task stands, review and comment, compare options, or decide next steps — especially for long-running, multi-subsystem, or trial-and-error tasks where terminal logs are the wrong medium. Also use to close out a `/goal` command session with a progress/s

Frontend & Design

Screenshot to HTML

sevzq/screenshot-to-html

Replicate a UI screenshot/image/mockup into a high-fidelity, self-contained HTML page. Faithful image-to-HTML / screenshot-to-code cloning that matches the RENDERED result (not copied computed numbers) through a render -> screenshot -> compare -> refine loop using the local Chrome. Use whenever the user gives an image/screenshot/mockup/Figma export and wants HTML/CSS (plain or Tailwind), or asks to "复刻 / 还原 / clone / recreate / turn this design into a webpage".

Frontend & Design

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