convert-etchwp – NibWP Library

# Convert a Page to EtchWP

Using **NibWP + all available integrations**, the **EtchWP Pro** skill, and the **ACSS Skills Pro** skill, turn whatever the user provides into a fully functional, production-ready, **pixel-perfect** WordPress build — native EtchWP, driven by a generated ACSS design system, every element editable. Source-agnostic: it works the same whether they **attach a file, paste HTML/markup, share a URL, drop a screenshot/image, link a Figma frame, or point at an existing builder page**.

## When to use
– “Convert this into a WordPress site / page with EtchWP + ACSS.”
– Migrating from **Bricks / Elementor / Divi / WPBakery / Gutenberg** to EtchWP.
– Rebuilding a static **HTML/CSS** export, a **URL**, a **screenshot**, or a **Figma** design as a real, maintainable Etch build.

## Principles
– **Analyze before you touch anything.** No element gets built until the structure and design system are understood and a plan is approved.
– **Design system first.** Generate a complete ACSS configuration from the source and inject it — then everything binds to tokens.
– **Native + token-driven.** Native Etch elements only (form/video/nav-menu — never raw iframe/form/markup); every color/size/space is an ACSS variable with a `var()` fallback. No inline styles, no raw hex/px, no `clamp()` font hacks, no duplicated structures.
– **Reusable + dynamic.** Favor reusable components, dynamic templates, semantic HTML, and a maintainable architecture — everything stays fully editable in EtchWP.
– **Pixel-perfect across breakpoints.** Validate fidelity, responsiveness, accessibility, and performance at every stage, not just at the end.
– **Reversible.** Build to drafts / a staging area; keep the original recoverable until the user signs off.

## Process
1. **Detect the stack (preflight).** `nibwp/wp-get-site-info` + `nibwp/execute-php`: confirm **EtchWP** + **ACSS** are active, **ACF** + relevant CPTs, theme, breakpoints. Confirm the **EtchWP Pro** and **ACSS Pro** skills are available. Pull saved tokens/voice via `memory-recall`. (If the target builder is Bricks, switch to the **bricks-pro** skill for the build steps.)
2. **Scan & analyze the source.** Thoroughly read whatever was provided — structure, components, **design system, typography, spacing, colors, responsiveness, and interactions**. Identify sections, the single H1, repeated patterns, forms, navigation, media, and any dynamic/data-driven areas.
3. **Blueprint the site.** Produce a complete plan: **all pages, templates (header/footer/single/archive), blog structure, custom post types, taxonomies, custom fields, reusable components, and dynamic content areas.** **Present the execution plan and get approval before building** (defer the go/no-go + any live swap to the **Safe changes** workflow).
4. **Generate the ACSS design system.** Extract the design system into a **comprehensive ACSS configuration**: complete **color palette, typography scale, spacing system, containers, breakpoints, shadows, border-radius, transitions, responsive settings, and light/dark mode** support. **Inject it into ACSS options** (via the ACSS Pro skill / `execute-php`) and **validate** that all variables and tokens resolve and apply before continuing. Save the system to Memory.
5. **Build a master TODO list and track it throughout.** Include: setup, global styles, templates, components, headers, footers, forms, dynamic content, responsive adjustments, accessibility, SEO, schema markup, performance optimization, and final QA. Update it as you go.
6. **Build with EtchWP + ACSS best practices.** Through the EtchWP Pro skill (`html-to-component` / `url-to-component` / `image-to-component` / `figma-to-component` → `refine-component`), build section-by-section and template-by-template:
– Reusable components + global classes; **no inline styles, no duplicated structures**.
– Semantic HTML; one H1; logical heading order; native elements for forms/video/nav.
– **Dynamic templates** + query loops for repeated/data-driven content (bind to the CPT/ACF from the blueprint).
– Headers, footers, and global parts as reusable templates; every element editable in EtchWP.
7. **Validate at every stage.** Run the EtchWP Pro **hard validator** (rejects unknown elements, inline styles, hardcodes outside `var()`, missing global classes, static-where-dynamic, raw form/iframe/nav) → fix loop until clean. Check responsiveness, accessibility, and performance after each major section — don’t defer it all to the end.
8. **Final parity + QA.** Compare the finished build against the source at **every breakpoint**: layout, type, spacing, color, content, links, images, interactions. The result must be **indistinguishable from the original** while clean, scalable, and maintainable. Run the SEO + pre-launch + performance workflows before sign-off.

