Landing Page — Orquestrador

Diretório de saída: ./generated/{slug}-landing (relativo ao diretório de trabalho atual, ou configurado via LANDING_PAGE_OUTPUT_DIR)

Passo 1 — Interpretar Entrada

Divida os argumentos por | (remova espaços):

[0] → company_name (se ausente, invente um nome criativo e adequado ao setor)
[1] → industry (inferir se ausente)
[2] → tagline_hint (opcional)
[3] → target_audience (opcional)
[4] → cta_goal (opcional, padrão: "Commencer gratuitement")

slug = company_name em minúsculas, sem acentos, espaços → hífens.

Resolva o caminho de saída:

OUTPUT_DIR="${LANDING_PAGE_OUTPUT_DIR:-./generated}/{slug}-landing"

Passo 2 — Briefing de Conteúdo (landing-page-copy)

Invoque a skill landing-page-copy com as entradas analisadas. Aguarde a saída completa CONTENT_BRIEF antes de prosseguir.

O briefing contém: texto do herói, funcionalidades, depoimentos, FAQ, sobre, planos de preços, artigos do blog, estudos de caso, rótulos de navegação. Esta cópia é a fonte da verdade para todo o texto no site gerado — não invente texto durante a geração de código.

Passo 3 — Design + SEO (executar em paralelo)

3-A. Inteligência de Design (ui-ux-pro-max)

Execute estes 3 comandos em paralelo:

python3 ~/.claude/skills/ui-ux-pro-max/scripts/search.py "{industry}" --design-system -p "{company_name}"
python3 ~/.claude/skills/ui-ux-pro-max/scripts/search.py "{industry}" --domain color -n 3
python3 ~/.claude/skills/ui-ux-pro-max/scripts/search.py "{industry} landing page" --domain typography -n 3

Nota: requer a skill ui-ux-pro-max instalada. Se indisponível, sintetize um briefing de design diretamente a partir do contexto do setor + marca.

Sintetize em um briefing de design:

Humor visual (3-5 adjetivos)
Paleta de cores: primária, secundária, destaque, fundo, fundo-suave, fundo-card, superfície, texto, texto-suave, texto-inverso, borda, borda-subtle, ponto
Tipografia: fonte de título + fonte de corpo (devem existir no Google Fonts)
Decisões de layout: tipo de herói, layout de recursos, estilo de depoimentos
Estilo de animação: sutil / moderado / expressivo
Detalhe de assinatura: um elemento visual distintivo que torne esta página memorável

3-B. Plano de SEO (landing-page-seo)

Invoque a skill landing-page-seo com company_name, industry e o CONTENT_BRIEF. Aguarde a saída completa SEO_PLAN.

O plano contém: meta tags por página, tipos de schema markup, configuração de sitemap, dicas de build para Core Web Vitals, dicas de SEO com IA.

Passo 4 — Escrever Todos os Arquivos

Crie {OUTPUT_DIR}, depois escreva cada arquivo do zero usando a ferramenta de escrita. Use CONTENT_BRIEF para toda a cópia e SEO_PLAN para todos os metadados/schema. Sem modelos, sem texto de espaço reservado.

4-A. Infraestrutura

package.json:

{
  "name": "{slug}-landing",
  "version": "0.1.0",
  "private": true,
  "scripts": { "dev": "next dev", "build": "next build", "start": "next start" },
  "dependencies": {
    "next": "^16.2.7",
    "react": "^19.2.0",
    "react-dom": "^19.2.0",
    "lucide-react": "^0.474.0",
    "framer-motion": "^12.40.0"
  },
  "devDependencies": {
    "@next/mdx": "^16.2.7",
    "@mdx-js/loader": "^3.0.0",
    "@mdx-js/react": "^3.0.0",
    "@types/mdx": "^2.0.0",
    "typescript": "^5",
    "@types/node": "^20",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "tailwindcss": "^3.4.1",
    "postcss": "^8.5.10",
    "autoprefixer": "^10.0.1"
  }
}

Versões: stack validada Next 16 + React 19 + framer-motion 12 + lucide-react 0.474 (build output: 'export' OK). NÃO fixe next em 14.2.0 nem react/react-dom em ^18 (versões vulneráveis — advisory crítico Next de 2025-12-11). lucide-react deve ser >= 0.474 (versões 0.378 e < 0.474 não declaram o peer React 19 e quebram npm install).

next.config.js:

