tonatojustin4-sketch/barbershop-landing-page-skill

Barbershop Landing Page Skill

Explicit activation

Primary trigger:

/LANDINGPAGE

Alias:

/LANDINGBARBERIA

Treat commands case-insensitively.

Examples:

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

When one of these commands is invoked:

1. Activate this skill immediately.
2. Enter Discovery Interview Mode.
3. Read the user's current message and conversation context first.
4. Ask only for missing information.
5. Do not start implementation until the critical business brief is sufficiently complete.
6. Once the brief is complete, proceed automatically without asking "¿Quieres que empiece?".

Bundled master blueprint — mandatory

This skill includes the full original design/conversion blueprint at:

references/master-barbershop-landing-prompt.md

Before planning or implementing the landing page, read that file.

Treat it as the canonical base blueprint for:

• page architecture,
• CRO structure,
• AIDA,
• TOFU / MOFU / BOFU,
• content progression,
• hero,
• services,
• gallery,
• experience,
• plans,
• before/after,
• team,
• testimonials,
• Instagram/social proof,
• location,
• FAQ,
• final CTA,
• booking flow,
• WhatsApp,
• footer,
• responsive behavior,
• animations,
• performance,
• accessibility,
• local SEO,
• recommended technology,
• photographic direction,
• copywriting tone,
• CTA distribution.

Do NOT blindly reuse fictional placeholders from the blueprint when real business information is available.

The blueprint is a structural system, not a source of fake business facts.

Companion design skills

This skill is the orchestrator.

Before visual design/implementation, verify whether these companion skills are already available:

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

If missing and shell execution is available, install from the project root:

npx impeccable install
npx skills add Leonxlnx/taste-skill

Do not reinstall if already present.

If installation requires approval, request only the approval required by the environment.

If shell execution is unavailable:

• continue using this skill,
• apply the same principles manually,
• never claim the skills were installed.

Role separation

This skill owns

• discovery,
• business understanding,
• business truth,
• offer,
• conversion strategy,
• page architecture,
• AIDA,
• TOFU/MOFU/BOFU,
• CRO,
• copy,
• CTA logic,
• content hierarchy,
• asset strategy,
• implementation requirements,
• SEO,
• performance,
• accessibility,
• QA.

Taste Skill assists with

• premium visual direction,
• non-generic layout decisions,
• typography scale,
• spacing rhythm,
• component personality,
• motion language,
• frontend taste.

Impeccable assists with

• UI critique,
• refinement,
• hierarchy,
• spacing,
• polish,
• consistency,
• responsive quality,
• accessibility-minded presentation.

The companion skills may improve the presentation, but they must not override:

• the user's real business information,
• brand constraints,
• conversion goals,
• legal/ethical constraints,
• critical booking content.

Discovery Interview Mode

The interview should be simple for the user even though the internal system is advanced.

When little information is available, ask one compact grouped questionnaire.

Do not interrogate one question per turn unless only one critical fact is missing.

Do not repeat answered questions.

A. Business identity

Ask for:

• barbershop name,
• city / neighborhood,
• full address,
• Google Maps link if available,
• opening hours,
• WhatsApp / phone,
• email if relevant,
• Instagram,
• TikTok,
• other social profiles.

B. Services and pricing

Ask:

• which services are offered,
• exact price of each service,
• approximate duration,
• which service should be promoted most strongly,
• bundles/packages,
• memberships,
• first-visit promotions,
• seasonal offers.

Never invent prices when the business is real.

C. Booking and conversion

Ask:

• how customers currently book,
• WhatsApp / phone / form / booking platform / walk-in,
• appointment only, walk-in only, or both,
• primary CTA,
• secondary CTA,
• whether the user wants a functional simulated booking flow when no backend exists.

D. Audience and positioning

Ask:

• ideal customer,
• age/segment if relevant,
• premium / urban / classic / luxury / streetwear / old-school / family / modern positioning,
• what makes the barbershop different,
• why clients choose it,
• common objections,
• parking availability,
• service experience,
• any guarantee or reassurance.

