Stats
Actions
Tags
From cklph-figma-to-wp
Run the end-to-end Figma-to-Elementor translation of a specific frame into a page or template, step by step with verification gates. Use once connected and scoped, to actually build a design into Elementor and iterate it to a pixel match.
How this skill is triggered — by the user, by Claude, or both
Slash command
/cklph-figma-to-wp:translateThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Execute the build as a gated loop. Don't generate the whole page and hope — build the section, write
Execute the build as a gated loop. Don't generate the whole page and hope — build the section, write
it, look at it, fix, move on. Invoke the focused skills by name at each step (see start-here).
Scope the frame. Get the design: figma-read (get_metadata → screenshot → get_design_context),
noting which children are visible vs hidden. Extract tokens (figma-tokens) and check the Kit for
matching globals (elementor-templates). One frame at a time.
Learn the target. cwp meta-read the live target + 1–2 sibling pages; el-tools.py tree /
widgets them. Decide which existing widgets to reuse (Pro WooCommerce widgets, the theme's
custom widgets) and which globals to reference. Mirror the site, don't invent.
Safe copy. Duplicate the target template to a draft with no display conditions
(elementor-templates). All building happens here — the live site is untouched until it matches.
Generate / patch. Build _elementor_data for the section, reusing the existing structure where
possible (patch the read-back JSON rather than authoring from scratch). Bind colors/type to Kit
globals via __globals__. Apply gaps/alignment/responsive via the html-widget <style> channel
(elementor-styling). el-tools.py validate, then cwp meta-write, then cwp wp elementor flush-css.
Verify (gate). visual-verify: screenshot the draft against the Figma frame, crop the section,
compare concretely (presence/order → alignment → spacing → type → color → radius → icons). Fix the
deltas and re-capture. Do not advance while a delta remains. For a hard match, run the
visual-reviewer agent.
Responsive (gate). Repeat verify at tablet (~800) and mobile (~500, Chrome's floor) and any
open/closed nav states. Apply elementor-responsive fixes (stacking, min-width:0, gallery, nav
collapse). Re-verify each breakpoint.
Ship. Once every breakpoint matches, publish and move the display condition onto the new template (or write the layout onto the live one). Confirm on the real front-end URL, cache-busted.
Provides a checklist for code reviews covering functionality, security, performance, maintainability, tests, and quality. Use for pull requests, audits, team standards, and developer training.
npx claudepluginhub chykalophia/cklph-marketplace --plugin cklph-figma-to-wp