const withMDX = require('@next/mdx')()
module.exports = withMDX({
  output: 'export',
  images: { unoptimized: true },
  pageExtensions: ['js', 'jsx', 'mdx', 'ts', 'tsx'],
})

tsconfig.json: tsconfig padrão do Next.js com alias de caminho @/* para ./ e "jsx": "react-jsx" (Next 16 usa o runtime automático React — "preserve" é reescrito automaticamente no build)

tailwind.config.ts:

darkMode: 'class'
fontFamily: vars CSS de título + corpo
animation: marquee, float, line-grow
keyframes: marquee translateX(0%)→translateX(-50%), float, lineGrow

postcss.config.js: tailwind + autoprefixer

mdx-components.tsx: mapeie h1 h2 h3 p ul li strong blockquote para elementos estilizados usando vars CSS

app/globals.css:

@tailwind base/components/utilities
vars CSS em :root — todos os tokens de design do briefing de design
html.dark { ... } — sobrescreva TODAS as vars para o modo escuro
body usando vars CSS, com transição em background-color + color
Utilitários personalizados: .text-gradient, .dot-grid, .glass-card, .bracket-card, .clip-diagonal-bottom, .clip-diagonal-top
REGRAS: toda referência de cor em componentes usa vars CSS — zero hex hardcoded

4-B. Componentes

Escreva cada um como .tsx. Cada componente lê a cópia de lib/data.ts. Todas as cores via vars CSS.

components/DarkModeToggle.tsx:

'use client', lê localStorage na montagem, alterna a classe dark em <html>
Persiste preferência, ícones Sun/Moon do lucide-react

components/LogoCarousel.tsx:

'use client', CSS puro marquee (animate-marquee), sem JS scroll
Nomes de marcas de lib/data.ts, duplicados para loop contínuo

components/ContactForm.tsx:

'use client', estado: 'idle' | 'sending' | 'sent' | 'error'
<form data-netlify="true" name="contact"> com form-name oculto
Campos: nome, email, empresa, mensagem
Envio: fetch('/', { method: 'POST', body: new URLSearchParams(new FormData(form)) })

components/Navbar.tsx: fixo, consciente de scroll, menu mobile, <DarkModeToggle />

components/Hero.tsx:

Animação de entrada Framer Motion com verificação useReducedMotion
Linha de estatísticas com <data value="{stat.value}"> (SEO com IA)
Detalhe de assinatura de design do briefing de design

components/Features.tsx: whileInView Framer Motion, atraso escalonado

components/Testimonials.tsx: whileInView Framer Motion por card

components/FAQ.tsx:

'use client', acordeão
Marcação semântica <dl>/<dt>/<dd> (esquema FAQPage + SEO com IA)

components/Pricing.tsx:

'use client', alternância de cobrança mensal/anual com badge −20%
Alternar price vs price_annual

components/About.tsx: história + valores

components/Footer.tsx: slogan + nav + direitos autorais

Regras de componentes:

'use client' apenas em componentes interativos/com API do navegador
import type { X } para imports somente de tipo
Ícones dinâmicos do lucide: import type { LucideIcon } from 'lucide-react', depois (Icons as any)[name] as LucideIcon | undefined. Tipar qualquer prop de ícone como LucideIcon — NÃO React.ComponentType<{size?:number}> (o size do lucide é string|number, então o tipo estreito falha na verificação de tipo do next build).
Todas as cores via vars CSS — zero hex hardcoded
Framer Motion para animações (sem IntersectionObserver)
Todo o texto de lib/data.ts

4-C. Páginas

app/layout.tsx:

Google Fonts via next/font/google
Metadados do SEO_PLAN meta da página inicial
JSON-LD: Organization + WebSite (ou SoftwareApplication) do SEO_PLAN

Anti-flash do modo escuro em <head>:

try{if(localStorage.getItem('theme')==='dark'||(localStorage.getItem('theme')===null&&window.matchMedia('(prefers-color-scheme: dark)').matches)){document.documentElement.classList.add('dark')}}catch(e){}

suppressHydrationWarning em <html>
<link rel="preconnect" href="https://fonts.googleapis.com">

app/page.tsx: Navbar + Hero + LogoCarousel + Features + Testimonials + Pricing + FAQ + ContactForm + Footer

app/tarifs/page.tsx: Metadados + JSON-LD (Offer + FAQPage) do SEO_PLAN + Navbar + Pricing + FAQ + ContactForm + Footer

app/a-propos/page.tsx: Metadados + JSON-LD (AboutPage + Organization) + Navbar + About + Footer

app/blog/layout.tsx + app/blog/page.tsx: listagem de lib/blog.ts

app/blog/{slug-1}/page.mdx + app/blog/{slug-2}/page.mdx:

Conteúdo de CONTENT_BRIEF blog[]
<article> + <time datetime="..."> encapsulamento semântico
TL;DR no primeiro parágrafo (citabilidade SEO com IA)

app/cas-clients/layout.tsx + app/cas-clients/page.tsx: listagem de lib/case-studies.ts

app/cas-clients/{slug-1}/page.mdx + app/cas-clients/{slug-2}/page.mdx:

Conteúdo de CONTENT_BRIEF case_studies[]
Estrutura explícita de H2 ## Desafio / ## Solução / ## Resultados (SEO com IA)
BreadcrumbList JSON-LD do SEO_PLAN

app/sitemap.ts: SEO_PLAN sitemap_config para todas as páginas + posts + estudos de caso

app/robots.ts: permitir todos, URL do sitemap

4-D. Arquivos de Dados

lib/data.ts — toda a cópia de CONTENT_BRIEF:

export const siteData = {
  nav: { links: [...], cta: "..." },
  hero: { badge, headline_a, subheadline, cta_primary, cta_secondary, social_proof_bar, stats },
  logoCarousel: { section_label, brands: [...] },
  features: { badge, heading, sub, items: [...] },
  testimonials: [...],
  faq: { items: [...] },
  about: { headline, story, values: [...] },
  pricing: { heading, sub, plans: [...] },
  contact: { heading, sub, form_cta },
  footer: { tagline }
}

lib/blog.ts: registro do blog de CONTENT_BRIEF

lib/case-studies.ts: registro de estudos de caso de CONTENT_BRIEF

Imagem do herói — escolha entre estes placeholders do Unsplash:

Tech/SaaS/Fintech: https://images.unsplash.com/photo-1518770660439-4636190af475?w=1600&q=80
Saúde/Bem-estar: https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?w=1600&q=80
Alimentação/Bio: https://images.unsplash.com/photo-1504674900247-0877df9cc836?w=1600&q=80
Esporte/Fitness: https://images.unsplash.com/photo-1517836357463-d25dfeac3438?w=1600&q=80
Moda/Luxo: https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=1600&q=80
Imobiliário: https://images.unsplash.com/photo-1560518883-ce09059eeffa?w=1600&q=80
Educação: https://images.unsplash.com/photo-1522202176988-66273c2fd55f?w=1600&q=80
Padrão: https://images.unsplash.com/photo-1497366216548-37526070297c?w=1600&q=80

Passo 5 — Build

cd {OUTPUT_DIR}
npm install
npm run build

Erros de TypeScript — corrigir e tentar novamente:

import { X } → import type { X } para imports somente de tipo
Ícone dinâmico: (Icons as any)[name] as LucideIcon | undefined (import type de lucide-react); tipar props de ícone como LucideIcon, nunca ComponentType<{size?:number}>
Corrija todos os erros de TypeScript antes de relatar sucesso

Passo 6 — Relatório

🏢  Empresa:    {company_name} — {industry}
🎨  Design:     {mood} | {fonte_titulo} / {fonte_corpo}
✨  Assinatura: {detalhe_distintivo}
📝  Manchete:   "{headline_a}"
📄  Páginas:    / · /tarifs · /a-propos · /blog · /cas-clients
🔍  SEO:        {título_da_página} | {tipos_de_schema}
📁  Saída:      {OUTPUT_DIR}

Pré-visualização local: cd {OUTPUT_DIR} && npm run dev

Demian-T/plugin-landing-page-creation

O que é plugin-landing-page-creation?

Perguntar na sua IA favorita

Documentação

Landing Page — Orquestrador

Passo 1 — Interpretar Entrada

Passo 2 — Briefing de Conteúdo (landing-page-copy)

Passo 3 — Design + SEO (executar em paralelo)

3-A. Inteligência de Design (ui-ux-pro-max)

3-B. Plano de SEO (landing-page-seo)

Passo 4 — Escrever Todos os Arquivos

4-A. Infraestrutura

4-B. Componentes

4-C. Páginas

4-D. Arquivos de Dados

Passo 5 — Build

Passo 6 — Relatório

Individual skills in this repo

Demian-T/plugin-landing-page-creation

Demian-T/plugin-landing-page-creation

Habilidades Relacionadas

steipete/sag

steipete/oracle

steipete/peekaboo

mattpocock/design-an-interface

mattpocock/prototype

mattpocock/grill-me