E. Brand identity

Ask:

• logo,
• colors,
• typography,
• slogan,
• visual symbols,
• textures,
• signature details,
• brand personality,
• desired mood.

Examples:

• premium,
• masculine,
• editorial,
• cinematic,
• industrial,
• classic,
• minimal,
• luxury,
• urban.

F. Real visual assets

Ask the user to share when available:

• logo,
• exterior photos,
• interior photos,
• barbers/team photos,
• client photos,
• haircut photos,
• beard work,
• before/after images,
• product photos,
• service photos,
• awards/certifications.

Prioritize real assets over stock or generated imagery.

Never present generated people/interiors as real staff, clients or actual premises.

G. Testimonials and proof

Ask for:

• screenshots of reviews,
• Google Reviews,
• testimonials,
• star rating,
• review count,
• press mentions,
• social proof,
• customer quotes.

Never fabricate real-looking testimonials when building a real business page.

If no real reviews are available and the user only wants a prototype:

• clearly mark them internally as placeholders,
• structure them for later replacement,
• do not represent them as verified real reviews.

H. Visual references — mandatory question

Ask:

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

The user may provide:

• websites,
• Pinterest images,
• Behance,
• Dribbble,
• Instagram references,
• screenshots,
• moodboards,
• photos from design galleries,
• photos of physical barbershops,
• other brand references.

When useful, ask what they like about each:

• hero,
• typography,
• palette,
• photography,
• menu,
• service cards,
• pricing,
• gallery,
• motion,
• CTA,
• atmosphere,
• overall feel.

Reference rule

Use references to extract:

• composition,
• hierarchy,
• visual rhythm,
• spatial density,
• type relationships,
• photography treatment,
• component patterns,
• motion ideas,
• color relationships,
• editorial direction.

Do not copy a third-party website literally.

Do not reproduce third-party logos, proprietary copy, unique brand assets or distinctive artwork unless the user owns them or has permission.

Recommended compact interview

When /LANDINGPAGE is called without enough context, ask something close to:

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?

Do not mention internal methodology unless the user asks.

Progressive completion

After each user response:

• mark known fields internally,
• ask only for missing critical information,
• do not restart the questionnaire,
• do not repeat questions already answered.

When enough information exists, proceed automatically to execution.

Internal Business + Brand Brief

Before designing, build a structured internal brief:

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:

This is internal unless the user asks to see it.

Blueprint adaptation

After the business brief is ready:

1. Read references/master-barbershop-landing-prompt.md.
2. Extract the full strategic/page system.
3. Replace all fictional values with real user data when available.
4. Remove irrelevant sections.
5. Add missing business-specific sections when useful.
6. Preserve the conversion journey:
   • impact,
   • value proposition,
   • services,
   • proof of work,
   • benefits,
   • experience,
   • pricing,
   • testimonials,
   • team,
   • location,
   • objections,
   • booking.
7. Do not expose AIDA/TOFU/MOFU/BOFU labels in the UI.

Default funnel

TOFU / Attention

Typical:

• header,
• hero,
• visual proof,
• key differentiator,
• first CTA.

MOFU / Interest + Desire

Typical:

• services,
• gallery,
• experience,
• differentiation,
• team,
• pricing,
• before/after,
• social proof.

BOFU / Action

Typical:

• reviews,
• location,
• FAQ,
• booking,
• WhatsApp,
• final CTA.

Adapt this order when the business or references justify a better sequence.

Copywriting

Tone:

• confident,
• masculine,
• direct,
• elegant,
• premium.

Prefer:

• short headlines,
• concrete service language,
• local relevance,
• proof,
• real differentiation,
• strong verbs.

Avoid:

• generic AI copy,
• vague luxury clichés,
• "Welcome to our barber shop",
• unsupported superlatives,
• long paragraphs.

Visual direction

Base visual direction from the bundled blueprint:

• premium,
• masculine,
• editorial,
• modern,
• urban,
• sophisticated,
• cinematic,
• minimal,
• exclusive without being pretentious.

But the user's real branding and references take precedence.

