Landing Page — Orchestrateur

Répertoire de sortie : ./generated/{slug}-landing (relatif au répertoire de travail courant, ou configurable via la var d'env LANDING_PAGE_OUTPUT_DIR)

Étape 1 — Analyse de l'entrée

Diviser les arguments sur | (en supprimant les espaces) :

[0] → company_name (si manquant, inventer un nom créatif et adapté au secteur)
[1] → industry (déduire si manquant)
[2] → tagline_hint (optionnel)
[3] → target_audience (optionnel)
[4] → cta_goal (optionnel, défaut : "Commencer gratuitement")

slug = company_name en minuscules, accents supprimés, espaces → tirets.

Résoudre le chemin de sortie :

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

Étape 2 — Brief de contenu (landing-page-copy)

Invoquer la compétence landing-page-copy avec les entrées parsées. Attendre la sortie complète de CONTENT_BRIEF avant de continuer.

Le brief contient : le texte du héros, les fonctionnalités, les témoignages, la FAQ, la section À propos, les plans de tarification, les articles de blog, les études de cas, les libellés de navigation. Ce texte est la source de vérité pour tout le texte du site généré — n'inventez pas de texte lors de la génération du code.

Étape 3 — Design + SEO (exécutés en parallèle)

3-A. Intelligence Design (ui-ux-pro-max)

Exécuter ces 3 commandes en parallèle :

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

Remarque : nécessite que la compétence ui-ux-pro-max soit installée. Si elle est indisponible, synthétisez un brief de design directement à partir du contexte du secteur et de la marque.

Synthétiser en un brief de design :

Ambiance visuelle (3 à 5 adjectifs)
Palette de couleurs : primaire, secondaire, accent, bg, bg-soft, bg-card, surface, text, text-muted, text-inverse, border, border-subtle, dot
Typographie : police de titres + police de corps (doivent exister dans Google Fonts)
Décisions de mise en page : type de héros, disposition des fonctionnalités, style des témoignages
Style d'animation : subtil / modéré / expressif
Détail signature : un élément visuel distinctif qui rend cette page mémorable

3-B. Plan SEO (landing-page-seo)

Invoquer la compétence landing-page-seo avec company_name, industry et le CONTENT_BRIEF. Attendre la sortie complète de SEO_PLAN.

Le plan contient : les balises meta par page, les types de balisage schema.org, la configuration du sitemap, les conseils de construction Core Web Vitals, les indices SEO pour l'IA.

Étape 4 — Écrire tous les fichiers

Créer {OUTPUT_DIR}, puis écrire chaque fichier à partir de zéro en utilisant l'outil Write. Utiliser CONTENT_BRIEF pour tout le texte et SEO_PLAN pour toutes les balises meta/schema. Pas de modèles, pas de texte factice.

4-A. Infrastructure

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"
  }
}

