Clone and migrate WordPress sites to Next.js/React. Use this skill SEMPRE que o usuário quiser: clonar um site WordPress, migrar de WordPress para Next.js ou React, extrair conteúdo de um site WordPress, baixar imagens e mídia de um site WordPress, recriar um site WordPress em framework moderno, ou mencionar "clonar site", "migrar wordpress", "extrair conteúdo wordpress", "wordpress to next.js", "clone wordpress", "wp migration", "recriar site", "copiar site". Também ativar quando o usuário tiver acesso ao admin do WordPress e quiser fazer download de todo o conteúdo para rebuild. TRIGGER on any mention of cloning, migrating, or rebuilding a WordPress site, even if the user doesn't say "skill" explicitly.
Esta skill extrai todo o conteúdo de um site WordPress (copy, mídia, estrutura HTML, menus, SEO) e organiza em uma estrutura local pronta para recriar em Next.js + Vercel + Supabase.
[nome-do-projeto]/
├── data/
│ ├── site-info.json # Título, descrição, URL, idioma
│ ├── pages/ # Um JSON por página (slug, título, conteúdo, SEO)
│ ├── posts/ # Um JSON por post
│ ├── media.json # Lista de todas as mídias com URLs
│ ├── menus.json # Estrutura de navegação
│ ├── categories.json
│ └── extraction-summary.json
├── media/ # Imagens e arquivos baixados
├── content/
│ ├── pages/ # HTML limpo + texto extraído por página
│ └── posts/ # HTML limpo + texto extraído por post
├── next-scaffold/ # Projeto Next.js 14 pronto para uso
│ ├── app/ # Uma rota por página WordPress
│ ├── components/ # Header, Footer gerados
│ ├── public/images/ # Mídias copiadas
│ ├── data/ # JSONs de dados
│ ├── .env.local # Template com variáveis Supabase/Vercel
│ ├── vercel.json
│ └── package.json
└── extraction-report.md # Resumo: páginas, mídias, issues, próximos passos
Perguntar ao usuário:
https://aideal.com.br)aideal-nextjs)A REST API do WordPress é nativa (sem plugins), mais rápida que o admin, e funciona mesmo em sites lentos. Verificar:
curl -s "https://[SITE]/wp-json/" | head -50
curl -s "https://[SITE]/wp-json/wp/v2/pages?per_page=1"
Se a API estiver acessível → usar scripts de extração automática. Se bloqueada → usar extração via browser (Claude in Chrome MCP).
Instalar dependência e executar:
cd [OUTPUT_DIR]/[PROJECT_NAME]
npm install jsdom # única dependência necessária
node [SKILL_DIR]/scripts/extract-wp-api.js \
--url https://[SITE] \
--output ./data
O script extrai automaticamente:
Ver scripts/extract-wp-api.js para documentação completa.
Opção A — wget (recomendado, baixa tudo de uma vez):
wget -r -np -nH --cut-dirs=2 \
-A "*.jpg,*.jpeg,*.png,*.webp,*.svg,*.gif,*.pdf" \
--reject "index.html*" \
--user-agent="Mozilla/5.0" \
--timeout=30 --tries=3 --wait=1 \
-P ./media \
https://[SITE]/wp-content/uploads/
Opção B — Script com lista da API (se wget não funcionar):
node [SKILL_DIR]/scripts/download-media.js \
--media-list ./data/media.json \
--output ./media
Opção C — FTP direto (se tiver acesso ao hosting):
Baixar a pasta wp-content/uploads/ inteira via FileZilla ou similar.
O conteúdo bruto da API vem com markup do Elementor (divs gigantes, classes como elementor-widget-heading). Limpar para extrair conteúdo real:
node [SKILL_DIR]/scripts/clean-content.js \
--input ./data \
--output ./content
O script extrai de cada página:
node [SKILL_DIR]/scripts/generate-nextjs.js \
--content ./content \
--data ./data \
--media ./media \
--output ./next-scaffold
Gera:
app/layout.tsx com Header e Footer do menu WPapp/[slug]/page.tsx por página WordPresscomponents/Header.tsx e components/Footer.tsxpublic/images/ com mídias copiadaspackage.json com Next.js 14, Tailwind, TypeScript.env.local template para Supabase e Vercelvercel.json configuradoCriar extraction-report.md com:
Se a REST API estiver bloqueada, usar o Claude in Chrome MCP para extração visual:
/sitemap.xml ou /sitemap_index.xml):
document.querySelectorAll('h1,h2,h3,p,a')document.querySelectorAll('img')content/pages/[slug].jsonFerramentas > Exportar > Exportar tudoscripts/parse-wx-export.jsGuiar o usuário para:
extraction-report.md para verificar gapsnext-scaffold/ na IDEcd next-scaffold && npm install
npm run dev
# Abrir http://localhost:3000
.env.localvercel --prod
# ou conectar repositório GitHub no dashboard da Vercel
| Problema | Solução |
|---|---|
| REST API retorna 404 | Tentar ?rest_route=/wp/v2/pages na URL |
| API bloqueada por plugin de segurança | Desativar plugins temporariamente no admin WP |
| Download de mídia lento/falha | Usar FTP direto ou baixar em lotes menores |
| Elementor com widgets customizados | Inspecionar manualmente e extrair via browser |
| Site muito lento para acessar | Rodar extração em horários de baixo tráfego |
| Imagens com URL relativa | Prefixar com URL base do site |
Ver pasta scripts/:
extract-wp-api.js — Extração via REST API (principal)clean-content.js — Limpeza de HTML Elementor/WPgenerate-nextjs.js — Geração do scaffold Next.jsdownload-media.js — Download de mídias via lista JSONparse-wxr-export.js — Parser do XML de exportação do WPCada script aceita --help para ver opções.