Avoid:

• SaaS template aesthetics,
• blue/purple tech gradients,
• excessive rounded cards,
• cartoon illustrations,
• excessive icons,
• cheap barber clichés,
• visual clutter.

Asset strategy

Priority:

1. Real user-provided business assets.
2. User-owned brand assets.
3. User-provided references as inspiration.
4. Generated decorative/conceptual assets.
5. Stock assets only if needed.

If native image generation exists:

• use it for decorative or conceptual supporting imagery when helpful,
• do not fabricate real customers, team members, reviews or real premises.

Technical implementation

Dynamic frontend requirement

This skill must create a real interactive frontend, not a static mockup.

Preferred implementation order:

1. If the existing project already uses Next.js

   • keep Next.js,
   • preserve the current architecture when reasonable,
   • build the landing inside the existing project.

2. If the existing project already uses React

   • keep React when migration is unnecessary,
   • preserve routing/build conventions,
   • add the landing as production-ready React components.

3. If no frontend project exists

   • create a new Next.js project using:
     • Next.js
     • React
     • TypeScript
     • Tailwind CSS
   • use the App Router unless the project context requires otherwise.

Default supporting libraries when useful:

• Framer Motion for premium motion/interactions,
• Lucide React for restrained UI icons.

Do not add dependencies without a clear purpose.

Required interactivity

The page should include real interactive behavior where relevant, such as:

• sticky/translucent navigation,
• fullscreen or animated mobile/menu overlay,
• smooth section navigation,
• gallery/lightbox,
• before/after comparison,
• testimonial carousel/swipe behavior,
• FAQ accordion,
• booking modal/drawer,
• multi-step booking interface,
• responsive mobile sticky CTA,
• hover/focus states,
• reduced-motion support.

Do not implement fake interactions that look clickable but do nothing.

Component architecture

Componentize cleanly. Typical components:

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

Adapt components to the actual business. Do not create unused sections just because they exist in the reference blueprint.

Project inspection

Before coding:

• inspect the project root,
• detect the package manager,
• inspect package.json,
• detect Next.js/React/Tailwind conventions,
• identify existing design system/components,
• preserve useful conventions,
• avoid destructive rewrites.

If the project is empty, initialize the frontend instead of producing only HTML snippets.

Booking system

If no backend exists:

• create a functional simulated booking UI,
• support service selection,
• barber selection,
• date,
• time,
• customer details,
• confirmation state.

Never falsely claim an appointment was stored remotely if no backend exists.

If a real backend/integration exists:

• use the existing architecture,
• preserve real availability logic,
• validate success/failure states.

WhatsApp

If WhatsApp is used:

• create clear booking CTA,
• prefill a useful message where appropriate,
• optimize for mobile,
• do not invent the phone number.

Maps

When a Maps URL/address exists:

• display the real address,
• link to directions,
• embed a map when suitable.

Local SEO

Prepare where applicable:

• title,
• meta description,
• OpenGraph,
• favicon,
• manifest,
• semantic headings,
• LocalBusiness / Barbershop schema,
• PostalAddress,
• OpeningHours,
• AggregateRating only when supported by real data,
• Review schema only when supported by real reviews.

Never fabricate structured-data ratings/reviews.

Responsive design

Verify:

• 375
• 390
• 430
• 768
• 1024
• 1440
• 1920

Mobile-first:

• large tap targets,
• fullscreen or simplified menu,
• visible CTA,
• swipe-friendly media,
• no horizontal overflow,
• optional bottom sticky actions.

Motion

Use contained premium motion:

• reveal,
• stagger,
• image reveal,
• subtle hover scale,
• smooth menu transitions,
• minimal parallax.

Respect: prefers-reduced-motion

Avoid:

• bouncing,
• childish motion,
• excessive parallax,
• performance-heavy effects.

Performance

Target strong real-world performance.

Use:

• lazy loading,
• optimized images,
• WebP/AVIF,
• font optimization,
• code splitting,
• minimal JS,
• efficient animation.

Avoid unnecessarily heavy video.

Accessibility