Versions : pile validée Next 16 + React 19 + framer-motion 12 + lucide-react 0.474 (build output: 'export' OK). N'ÉPINGLEZ PAS next à 14.2.0 ni react/react-dom à ^18 (versions vulnérables — avis critique Next du 2025-12-11). lucide-react doit être >= 0.474 (les versions 0.378 et < 0.474 ne déclarent pas le peer React 19 et cassent 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 Next.js standard avec l'alias de chemin @/* pour ./ et "jsx": "react-jsx" (Next 16 utilise le runtime automatique React — "preserve" est automatiquement réécrit lors de la compilation)

tailwind.config.ts :

darkMode: 'class'
fontFamily : variables CSS des polices de titres et de corps
animation : marquee, float, line-grow
keyframes : marquee translateX(0%)→translateX(-50%), float, lineGrow

postcss.config.js : tailwind + autoprefixer

mdx-components.tsx : mapper h1 h2 h3 p ul li strong blockquote à des éléments stylisés utilisant les variables CSS

app/globals.css :

@tailwind base/components/utilities
Variables CSS dans :root — tous les tokens de design du brief de design
html.dark { ... } — remplacer TOUTES les variables pour le mode sombre
body utilisant les variables CSS, avec transition sur background-color + color
Utilitaires personnalisés : .text-gradient, .dot-grid, .glass-card, .bracket-card, .clip-diagonal-bottom, .clip-diagonal-top
RÈGLE : chaque référence de couleur dans les composants utilise des variables CSS — zéro hexadécimal codé en dur

4-B. Composants

Écrire chaque composant en .tsx. Chaque composant lit le texte depuis lib/data.ts. Toutes les couleurs via les variables CSS.

components/DarkModeToggle.tsx :

'use client', lit localStorage au montage, bascule la classe dark sur <html>
Persiste la préférence, icônes Sun/Moon de lucide-react

components/LogoCarousel.tsx :

'use client', marquee CSS pure (animate-marquee), pas de défilement JS
Noms de marques depuis lib/data.ts, dupliqués pour une boucle fluide

components/ContactForm.tsx :

'use client', état : 'idle' | 'sending' | 'sent' | 'error'
<form data-netlify="true" name="contact"> avec form-name caché
Champs : nom, email, entreprise, message
Soumission : fetch('/', { method: 'POST', body: new URLSearchParams(new FormData(form)) })

components/Navbar.tsx : fixe, sensible au défilement, menu mobile, <DarkModeToggle />

components/Hero.tsx :

Animation d'entrée Framer Motion avec vérification useReducedMotion
Ligne de statistiques avec <data value="{stat.value}"> (SEO IA)
Détail de design signature du brief de design

components/Features.tsx : whileInView Framer Motion, délai décalé

components/Testimonials.tsx : whileInView Framer Motion par carte

components/FAQ.tsx :

'use client', accordéon
Balisage sémantique <dl>/<dt>/<dd> (schéma FAQPage + SEO IA)

components/Pricing.tsx :

'use client', bascule de facturation mensuelle/annuelle avec badge −20%
Bascule price vs price_annual

components/About.tsx : histoire + valeurs

components/Footer.tsx : accroche + navigation + copyright

Règles pour les composants :

'use client' uniquement sur les composants interactifs/utilisant des API navigateur
import type { X } pour les imports de type uniquement
Icônes lucide dynamiques : import type { LucideIcon } from 'lucide-react', puis (Icons as any)[name] as LucideIcon | undefined. Typer toute prop d'icône comme LucideIcon — PAS React.ComponentType<{size?:number}> (le size de lucide est string|number, donc le type étroit échoue à la vérification de type de next build).
Toutes les couleurs via les variables CSS — zéro hexadécimal codé en dur
Framer Motion pour les animations (pas d'IntersectionObserver)
Tout le texte depuis lib/data.ts

4-C. Pages

app/layout.tsx :

Google Fonts via next/font/google
Métadonnées depuis les meta de la page d'accueil du SEO_PLAN
JSON-LD : Organization + WebSite (ou SoftwareApplication) depuis SEO_PLAN

Anti-flash du mode sombre dans <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 sur <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 : Métadonnées + JSON-LD (Offer + FAQPage) depuis SEO_PLAN + Navbar + Pricing + FAQ + ContactForm + Footer

app/a-propos/page.tsx : Métadonnées + JSON-LD (AboutPage + Organization) + Navbar + About + Footer

app/blog/layout.tsx + app/blog/page.tsx : liste depuis lib/blog.ts

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

Contenu depuis CONTENT_BRIEF blog[]
Encadrement sémantique <article> + <time datetime="...">
TL;DR dans le premier paragraphe (citabilité SEO IA)

app/cas-clients/layout.tsx + app/cas-clients/page.tsx : liste depuis lib/case-studies.ts

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

Contenu depuis CONTENT_BRIEF case_studies[]
Structure explicite ## Problème / ## Solution / ## Résultats H2 (SEO IA)
JSON-LD BreadcrumbList depuis SEO_PLAN

app/sitemap.ts : sitemap_config du SEO_PLAN pour toutes les pages + articles + études de cas

app/robots.ts : tout autoriser, URL du sitemap

4-D. Fichiers de Données

lib/data.ts — tout le texte depuis 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 : registre des articles de blog depuis CONTENT_BRIEF

lib/case-studies.ts : registre des études de cas depuis CONTENT_BRIEF

Image du héros — choisir parmi ces placeholders Unsplash :

Tech/SaaS/Fintech : https://images.unsplash.com/photo-1518770660439-4636190af475?w=1600&q=80
Santé/Bien-être : https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?w=1600&q=80
Alimentation/Bio : https://images.unsplash.com/photo-1504674900247-0877df9cc836?w=1600&q=80
Sport/Fitness : https://images.unsplash.com/photo-1517836357463-d25dfeac3438?w=1600&q=80
Mode/Luxe : https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=1600&q=80
Immobilier : https://images.unsplash.com/photo-1560518883-ce09059eeffa?w=1600&q=80
Éducation : https://images.unsplash.com/photo-1522202176988-66273c2fd55f?w=1600&q=80
Par défaut : https://images.unsplash.com/photo-1497366216548-37526070297c?w=1600&q=80

Étape 5 — Compilation

cd {OUTPUT_DIR}
npm install
npm run build

Erreurs TypeScript — corriger et réessayer :

import { X } → import type { X } pour les imports de type uniquement
Icône dynamique : (Icons as any)[name] as LucideIcon | undefined (import type depuis lucide-react) ; typer les props d'icône comme LucideIcon, jamais ComponentType<{size?:number}>
Corriger toutes les erreurs TypeScript avant de signaler le succès

Étape 6 — Rapport

🏢  Société :    {company_name} — {industry}
🎨  Design :     {mood} | {police titres} / {police corps}
✨  Signature :  {détail distinctif}
📝  Titre :      "{headline_a}"
📄  Pages :      / · /tarifs · /a-propos · /blog · /cas-clients
🔍  SEO :        {titre de page} | {types de schéma}
📁  Sortie :     {OUTPUT_DIR}

Aperçu local : cd {OUTPUT_DIR} && npm run dev

Création de Landing Page Next.js

Qu'est-ce que Création de Landing Page Next.js ?

Demander à votre IA préférée

Documentation

Landing Page — Orchestrateur

Étape 1 — Analyse de l'entrée

Étape 2 — Brief de contenu (landing-page-copy)

Étape 3 — Design + SEO (exécutés en parallèle)

3-A. Intelligence Design (ui-ux-pro-max)

3-B. Plan SEO (landing-page-seo)

Étape 4 — Écrire tous les fichiers

4-A. Infrastructure

4-B. Composants

4-C. Pages

4-D. Fichiers de Données

Étape 5 — Compilation

Étape 6 — Rapport

Individual skills in this repo

Demian-T/plugin-landing-page-creation

Demian-T/plugin-landing-page-creation

Skills associés

steipete/sag

steipete/oracle

steipete/peekaboo

mattpocock/design-an-interface

mattpocock/prototype

mattpocock/grill-me