tonatojustin4-sketch/barbershop-landing-page-skill

Barbershop Landing Page Skill

Activation explicite

Déclencheur principal :

/LANDINGPAGE

Alias :

/LANDINGBARBERIA

Les commandes sont insensibles à la casse.

Exemples :

• /LANDINGPAGE
• /LANDINGBARBERIA
• /LANDINGPAGE quiero una web para una barbería premium en Quito
• /LANDINGBARBERIA nombre: Black Crown

Lorsque l'une de ces commandes est invoquée :

1. Activez cette compétence immédiatement.
2. Entrez en mode Entretien de découverte.
3. Lisez d'abord le message actuel de l'utilisateur et le contexte de la conversation.
4. Ne demandez que les informations manquantes.
5. Ne commencez pas l'implémentation tant que le résumé critique de l'entreprise n'est pas suffisamment complet.
6. Une fois le résumé complet, procédez automatiquement sans demander « ¿Quieres que empiece? ».

Plan directeur maître intégré — obligatoire

Cette compétence inclut le plan directeur original complet de design/conversion à :

references/master-barbershop-landing-prompt.md

Avant de planifier ou d'implémenter la page d'atterrissage, lisez ce fichier.

Traitez-le comme le plan directeur de base canonique pour :

• l'architecture de la page,
• la structure CRO,
• AIDA,
• TOFU / MOFU / BOFU,
• la progression du contenu,
• la section héro,
• les services,
• la galerie,
• l'expérience,
• les plans,
• l'avant/après,
• l'équipe,
• les témoignages,
• Instagram/preuve sociale,
• l'emplacement,
• la FAQ,
• l'appel à l'action final,
• le flux de réservation,
• WhatsApp,
• le pied de page,
• le comportement responsive,
• les animations,
• la performance,
• l'accessibilité,
• le SEO local,
• la technologie recommandée,
• la direction photographique,
• le ton du copywriting,
• la distribution des CTA.

Ne réutilisez PAS aveuglément des espaces réservés fictifs du plan directeur lorsque des informations commerciales réelles sont disponibles.

Le plan directeur est un système structurel, pas une source de faits commerciaux fictifs.

Compétences de design compagnons

Cette compétence est l'orchestrateur.

Avant le design visuel / l'implémentation, vérifiez si ces compétences compagnons sont déjà disponibles :

1. Impeccable
2. Taste Skill / design-taste-frontend

Si elles sont manquantes et que l'exécution du shell est disponible, installez depuis la racine du projet :

npx impeccable install
npx skills add Leonxlnx/taste-skill

Ne réinstallez pas si déjà présentes.

Si l'installation nécessite une approbation, demandez uniquement l'approbation requise par l'environnement.

Si l'exécution du shell n'est pas disponible :

• continuez en utilisant cette compétence,
• appliquez les mêmes principes manuellement,
• ne prétendez jamais que les compétences ont été installées.

Séparation des rôles

Cette compétence possède

• la découverte,
• la compréhension de l'entreprise,
• la vérité sur l'entreprise,
• l'offre,
• la stratégie de conversion,
• l'architecture de la page,
• AIDA,
• TOFU/MOFU/BOFU,
• CRO,
• le copywriting,
• la logique des CTA,
• la hiérarchie du contenu,
• la stratégie d'actifs,
• les exigences d'implémentation,
• le SEO,
• la performance,
• l'accessibilité,
• la QA.

Taste Skill assiste avec

• la direction visuelle premium,
• les décisions de mise en page non génériques,
• l'échelle typographique,
• le rythme d'espacement,
• la personnalité des composants,
• le langage du mouvement,
• le goût frontend.

Impeccable assiste avec

• la critique de l'interface utilisateur,
• le raffinement,
• la hiérarchie,
• l'espacement,
• le polissage,
• la cohérence,
• la qualité responsive,
• la présentation axée sur l'accessibilité.

Les compétences compagnons peuvent améliorer la présentation, mais elles ne doivent pas remplacer :

• les informations commerciales réelles de l'utilisateur,
• les contraintes de marque,
• les objectifs de conversion,
• les contraintes légales / éthiques,
• le contenu critique de réservation.

Mode Entretien de découverte

L'entretien doit être simple pour l'utilisateur même si le système interne est avancé.

Lorsque peu d'informations sont disponibles, posez un questionnaire groupé compact.

N'interrogez pas une question par tour sauf si un seul fait critique manque.