Target WCAG AA:

• semantic HTML,
• alt text,
• labels,
• keyboard navigation,
• visible focus,
• correct contrast,
• accessible modal/drawer behavior.

Taste + Impeccable execution sequence

Once the brief is complete:

1. Read the bundled master blueprint.
2. Synthesize business facts + brand + references.
3. Use Taste Skill to define:
   • page visual direction,
   • layout language,
   • typography,
   • spacing,
   • component personality,
   • motion.
4. Implement the page.
5. Use Impeccable to review:
   • hierarchy,
   • spacing,
   • consistency,
   • visual polish,
   • responsive behavior,
   • readability,
   • CTA prominence.
6. Apply relevant fixes.
7. Run technical/functional QA.

Local preview and delivery — mandatory

After implementation, do not stop after writing files.

The agent must try to make the landing page locally reviewable.

Validation sequence

Before starting the preview server:

1. Install dependencies if needed.
2. Run the project's relevant checks when available:
   • typecheck,
   • lint,
   • tests if present and relevant,
   • production build when practical.
3. Fix blocking errors caused by the implementation.
4. Confirm the page route loads.

Start local development server

Detect the project's package manager and available scripts.

Preferred behavior:

• npm: npm run dev
• pnpm: pnpm dev
• yarn: yarn dev
• bun: bun dev

For a standard Next.js app, the expected first URL is commonly:

http://localhost:3000

Do not assume port 3000 if the framework chooses a different port.

Read the actual terminal output and report the exact local URL.

If port 3000 is occupied and the dev server moves to another port, report the new port.

Preview handoff

When the server starts successfully, the final delivery must include:

• exact localhost URL,
• route to open if the landing is not at /,
• short summary of what was implemented,
• any simulated functionality that still needs a backend,
• any missing real assets/data that remain placeholders.

Example:

Landing lista para revisar:
http://localhost:3000

Reserva: interfaz funcional simulada.
Pendiente: conectar disponibilidad real y envío de confirmaciones.

Browser verification

If the current agent environment has a browser or visual verification capability:

1. open the localhost URL,
2. verify the page renders,
3. check the main CTA,
4. check mobile navigation,
5. open the booking flow,
6. verify no obvious console/runtime errors,
7. visually inspect at least desktop and mobile widths,
8. fix obvious implementation issues before final delivery.

If a localhost server cannot be kept running

If the environment does not allow a persistent development server:

• do not claim that localhost is running,
• provide the exact command the user should run,
• state the expected route,
• still complete all code and validation possible in the environment.

The preferred outcome is always a running local preview when the environment supports it.

QA checklist

Business truth

• Name correct.
• Services correct.
• Prices correct.
• Address correct.
• Hours correct.
• Contact correct.
• Booking method correct.
• Reviews/ratings are real or clearly placeholders in prototype mode.

Conversion

• Hero communicates value fast.
• Primary CTA obvious.
• CTA appears at useful intervals.
• Pricing is easy to understand.
• Proof supports trust.
• Booking friction is low.
• Final CTA is strong.

Design

• Brand is reflected.
• References were synthesized, not copied.
• Typography hierarchy is strong.
• Real photography prioritized.
• Mobile is polished.
• Page does not look like a generic SaaS template.

Technical

• Responsive.
• Accessible.
• Navigation works.
• Menu works.
• Booking interface works.
• Buttons/links work.
• No placeholder lorem ipsum.
• No obvious runtime/console errors when verification tools are available.
• No horizontal overflow.

Failure prevention

Never:

• code before understanding the business,
• invent real business facts,
• invent real reviews,
• fake structured-data ratings,
• copy a reference site literally,
• present generated people as real customers/staff,
• reinstall companion skills every invocation,
• let aesthetics obscure booking,
• hide prices when the user wants them visible,
• ask again for information already provided,
• stop after planning when the user requested implementation.
• deliver only static HTML when a dynamic React/Next.js implementation is appropriate.
• leave interactive-looking controls non-functional.
• claim a localhost preview is running without actually starting/verifying the dev server.