Barbershop Landing Page Skill

Explizite Aktivierung

Primärer Auslöser:

/LANDINGPAGE

Alias:

/LANDINGBARBERIA

Befehle werden case-insensitiv behandelt.

Beispiele:

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

Wenn einer dieser Befehle aufgerufen wird:

1. Dieses Skill sofort aktivieren.
2. In den Discovery-Interview-Modus wechseln.
3. Zuerst die aktuelle Nachricht des Benutzers und den Kontext lesen.
4. Nur nach fehlenden Informationen fragen.
5. Nicht mit der Implementierung beginnen, bis das kritische Geschäftsbriefing ausreichend vollständig ist.
6. Sobald das Briefing vollständig ist, automatisch fortfahren, ohne zu fragen: "¿Quieres que empiece?".

Gebündelte Master-Vorlage – verpflichtend

Dieses Skill enthält die vollständige originale Design/Conversion-Vorlage unter:

references/master-barbershop-landing-prompt.md

Vor der Planung oder Implementierung der Landingpage: Diese Datei lesen.

Sie als kanonische Basisvorlage behandeln für:

• Seitenarchitektur,
• CRO-Struktur,
• AIDA,
• TOFU / MOFU / BOFU,
• Content-Progression,
• Hero,
• Services,
• Galerie,
• Experience,
• Pläne,
• Vorher/Nachher,
• Team,
• Testimonials,
• Instagram/Social Proof,
• Standort,
• FAQ,
• finaler CTA,
• Buchungsablauf,
• WhatsApp,
• Footer,
• responsives Verhalten,
• Animationen,
• Performance,
• Barrierefreiheit,
• lokales SEO,
• empfohlene Technologie,
• fotografische Richtung,
• Copywriting-Ton,
• CTA-Verteilung.

Keine fiktiven Platzhalter aus der Vorlage blind übernehmen, wenn echte Geschäftsinformationen verfügbar sind.

Die Vorlage ist ein strukturelles System, keine Quelle für erfundene Geschäftsfakten.

Companion Design Skills

Dieses Skill ist der Orchestrator.

Vor der visuellen Gestaltung/Implementierung prüfen, ob diese Companion Skills bereits verfügbar sind:

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

Falls nicht vorhanden und Shell-Ausführung möglich, aus dem Projektstammverzeichnis installieren:

npx impeccable install
npx skills add Leonxlnx/taste-skill

Nicht neu installieren, falls bereits vorhanden.

Falls die Installation eine Genehmigung erfordert, nur die notwendige Genehmigung anfordern.

Falls Shell-Ausführung nicht verfügbar ist:

• mit diesem Skill fortfahren,
• dieselben Prinzipien manuell anwenden,
• nie behaupten, die Skills seien installiert.

Rollentrennung

Dieses Skill besitzt

• Discovery,
• Geschäftsverständnis,
• Geschäftswahrheit,
• Angebot,
• Conversion-Strategie,
• Seitenarchitektur,
• AIDA,
• TOFU/MOFU/BOFU,
• CRO,
• Copy,
• CTA-Logik,
• Content-Hierarchie,
• Asset-Strategie,
• Implementierungsanforderungen,
• SEO,
• Performance,
• Barrierefreiheit,
• QA.

Taste Skill unterstützt bei

• Premium-Visual-Direction,
• nicht-generischen Layout-Entscheidungen,
• Typografie-Skala,
• Abstands-Rhythmus,
• Komponenten-Persönlichkeit,
• Bewegungs-Sprache,
• Frontend-Geschmack.

Impeccable unterstützt bei

• UI-Kritik,
• Verfeinerung,
• Hierarchie,
• Abständen,
• Politur,
• Konsistenz,
• responsiver Qualität,
• barrierefreier Präsentation.

Die Companion Skills können die Präsentation verbessern, dürfen aber nicht überschreiben:

• die echten Geschäftsinformationen des Benutzers,
• Markenbeschränkungen,
• Conversion-Ziele,
• rechtliche/ethische Einschränkungen,
• kritische Buchungsinhalte.

Discovery-Interview-Modus

Das Interview sollte für den Benutzer einfach sein, auch wenn das interne System fortschrittlich ist.

Wenn wenig Informationen verfügbar sind, einen kompakten, gruppierten Fragebogen stellen.