Ne répétez pas les questions déjà répondues.

A. Identité de l'entreprise

Demandez :

• nom de la barberie,
• ville / quartier,
• adresse complète,
• lien Google Maps si disponible,
• heures d'ouverture,
• WhatsApp / téléphone,
• email si pertinent,
• Instagram,
• TikTok,
• autres profils sociaux.

B. Services et tarifs

Demandez :

• quels services sont offerts,
• le prix exact de chaque service,
• la durée approximative,
• quel service doit être promu le plus fortement,
• forfaits / packs,
• abonnements,
• promotions pour première visite,
• offres saisonnières.

N'inventez jamais de prix lorsque l'entreprise est réelle.

C. Réservation et conversion

Demandez :

• comment les clients réservent actuellement,
• WhatsApp / téléphone / formulaire / plateforme de réservation / sans rendez-vous,
• sur rendez-vous uniquement, sans rendez-vous uniquement, ou les deux,
• CTA principal,
• CTA secondaire,
• si l'utilisateur souhaite un flux de réservation simulé fonctionnel lorsqu'aucun backend n'existe.

D. Public et positionnement

Demandez :

• client idéal,
• âge / segment si pertinent,
• positionnement premium / urbain / classique / luxe / streetwear / old-school / familial / moderne,
• ce qui rend la barberie différente,
• pourquoi les clients la choisissent,
• objections courantes,
• disponibilité du parking,
• expérience de service,
• toute garantie ou réassurance.

E. Identité de marque

Demandez :

• logo,
• couleurs,
• typographies,
• slogan,
• symboles visuels,
• textures,
• détails distinctifs,
• personnalité de la marque,
• ambiance souhaitée.

Exemples :

• premium,
• masculin,
• éditorial,
• cinématographique,
• industriel,
• classique,
• minimal,
• luxe,
• urbain.

F. Actifs visuels réels

Demandez à l'utilisateur de partager lorsqu'ils sont disponibles :

• logo,
• photos extérieures,
• photos intérieures,
• photos des barbiers / équipe,
• photos des clients,
• photos de coupes,
• travail de barbe,
• images avant/après,
• photos de produits,
• photos de services,
• récompenses / certifications.

Priorisez les actifs réels plutôt que les images de stock ou générées.

Ne présentez jamais de personnes / intérieurs générés comme du vrai personnel, de vrais clients ou des locaux réels.

G. Témoignages et preuves

Demandez :

• captures d'écran d'avis,
• Google Avis,
• témoignages,
• note par étoiles,
• nombre d'avis,
• mentions dans la presse,
• preuve sociale,
• citations de clients.

Ne fabriquez jamais de témoignages d'apparence réelle lors de la construction d'une page pour une entreprise réelle.

Si aucun avis réel n'est disponible et que l'utilisateur ne souhaite qu'un prototype :

• marquez-les clairement en interne comme des espaces réservés,
• structurez-les pour un remplacement ultérieur,
• ne les présentez pas comme des avis réels vérifiés.

H. Références visuelles — question obligatoire

Demandez :

¿Tienes referencias visuales de barberías o sitios web que te gusten?

L'utilisateur peut fournir :

• des sites web,
• des images Pinterest,
• Behance,
• Dribbble,
• des références Instagram,
• des captures d'écran,
• des moodboards,
• des photos de galeries de design,
• des photos de barberies physiques,
• d'autres références de marques.

Lorsque c'est utile, demandez ce qu'ils aiment dans chacune :

• la section héro,
• la typographie,
• la palette,
• la photographie,
• le menu,
• les fiches de service,
• les prix,
• la galerie,
• le mouvement,
• le CTA,
• l'atmosphère,
• l'impression générale.

Règle de référence

Utilisez les références pour extraire :

• la composition,
• la hiérarchie,
• le rythme visuel,
• la densité spatiale,
• les relations typographiques,
• le traitement photographique,
• les motifs de composants,
• les idées de mouvement,
• les relations de couleurs,
• la direction éditoriale.

Ne copiez pas littéralement un site web tiers.

Ne reproduisez pas de logos tiers, de copywriting propriétaire, d'actifs de marque uniques ou d'œuvres d'art distinctives à moins que l'utilisateur ne les possède ou n'ait l'autorisation.

Entretien compact recommandé

Lorsque /LANDINGPAGE est appelé sans suffisamment de contexte, demandez quelque chose d'approchant :

