Communitygithub.com

JairoBg03/skills

Crée des landing pages professionnelles avec un design personnalisé, des animations et des effets de niveau agence, couvrant l'ensemble du flux : brief, direction artistique, construction, audit et déploiement. Évite le look générique des modèles IA.

Qu'est-ce que skills ?

Cette compétence (skill) pour agents IA vous guide dans la création de landing pages professionnelles, uniques et animées, en utilisant la stack Astro + Tailwind CSS v4 + GSAP + Lenis. Elle est conçue pour les développeurs et les créateurs qui souhaitent dépasser le look standard des templates, en imposant un workflow rigoureux : du brief utilisateur à la direction artistique, puis à la construction mobile-first, à l'audit qualité et au déploiement. Compatible avec des plateformes comme Claude Code, Cursor ou Codex, elle intègre des règles strictes : pas de librairies de composants UI, une seule action de conversion par page, des animations accessibles via `gsap.matchMedia()` et une optimisation des performances (Lighthouse ≥ 95, CLS = 0). Le résultat est une landing page entièrement personnalisée, rapide et prête pour la production.

Compatible avec~Claude Code~Codex CLI~Cursor
Part ofDesign & UI
npx skills add https://github.com/JairoBg03/skills/tree/HEAD/landing-pages
Voir l'original→Voir toutes les compétences

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentation

Quand utiliser

  • L'utilisateur souhaite une nouvelle landing page (produit, service, événement, portfolio, waitlist)
  • Il veut redessiner une landing existante pour qu'elle soit professionnelle et unique
  • Il demande des animations, des effets de défilement ou des micro-interactions sur une page marketing
  • Il est en phase de planification : quelles sections, quel message, quelle structure

Stack (et pourquoi)

PièceChoixPourquoiAlternative écartée
FrameworkAstro 5Statique par défaut (0 JS de base), composants, astro:assets pour les images, déploiement = upload du dossier dist/Next.js (overkill pour une landing, déploiement plus complexe), HTML brut (sans composants ni optimisation)
StylesTailwind CSS v4Tokens personnalisés via @theme en CSS, sans config JS, purge automatiqueKits UI (shadcn/DaisyUI/Flowbite → look générique), CSS pur (lent pour itérer)
AnimationGSAP 3.13+ (ScrollTrigger, SplitText)Standard de l'industrie pour le défilement/timeline ; depuis v3.13 TOUS les plugins sont gratuitsFramer Motion (lié à React), AOS (limité, se voit "de template")
Défilement fluideLenisLéger (~4kb), intégration documentée avec ScrollTriggerLocomotive Scroll (plus lourd, moins maintenu)
DéploiementNetlify / Cloudflare Pages / VercelConnecter le repo → push → déploiement ; sortie statique sans serveurVPS (inutile pour du statique)

Règle stricte : NE PAS installer de bibliothèques de composants UI. Le design est propre — c'est exactement ce qui distingue cette compétence d'un template.

Workflow (obligatoire, dans cet ordre)

Ne JAMAIS commencer par le code. Une landing sans brief est un template avec un autre nom.

  1. Brief — remplir assets/brief-template.md AVEC l'utilisateur. Si l'objectif, l'audience ou l'appel à l'action manquent : DEMANDER avant de continuer.
  2. Direction artistique — suivre references/design-direction.md : personnalité → typographie → couleur → layout → signature visuelle. La matérialiser dans assets/design-tokens.css.
  3. Architecture des sections — définir l'arc narratif (tableau ci-dessous) et le copy des titres avant de maquetter.
  4. Construction — section par section, mobile-first (390px d'abord). Animations avec references/animation-recipes.md.
  5. Audit — checklist de livraison (ci-dessous). Ne pas livrer sans l'avoir passée.
  6. Déploiement — build statique + hébergement (commandes ci-dessous).

Arc narratif (structure de base)

#SectionTravail qu'elle effectue
1HeroProposition de valeur compréhensible en <5s + CTA primaire
2Problème / contexteNomme la douleur que le visiteur reconnaît
3Solution / bénéficesComment tu la résous — bénéfices, pas fonctionnalités
4Preuve socialeTémoignages réels, logos, métriques
5Comment ça marcheÉtapes, démo, captures d'écran
6ObjectionsFAQ, garantie, prix
7CTA finalRépète la MÊME action unique du hero

Adapte, fusionne ou supprime des sections selon le brief — toutes les landings n'ont pas les 7.

Patterns critiques

  • Une seule conversion : toute la page pousse vers UNE action. Deux CTA distincts = brief mal fait.
  • Mobile-first réel : on conçoit et construit d'abord à 390px ; desktop est la progression, pas l'inverse.
  • LCP intouchable : l'élément LCP (titre ou image du hero) n'est jamais en opacity: 0 en CSS. Les entrées se font avec gsap.from() (sans JS la page s'affiche complète) et durent ≤ 1s au total.
  • prefers-reduced-motion : TOUTE animation vit à l'intérieur de gsap.matchMedia(). Sans exception.
  • Îles minimales : JS uniquement là où il y a une interaction réelle. Un accordéon FAQ est un <details>, pas un composant hydraté.
  • Images : toujours astro:assets (<Image>), AVIF/WebP, dimensions explicites, loading="lazy" sauf le hero.
  • Polices : auto-hébergées (woff2 local ou Fontsource), font-display: swap, maximum 2 familles, préchargement de la police d'affichage.

Checklist avant de livrer

  • Lighthouse mobile ≥ 95 en Performance, Accessibilité et SEO
  • CLS = 0 (dimensions sur les images, fallback de police ajusté)
  • Animations désactivées avec prefers-reduced-motion: reduce
  • Contraste AA : 4.5:1 pour le texte, 3:1 pour l'interface large
  • Navigable au clavier, focus visible, un seul h1
  • Meta description, balises OG, favicon, titre unique
  • Testée à 390px, 768px et 1440px
  • Test de la marque : en cachant le logo, la page pourrait-elle être celle d'une autre entreprise ? Si oui → retour à la phase 2

Commandes

# Créer le projet
pnpm create astro@latest ma-landing -- --template minimal --typescript strict
cd ma-landing
pnpm astro add tailwind
pnpm add gsap lenis

# Développement et build
pnpm dev
pnpm build && pnpm preview

# Déploiement (choisis un ; sur Netlify/Vercel/Cloudflare : build "pnpm build", output "dist")
npx wrangler pages deploy dist        # Cloudflare Pages direct
npx netlify deploy --prod --dir=dist  # Netlify direct

Ressources

Skills associés

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community