---
name: converting-to-gohighlevel
description: Converts any website codebase (React, Next.js, Vue, Svelte, etc.) into a single self-contained HTML file compatible with GoHighLevel's Custom HTML/Javascript code block. Use when the user mentions GoHighLevel, GHL, converting a site for GHL, or creating a single-file website for a page builder.
---
> ## O que e isto (PT-BR)
>
> **Transformer Skill (Converter para GoHighLevel)** e uma _skill_ (instrucao tecnica para o
> agente de IA) que pega o codigo de um site (React, Next.js, Vue, Svelte, etc.) e o converte
> num **unico arquivo HTML autossuficiente**, compativel com o bloco **Custom HTML/Javascript**
> do GoHighLevel (GHL).
>
> **Por que existe:** o bloco de codigo custom do GHL e bem restrito — nao aceita JSX, modulos
> ES, build tools nem as tags `//`. Esta skill ensina a IA a "achatar" o
> projeto em HTML + CSS + JS puro que cola direto no GHL.
>
> **Quando usar:** quando voce tem um site multi-arquivo e quer publica-lo numa pagina do GHL
> (ou em outro page builder que so aceita um bloco de codigo custom).
>
> **Como usar:**
> 1. Tenha o projeto-fonte acessivel ao agente (repo aberto ou colado no chat).
> 2. Peca: _"Use a skill converting-to-gohighlevel para transformar este site num unico HTML
> pro GHL."_
> 3. O agente roda o workflow de 9 passos: audita o projeto, remove o que e backend (auth,
> banco, APIs de servidor), mapeia componentes para HTML/CSS, troca icones por SVG inline,
> converte animacoes para CSS, prefixa as classes, valida (sem imports/JSX/modulos) e te
> diz como colar no GHL.
>
> _O texto tecnico abaixo esta em ingles de proposito (e instrucao operacional para o agente)._
---
# GoHighLevel Website Converter
## When to use this skill
- User wants to upload a website to GoHighLevel (GHL)
- User asks to convert a React/Next/Vue/Svelte site into a single HTML file
- User mentions "GoHighLevel", "GHL", or "Custom HTML block"
- User wants a single-file version of a multi-file website project
- User wants to paste a website into a page builder's custom code block
## Key Constraints (GHL Custom HTML Block)
GoHighLevel's Custom HTML/Javascript block has strict limitations:
- ❌ **No JSX / No Babel** — `type="text/babel"` scripts are silently ignored
- ❌ **No ES modules** — `import`/`export` and `type="module"` do not work
- ❌ **No build tools** — No Vite, Webpack, or bundler output
- ❌ **No Node.js APIs** — `process.env`, `require()`, etc. are unavailable
- ❌ **No ``, ``, `` tags** — GHL wraps your code in its own page shell
- ✅ **Pure HTML + `
```
**NEVER include**: ``, ``, ``, `` — GHL provides these.
### Step 7: Validation Checklist
Before delivering the file, verify:
```markdown
- [ ] No `import` or `export` statements anywhere
- [ ] No `type="module"` or `type="text/babel"` on any script tag
- [ ] No JSX syntax (no ``, no `{}` expressions in HTML)
- [ ] No ``, ``, ``, or `` tags
- [ ] No `process.env`, `import.meta`, or Node.js APIs
- [ ] All icons are inline SVGs (no lucide-react, no heroicons imports)
- [ ] All CSS classes are prefixed to avoid GHL conflicts
- [ ] All animations use CSS @keyframes or vanilla JS
- [ ] File renders correctly when opened directly in a browser
- [ ] Responsive: looks good on mobile, tablet, and desktop
```
### Step 8: Delivery Instructions
Tell the user:
1. Open the generated `.html` file in their editor
2. **Cmd+A** (Select All) → **Cmd+C** (Copy)
3. In GoHighLevel page builder, add a **Custom Code** element
4. Click **Open Code Editor**
5. **Cmd+V** (Paste) into the Custom Javascript/HTML box
6. Click **Save**
7. Preview or Publish the page
## Resources
- See `examples/` for reference conversions
- See `resources/common-icons.html` for frequently used inline SVG icons