1. ¿Cómo se llama la barbería y dónde está ubicada?
2. ¿Qué servicios ofrece y qué precio tiene cada uno?
3. ¿Cuál es el servicio o paquete que más quieres vender?
4. ¿Cuál es el horario?
5. ¿Cómo quieres que la gente reserve?
6. ¿Cuál es tu WhatsApp, teléfono y redes?
7. ¿A qué tipo de cliente quieres atraer?
8. ¿Qué hace diferente a tu barbería?
9. ¿Qué colores, tipografías, logo y estilo visual usan?
10. ¿Puedes compartir fotos del local, barberos, clientes y trabajos?
11. ¿Tienes reseñas o screenshots de comentarios reales?
12. ¿Tienes promociones, paquetes o membresías?
13. ¿Tienes referencias visuales de webs, Pinterest, Behance, Dribbble o screenshots que te gusten?
14. ¿Hay algo que NO quieres que aparezca en la web?

Ne mentionnez pas la méthodologie interne à moins que l'utilisateur ne le demande.

Achèvement progressif

Après chaque réponse de l'utilisateur :

• marquez les champs connus en interne,
• ne demandez que les informations critiques manquantes,
• ne recommencez pas le questionnaire,
• ne répétez pas les questions déjà répondues.

Lorsque suffisamment d'informations existent, passez automatiquement à l'exécution.

Résumé interne de l'entreprise + de la marque

Avant le design, construisez un résumé structuré interne :

business:
  name:
  category: barbershop
  city:
  neighborhood:
  address:
  maps_url:
  hours:
  phone:
  whatsapp:
  email:
  social:

conversion:
  primary_goal: booking
  primary_cta:
  secondary_cta:
  booking_channel:

audience:
  ideal_customer:
  positioning:
  objections:

brand:
  logo:
  colors:
  typography:
  slogan:
  visual_signatures:
  personality:

services:
  - name:
    description:
    price:
    duration:
    priority:

offers:
  packages:
  memberships:
  promotions:

assets:
  local_photos:
  team_photos:
  client_photos:
  haircut_photos:
  before_after:
  reviews:

references:
  - source:
    liked_for:

technical:
  current_stack:
  booking_backend:
  analytics:

Ceci est interne à moins que l'utilisateur ne demande à le voir.

Adaptation du plan directeur

Une fois le résumé de l'entreprise prêt :

1. Lisez references/master-barbershop-landing-prompt.md.
2. Extrayez le système stratégique / de page complet.
3. Remplacez toutes les valeurs fictives par les données réelles de l'utilisateur lorsqu'elles sont disponibles.
4. Supprimez les sections non pertinentes.
5. Ajoutez les sections spécifiques à l'entreprise manquantes lorsque c'est utile.
6. Préservez le parcours de conversion :
   • impact,
   • proposition de valeur,
   • services,
   • preuve de travail,
   • avantages,
   • expérience,
   • tarifs,
   • témoignages,
   • équipe,
   • emplacement,
   • objections,
   • réservation.
7. N'exposez pas les étiquettes AIDA/TOFU/MOFU/BOFU dans l'interface utilisateur.

Entonnoir par défaut

TOFU / Attention

Typique :

• en-tête,
• section héro,
• preuve visuelle,
• différenciateur clé,
• premier CTA.

MOFU / Intérêt + Désir

Typique :

• services,
• galerie,
• expérience,
• différenciation,
• équipe,
• tarifs,
• avant/après,
• preuve sociale.

BOFU / Action

Typique :

• avis,
• emplacement,
• FAQ,
• réservation,
• WhatsApp,
• CTA final.

Adaptez cet ordre lorsque l'entreprise ou les références justifient une meilleure séquence.

Copywriting

Ton :

• confiant,
• masculin,
• direct,
• élégant,
• premium.

Préférez :

• titres courts,
• langage de service concret,
• pertinence locale,
• preuve,
• différenciation réelle,
• verbes forts.

Évitez :

• le copywriting générique d'IA,
• les clichés de luxe vagues,
• « Bienvenue dans notre salon de coiffure »,
• les superlatifs non étayés,
• les longs paragraphes.

Direction visuelle

Direction visuelle de base à partir du plan directeur intégré :

• premium,
• masculin,
• éditorial,
• moderne,
• urbain,
• sophistiqué,
• cinématographique,
• minimal,
• exclusif sans être prétentieux.

Mais l'image de marque et les références réelles de l'utilisateur priment.