## Rules
**Do**
– Analyze + **present an execution plan before building**; track the master TODO throughout.
– Generate + **inject + validate the ACSS configuration first**; bind everything to tokens.
– Use the **EtchWP Pro + ACSS Pro** skill pipelines; keep every element editable in EtchWP.
– Build to drafts; preserve attachment IDs, alt text, link targets, and SEO meta.

**Don’t**
– Ship inline styles, raw hex/px, `clamp()` font hacks, or duplicated structures.
– Leave raw ``, raw `</p> <form>`, or pasted nav markup — native Etch elements only.<br /> – Overwrite or delete the original before the user verifies parity and approves the swap.<br /> – Change URLs/slugs without a 301 (defer to the redirects workflow).</p> <p>## Validation<br /> – ACSS config injected and **all tokens resolve** (palette, type, spacing, containers, breakpoints, shadows, radius, transitions, light/dark).<br /> – EtchWP Pro hard validator passes with **zero** violations.<br /> – **Pixel-perfect parity** with the source at mobile / tablet / desktop; no horizontal scroll; ≥44px tap targets.<br /> – Accessibility (one H1, alt, contrast, focus, labels), SEO meta + schema, and Core Web Vitals checked.<br /> – Everything reusable/dynamic where it should be; nothing hand-duplicated; all editable in EtchWP.</p> <p>## Report<br /> **Converted:** `<source>` → EtchWP (drafts: `<urls>`). **Blueprint:** N pages · templates · CPTs/taxonomies/fields · components. **ACSS system:** injected + validated (palette/type/spacing/breakpoints/shadows/radius/light+dark). **Build:** sections/templates via EtchWP Pro · loops: N · validator ✓ clean. **Parity:** ✓ at all breakpoints · a11y ✓ · SEO/schema ✓ · CWV ✓. **Original kept** pending your go to swap. Flag every judgment call (missing token, no data source for a loop, unsupported widget).</p> </main> <script type="speculationrules"> {"prefetch":[{"source":"document","where":{"and":[{"href_matches":"/*"},{"not":{"href_matches":["/wp-*.php","/wp-admin/*","/wp-content/uploads/*","/wp-content/*","/wp-content/plugins/*","/wp-content/themes/etch-theme/*","/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]} </script> <script type="application/ld+json" id="slim-seo-schema">{"@context":"https://schema.org","@graph":[{"@type":"WebSite","@id":"https://library.nibwp.com/#website","url":"https://library.nibwp.com/","name":"NibWP Library","inLanguage":"en-US","potentialAction":{"@id":"https://library.nibwp.com/#searchaction"},"publisher":{"@id":"https://library.nibwp.com/#organization"}},{"@type":"SearchAction","@id":"https://library.nibwp.com/#searchaction","target":"https://library.nibwp.com/?s={search_term_string}","query-input":"required name=search_term_string"},{"@type":"BreadcrumbList","name":"Breadcrumbs","@id":"https://library.nibwp.com/lib-cat/convert-etchwp/#breadcrumblist","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://library.nibwp.com/"},{"@type":"ListItem","position":2,"name":"Library","item":"https://library.nibwp.com/browse/"},{"@type":"ListItem","position":3,"name":"convert-etchwp"}]},{"@type":"CollectionPage","@id":"https://library.nibwp.com/lib-cat/convert-etchwp/#webpage","url":"https://library.nibwp.com/lib-cat/convert-etchwp/","inLanguage":"en-US","name":"convert-etchwp – NibWP Library","isPartOf":{"@id":"https://library.nibwp.com/#website"},"breadcrumb":{"@id":"https://library.nibwp.com/lib-cat/convert-etchwp/#breadcrumblist"}},{"@type":"Organization","@id":"https://library.nibwp.com/#organization","url":"https://library.nibwp.com/","name":"NibWP Library"},{"@type":"WebPage","name":"convert-etchwp – NibWP Library","breadcrumb":{"@id":"https://library.nibwp.com/lib-cat/convert-etchwp/#breadcrumblist"},"inLanguage":"en-US","isPartOf":{"@id":"https://library.nibwp.com/#website"},"publisher":{"@id":"https://library.nibwp.com/#organization"},"url":"https://library.nibwp.com/lib-cat/convert-etchwp/","@id":"https://library.nibwp.com/lib-cat/convert-etchwp/#webpage"}]}</script><script id="nibwp-tabs-js"> (function(){ function activate(tablist, tab){ tablist.querySelectorAll('[role="tab"]').forEach(function(t){ var on = t === tab; t.setAttribute('aria-selected', on ? 'true' : 'false'); t.className.split(' ').forEach(function(c){ if(/__tab$/.test(c)){ t.classList.toggle(c+'--active', on); } }); }); var key = tab.getAttribute('data-tab'); if(!key) return; var scope = tablist.closest('section, [data-tabs], .etch-tpl, main') || document; scope.querySelectorAll('[data-panel]').forEach(function(p){ p.hidden = (p.getAttribute('data-panel') !== key); }); } document.addEventListener('click', function(e){ // 1) role=tab tablists (templates) var tab = e.target.closest('[role="tab"]'); if(tab){ var tl = tab.closest('[role="tablist"]'); if(tl){ e.preventDefault(); activate(tl, tab); return; } } // 2) builder toggle (how-it-works Etch/Bricks) var bsel = e.target.closest('.etch-hiw__bsel-btn'); if(bsel){ var grp = bsel.closest('.etch-hiw__bsel') || bsel.parentElement; grp.querySelectorAll('.etch-hiw__bsel-btn').forEach(function(b){ var on = b===bsel; b.classList.toggle('etch-hiw__bsel-btn--on', on); b.setAttribute('aria-pressed', on?'true':'false'); }); var name = (bsel.textContent||'').trim(); document.querySelectorAll('[data-builder-label]').forEach(function(el){ el.textContent = 'Copy for '+name; }); // swap any visible "Copy for X" button label + canvas label heuristically document.querySelectorAll('.etch-hiw__copy,.etch-hiw__bar-label,.etch-hiw__canvas-label').forEach(function(el){ if(/copy for|etch|bricks|canvas/i.test(el.textContent)){ el.textContent = el.textContent.replace(/Etch|Bricks/gi, name); } }); return; } // 3) how-it-works step click (acts like a tab) var step = e.target.closest('.etch-how__step'); if(step){ var steps = document.querySelectorAll('.etch-how__step'); steps.forEach(function(s){ s.classList.toggle('is-active', s===step); }); window.__nibwpHowPaused = true; // pause auto-cycle after manual pick return; } }); // keyboard arrows on tabs document.addEventListener('keydown', function(e){ var tab = e.target.closest('[role="tab"]'); if(!tab) return; if(e.key!=='ArrowRight' && e.key!=='ArrowLeft') return; var tl = tab.closest('[role="tablist"]'); var tabs = Array.prototype.slice.call(tl.querySelectorAll('[role="tab"]')); var i = tabs.indexOf(tab); var n = e.key==='ArrowRight' ? (i+1)%tabs.length : (i-1+tabs.length)%tabs.length; tabs[n].focus(); tabs[n].click(); }); })(); </script> <script id="nibwp-anim-js"> (function(){ var reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches; // ---- reveal on scroll (scroll-position based, fail-safe) ---- var sel = '[class*="__card"],[class*="__recipe"],.etch-quote,.etch-feat__card,.etch-comp__card,.etch-el__card,.etch-tpl__card,.etch-dir-item,.etch-dir__card,.etch-stats__stat,.etch-fb__card'; var targets = Array.prototype.slice.call(document.querySelectorAll(sel)); if(targets.length && !reduce){ targets.forEach(function(t){ t.classList.add('nibwp-reveal'); }); var reveal = function(){ var vh = window.innerHeight || document.documentElement.clientHeight; for(var i=0;i<targets.length;i++){ var t=targets[i]; if(t.classList.contains('is-in')) continue; var r=t.getBoundingClientRect(); if(r.top < vh*0.94 && r.bottom > 0){ t.classList.add('is-in'); } } }; reveal(); window.addEventListener('scroll', reveal, {passive:true}); window.addEventListener('resize', reveal); // FAIL-SAFE: never leave content hidden setTimeout(function(){ targets.forEach(function(t){ t.classList.add('is-in'); }); }, 4000); } // ---- hero typing ---- var typed = document.querySelector('.etch-hero__prompt-txt'); if(typed){ var phrases=['install a pricing table with a monthly toggle','add a split hero to the homepage','run the launch-saas-landing workflow','drop in an FAQ with schema markup']; if(reduce){ typed.textContent=phrases[0]; } else { var pi=0,ci=0,del=false, cur=document.createElement('span'); cur.className='nibwp-cur'; cur.textContent='|'; function tick(){ var w=phrases[pi]; typed.textContent=w.slice(0,ci); typed.appendChild(cur); if(!del){ ci++; if(ci>w.length){ del=true; setTimeout(tick,1400); return; } } else { ci--; if(ci<0){ del=false; ci=0; pi=(pi+1)%phrases.length; } } setTimeout(tick, del?38:64); } tick(); } } // ---- hero floating cards ---- var hero = document.querySelector('.etch-hero'); if(hero && document.querySelector('.etch-hero__inner') && !document.querySelector('.nibwp-float') && window.innerWidth>960){ var floats=[ ['nibwp-f1 nibwp-drift','hero.split','<rect class="wf" x="6" y="10" width="46" height="6" rx="2"/><rect class="wf" x="6" y="22" width="34" height="4" rx="2"/><rect class="wff" x="6" y="34" width="24" height="8" rx="3"/><rect class="wfs" x="70" y="8" width="44" height="44" rx="4"/>'], ['nibwp-f2 nibwp-drift b','pricing.tiers','<rect class="wf" x="8" y="8" width="30" height="44" rx="4"/><rect class="wf" x="45" y="8" width="30" height="44" rx="4"/><rect class="wff" x="45" y="8" width="30" height="6" rx="3"/><rect class="wf" x="82" y="8" width="30" height="44" rx="4"/>'], ['nibwp-f3 nibwp-drift','features.grid','<rect class="wfs" x="6" y="8" width="32" height="20" rx="3"/><rect class="wfs" x="44" y="8" width="32" height="20" rx="3"/><rect class="wfs" x="82" y="8" width="32" height="20" rx="3"/><rect class="wfs" x="6" y="32" width="32" height="20" rx="3"/><rect class="wfs" x="44" y="32" width="32" height="20" rx="3"/><rect class="wfs" x="82" y="32" width="32" height="20" rx="3"/>'], ['nibwp-f4 nibwp-drift b','faq.accordion','<rect class="wf" x="8" y="10" width="104" height="10" rx="3"/><rect class="wff" x="99" y="13" width="6" height="4" rx="1"/><rect class="wf" x="8" y="24" width="104" height="10" rx="3"/><rect class="wf" x="8" y="38" width="104" height="10" rx="3"/>'] ]; floats.forEach(function(f){ var d=document.createElement('div'); d.className='nibwp-float '+f[0]; d.setAttribute('aria-hidden','true'); d.innerHTML='<svg viewBox="0 0 120 60">'+f[2]+'</svg><div class="cap">'+f[1]+'</div>'; hero.appendChild(d); }); } // ---- how-it-works step cycling ---- var steps = document.querySelectorAll('.etch-how__step'); if(steps.length>1 && !reduce){ var si=0; steps[0].classList.add('is-active'); setInterval(function(){ if(window.__nibwpHowPaused)return; steps.forEach(function(s){s.classList.remove('is-active');}); si=(si+1)%steps.length; steps[si].classList.add('is-active'); },2600); } // ---- workflow run animation (scroll-triggered) ---- var wsteps = Array.prototype.slice.call(document.querySelectorAll('.etch-wf__step')); if(wsteps.length){ if(reduce){ wsteps.forEach(function(s){s.classList.add('is-done');}); } else { var ran=false; var runwf=function(){ if(ran) return; var r=wsteps[0].getBoundingClientRect(); var vh=window.innerHeight; if(r.top < vh*0.85 && r.bottom>0){ ran=true; var i=0; (function next(){ if(i>0) wsteps[i-1].classList.add('is-done'); if(i<wsteps.length){ wsteps[i].classList.add('is-active'); i++; setTimeout(next,420);} })(); window.removeEventListener('scroll', runwf); } }; runwf(); window.addEventListener('scroll', runwf, {passive:true}); } } })(); </script> </body> </html>