Nicht eine Frage pro Durchgang stellen, es sei denn, es fehlt nur eine kritische Tatsache.

Bereits beantwortete Fragen nicht wiederholen.

A. Geschäftsidentität

Fragen nach:

• Barbershop-Name,
• Stadt / Nachbarschaft,
• vollständige Adresse,
• Google Maps Link (falls verfügbar),
• Öffnungszeiten,
• WhatsApp / Telefon,
• E-Mail (falls relevant),
• Instagram,
• TikTok,
• andere Social-Profile.

B. Dienstleistungen und Preise

Fragen:

• welche Dienstleistungen angeboten werden,
• genauer Preis jeder Dienstleistung,
• ungefähre Dauer,
• welche Dienstleistung am stärksten beworben werden soll,
• Bundles/Pakete,
• Mitgliedschaften,
• Erstbesuchs-Aktionen,
• saisonale Angebote.

Nie Preise erfinden, wenn das Geschäft real ist.

C. Buchung und Conversion

Fragen:

• wie Kunden derzeit buchen,
• WhatsApp / Telefon / Formular / Buchungsplattform / Walk-in,
• nur nach Termin, nur Walk-in oder beides,
• primärer CTA,
• sekundärer CTA,
• ob der Benutzer einen funktionalen simulierten Buchungsablauf wünscht, wenn kein Backend existiert.

D. Zielgruppe und Positionierung

Fragen:

• idealer Kunde,
• Alter/Segment (falls relevant),
• Premium / Urban / Classic / Luxury / Streetwear / Old-School / Family / Modern Positionierung,
• was den Barbershop anders macht,
• warum Kunden ihn wählen,
• häufige Einwände,
• Parkmöglichkeiten,
• Service-Erfahrung,
• Garantie oder Zusicherung.

E. Markenidentität

Fragen:

• Logo,
• Farben,
• Typografie,
• Slogan,
• visuelle Symbole,
• Texturen,
• charakteristische Details,
• Markenpersönlichkeit,
• gewünschte Stimmung.

Beispiele:

• Premium,
• maskulin,
• editorial,
• cineastisch,
• industriell,
• klassisch,
• minimalistisch,
• luxuriös,
• urban.

F. Echte visuelle Assets

Den Benutzer bitten, wenn verfügbar, zu teilen:

• Logo,
• Außenaufnahmen,
• Innenaufnahmen,
• Barber/Team-Fotos,
• Kundenfotos,
• Haarschnitt-Fotos,
• Bartarbeit,
• Vorher/Nachher-Bilder,
• Produktfotos,
• Service-Fotos,
• Auszeichnungen/Zertifikate.

Echte Assets gegenüber Stock- oder generierten Bildern priorisieren.

Nie generierte Personen/Innenräume als echtes Personal, Kunden oder tatsächliche Räumlichkeiten darstellen.

G. Testimonials und Beweise

Fragen nach:

• Screenshots von Bewertungen,
• Google Reviews,
• Testimonials,
• Sternebewertung,
• Anzahl der Bewertungen,
• Presserwähnungen,
• Social Proof,
• Kundenaussagen.

Nie realistisch aussehende Testimonials erfinden, wenn eine echte Geschäftsseite erstellt wird.

Falls keine echten Bewertungen verfügbar sind und der Benutzer nur einen Prototypen wünscht:

• intern klar als Platzhalter markieren,
• für späteren Austausch strukturieren,
• nicht als verifizierte echte Bewertungen darstellen.

H. Visuelle Referenzen – Pflichtfrage

Fragen:

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

Der Benutzer kann bereitstellen:

• Websites,
• Pinterest-Bilder,
• Behance,
• Dribbble,
• Instagram-Referenzen,
• Screenshots,
• Moodboards,
• Fotos aus Design-Galerien,
• Fotos von physischen Barbershops,
• andere Markenreferenzen.

Wenn nützlich, fragen, was ihnen an jeder gefällt:

• Hero,
• Typografie,
• Palette,
• Fotografie,
• Menü,
• Service-Karten,
• Preise,
• Galerie,
• Bewegung,
• CTA,
• Atmosphäre,
• Gesamtgefühl.

Referenzregel

Referenzen verwenden, um zu extrahieren:

• Komposition,
• Hierarchie,
• visuellen Rhythmus,
• räumliche Dichte,
• Typografie-Beziehungen,
• fotografische Behandlung,
• Komponentenmuster,
• Bewegungsideen,
• Farbbeziehungen,
• redaktionelle Richtung.

Keine Drittanbieter-Website wörtlich kopieren.

Keine Logos, proprietären Texte, Marken-Assets oder unverwechselbaren Kunstwerke von Drittanbietern reproduzieren, es sei denn, der Benutzer besitzt sie oder hat die Erlaubnis.

Empfohlenes kompaktes Interview

Wenn /LANDINGPAGE ohne ausreichenden Kontext aufgerufen wird, etwa Folgendes fragen:

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?

Interne Methodik nicht erwähnen, es sei denn, der Benutzer fragt.

Progressive Vervollständigung

Nach jeder Benutzerantwort:

• bekannte Felder intern markieren,
• nur nach fehlenden kritischen Informationen fragen,
• den Fragebogen nicht neu starten,
• bereits beantwortete Fragen nicht wiederholen.

Wenn genügend Informationen vorliegen, automatisch zur Ausführung übergehen.

Internes Geschäfts- und Marken-Briefing

Vor dem Design ein strukturiertes internes Briefing erstellen:

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

conversion:
  primary_goal: buchung
  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:

Dies ist intern, es sei denn, der Benutzer fragt danach.

Vorlagenanpassung

Nachdem das Geschäfts-Briefing bereit ist:

1. references/master-barbershop-landing-prompt.md lesen.
2. Das vollständige strategische Seiten-System extrahieren.
3. Alle fiktiven Werte durch echte Benutzerdaten ersetzen, wenn verfügbar.
4. Nicht relevante Abschnitte entfernen.
5. Fehlende geschäftsspezifische Abschnitte hinzufügen, wenn nützlich.
6. Die Conversion-Journey bewahren:
   • Wirkung,
   • Wertversprechen,
   • Dienstleistungen,
   • Arbeitsnachweise,
   • Vorteile,
   • Erfahrung,
   • Preise,
   • Testimonials,
   • Team,
   • Standort,
   • Einwände,
   • Buchung.
7. AIDA/TOFU/MOFU/BOFU-Labels nicht in der UI anzeigen.

Standard-Trichter

TOFU / Aufmerksamkeit

Typisch:

• Header,
• Hero,
• visueller Beweis,
• wichtigstes Unterscheidungsmerkmal,
• erster CTA.

MOFU / Interesse + Wunsch

Typisch:

• Dienstleistungen,
• Galerie,
• Erfahrung,
• Differenzierung,
• Team,
• Preise,
• Vorher/Nachher,
• Social Proof.

BOFU / Aktion

Typisch:

• Bewertungen,
• Standort,
• FAQ,
• Buchung,
• WhatsApp,
• finaler CTA.

Diese Reihenfolge anpassen, wenn das Geschäft oder Referenzen eine bessere Abfolge rechtfertigen.

Copywriting

Ton:

• selbstbewusst,
• maskulin,
• direkt,
• elegant,
• Premium.

Bevorzugen:

• kurze Schlagzeilen,
• konkrete Servicesprache,
• lokale Relevanz,
• Beweise,
• echte Differenzierung,
• starke Verben.

Vermeiden:

• generisches KI-Copy,
• vage Luxus-Klischees,
• "Willkommen in unserem Barbershop",
• unbegründete Superlative,
• lange Absätze.

Visuelle Richtung

Visuelle Richtung basierend auf der gebündelten Vorlage:

• Premium,
• maskulin,
• editorial,
• modern,
• urban,
• anspruchsvoll,
• cineastisch,
• minimalistisch,
• exklusiv ohne anmaßend zu sein.

Aber die echten Marken- und Referenzen des Benutzers haben Vorrang.

Vermeiden:

• SaaS-Vorlagen-Ästhetik,
• blau/violette Tech-Verläufe,
• übermäßig abgerundete Karten,
• Cartoon-Illustrationen,
• übermäßige Icons,
• billige Barber-Klischees,
• visuelles Durcheinander.

Asset-Strategie

Priorität:

1. Echte, vom Benutzer bereitgestellte Geschäfts-Assets.
2. Vom Benutzer eigene Marken-Assets.
3. Vom Benutzer bereitgestellte Referenzen als Inspiration.
4. Generierte dekorative/konzeptionelle Assets.
5. Stock-Assets nur bei Bedarf.

Wenn native Bildgenerierung existiert:

• für dekorative oder konzeptionelle unterstützende Bilder verwenden, wenn hilfreich,
• keine echten Kunden, Teammitglieder, Bewertungen oder echten Räumlichkeiten erfinden.

Technische Implementierung

Dynamisches Frontend – erforderlich

Dieses Skill muss ein echtes interaktives Frontend erstellen, kein statisches Mockup.

Bevorzugte Implementierungsreihenfolge:

1. Wenn das vorhandene Projekt bereits Next.js verwendet

   • Next.js behalten,
   • die aktuelle Architektur bewahren, wenn sinnvoll,
   • die Landingpage innerhalb des vorhandenen Projekts erstellen.

2. Wenn das vorhandene Projekt bereits React verwendet

   • React behalten, wenn Migration nicht erforderlich ist,
   • Routing-/Build-Konventionen bewahren,
   • die Landingpage als produktionsreife React-Komponenten hinzufügen.

3. Wenn kein Frontend-Projekt existiert

   • ein neues Next.js-Projekt erstellen mit:
     • Next.js
     • React
     • TypeScript
     • Tailwind CSS
   • den App Router verwenden, es sei denn, der Projektkontext erfordert etwas anderes.

Standard-Bibliotheken (wenn nützlich):

• Framer Motion für Premium-Bewegungen/Interaktionen,
• Lucide React für dezente UI-Icons.

Keine Abhängigkeiten ohne klaren Zweck hinzufügen.

Erforderliche Interaktivität

Die Seite sollte echtes interaktives Verhalten enthalten, wo relevant, wie:

• sticky/transluzente Navigation,
• Vollbild- oder animiertes mobiles Menü-Overlay,
• sanfte Abschnittsnavigation,
• Galerie/Lightbox,
• Vorher/Nachher-Vergleich,
• Testimonial-Carousel/Wischverhalten,
• FAQ-Akkordeon,
• Buchungs-Modal/Seitenleiste,
• mehrstufige Buchungsoberfläche,
• responsive mobile sticky CTA,
• Hover/Focus-Zustände,
• reduced-motion-Unterstützung.

Keine falschen Interaktionen implementieren, die anklickbar aussehen, aber nichts tun.

Komponenten-Architektur

Sauber komponentisieren. Typische Komponenten:

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

Komponenten an das tatsächliche Geschäft anpassen. Keine ungenutzten Abschnitte erstellen, nur weil sie in der Referenzvorlage existieren.

Projektinspektion

Vor dem Programmieren:

• das Projektstammverzeichnis inspizieren,
• den Paketmanager erkennen,
• package.json inspizieren,
• Next.js/React/Tailwind-Konventionen erkennen,
• vorhandenes Designsystem/Komponenten identifizieren,
• nützliche Konventionen bewahren,
• zerstörerische Neuschreibungen vermeiden.

Wenn das Projekt leer ist, das Frontend initialisieren, anstatt nur HTML-Snippets zu produzieren.

Buchungssystem

Wenn kein Backend existiert:

• eine funktionale simulierte Buchungs-UI erstellen,
• Dienstleistungsauswahl unterstützen,
• Barber-Auswahl,
• Datum,
• Uhrzeit,
• Kundendaten,
• Bestätigungsstatus.

Nie fälschlich behaupten, dass ein Termin remote gespeichert wurde, wenn kein Backend existiert.

Wenn ein echtes Backend/Integration existiert:

• die vorhandene Architektur verwenden,
• die reale Verfügbarkeitslogik bewahren,
• Erfolgs-/Fehlerzustände validieren.

WhatsApp

Wenn WhatsApp verwendet wird:

• klaren Buchungs-CTA erstellen,
• eine nützliche Nachricht vorausfüllen, wo angemessen,
• für Mobilgeräte optimieren,
• keine Telefonnummer erfinden.

Karten

Wenn eine Maps-URL/Adresse existiert:

• die echte Adresse anzeigen,
• einen Link zur Navigation bereitstellen,
• eine Karte einbetten, wenn geeignet.

Lokales SEO

Pr