Évitez :

• l'esthétique de modèle SaaS,
• les dégradés bleus / violets technologiques,
• les cartes excessivement arrondies,
• les illustrations de dessins animés,
• les icônes excessives,
• les clichés bon marché de barberie,
• l'encombrement visuel.

Stratégie d'actifs

Priorité :

1. Actifs commerciaux réels fournis par l'utilisateur.
2. Actifs de marque appartenant à l'utilisateur.
3. Références fournies par l'utilisateur comme inspiration.
4. Imagerie décorative / conceptuelle générée.
5. Actifs de stock uniquement si nécessaire.

Si la génération d'images native existe :

• utilisez-la pour l'imagerie décorative ou conceptuelle de soutien lorsque cela est utile,
• ne fabriquez pas de vrais clients, membres de l'équipe, avis ou locaux réels.

Implémentation technique

Exigence de frontend dynamique

Cette compétence doit créer un véritable frontend interactif, pas une maquette statique.

Ordre d'implémentation préféré :

1. Si le projet existant utilise déjà Next.js

   • gardez Next.js,
   • préservez l'architecture actuelle lorsque c'est raisonnable,
   • construisez la page d'atterrissage dans le projet existant.

2. Si le projet existant utilise déjà React

   • gardez React lorsque la migration n'est pas nécessaire,
   • préservez les conventions de routage / build,
   • ajoutez la page d'atterrissage en tant que composants React prêts pour la production.

3. Si aucun projet frontend n'existe

   • créez un nouveau projet Next.js en utilisant :
     • Next.js
     • React
     • TypeScript
     • Tailwind CSS
   • utilisez le App Router sauf si le contexte du projet l'exige autrement.

Bibliothèques de support par défaut lorsque c'est utile :

• Framer Motion pour le mouvement / les interactions premium,
• Lucide React pour les icônes d'interface utilisateur sobres.

N'ajoutez pas de dépendances sans un objectif clair.

Interactivité requise

La page doit inclure un comportement interactif réel lorsque pertinent, comme :

• navigation collante / translucide,
• superposition de menu mobile plein écran ou animée,
• navigation fluide entre les sections,
• galerie / lightbox,
• comparaison avant/après,
• carrousel de témoignages / balayage,
• accordéon FAQ,
• modale / tiroir de réservation,
• interface de réservation en plusieurs étapes,
• CTA collant mobile responsive,
• états de survol / focus,
• support du mouvement réduit.

N'implémentez pas d'interactions factices qui semblent cliquables mais ne font rien.

Architecture des composants

Componentisez proprement. Composants typiques :

• Navbar
• MobileMenu
• Hero
• ValueProposition
• Services
• Gallery
• Experience
• Pricing
• BeforeAfter
• Barbers
• Testimonials
• SocialProof
• Location
• FAQ
• BookingModal
• FloatingWhatsApp
• MobileStickyCTA
• Footer

Adaptez les composants à l'entreprise réelle. Ne créez pas de sections inutilisées simplement parce qu'elles existent dans le plan directeur de référence.

Inspection du projet

Avant de coder :

• inspectez la racine du projet,
• détectez le gestionnaire de paquets,
• inspectez package.json,
• détectez les conventions Next.js/React/Tailwind,
• identifiez le système de design / les composants existants,
• préservez les conventions utiles,
• évitez les réécritures destructrices.

Si le projet est vide, initialisez le frontend au lieu de produire uniquement des snippets HTML.

Système de réservation

Si aucun backend n'existe :

• créez une interface utilisateur de réservation simulée fonctionnelle,
• prenez en charge la sélection du service,
• la sélection du barbier,
• la date,
• l'heure,
• les coordonnées du client,
• l'état de confirmation.

Ne prétendez jamais qu'un rendez-vous a été stocké à distance si aucun backend n'existe.

Si un backend / une intégration réelle existe :

• utilisez l'architecture existante,
• préservez la logique de disponibilité réelle,
• validez les états de succès / échec.

WhatsApp

Si WhatsApp est utilisé :

• créez un CTA de réservation clair,
• pré-remplissez un message utile lorsque approprié,
• optimisez pour mobile,
• n'inventez pas le numéro de téléphone.

Cartes

Lorsqu'une URL / adresse Maps existe :

• affichez l'adresse réelle,
• liez vers l'itinéraire,
• intégrez une carte lorsque c'est approprié.

SEO local

Pr

… [tronqué pour la traduction]