Communitygithub.com

ghazanfar111212/claude-skills-performance-marketing

Expert skill for designing conversion-focused landing pages for paid traffic. Use whenever the user mentions landing page design, lead capture page, sales page, squeeze page, funnel page, Unbounce/Instapage/GHL/Leadpages, above-the-fold, hero section, conversion rate optimization for landing pages, or "build a landing page for [vertical]." Also trigger for "audit my landing page," "why isn't my landing page converting," "mobile landing page," or when designing pages for specific verticals (dental, contractors, real estate, ecommerce, SaaS). Do NOT use for full website design or generic homepage design. Covers page architecture, copywriting frameworks, above-the-fold design, mobile-first patterns, CRO principles, vertical-specific templates, and integration with GHL/paid traffic.

claude-skills-performance-marketing とは？

claude-skills-performance-marketing is a Claude Code agent skill that expert skill for designing conversion-focused landing pages for paid traffic. Use whenever the user mentions landing page design, lead capture page, sales page, squeeze page, funnel page, Unbounce/Instapage/GHL/Leadpages, above-the-fold, hero section, conversion rate optimization for landing pages, or "build a landing page for [vertical]." Also trigger for "audit my landing page," "why isn't my landing page converting," "mobile landing page," or when designing pages for specific verticals (dental, contractors, real estate, ecommerce, SaaS). Do NOT use for full website design or generic homepage design. Covers page architecture, copywriting frameworks, above-the-fold design, mobile-first patterns, CRO principles, vertical-specific templates, and integration with GHL/paid traffic.

対応✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/ghazanfar111212/claude-skills-performance-marketing/tree/HEAD/skills/landing-page-designer
オリジナルを見る→すべてのスキルを見る

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

ドキュメント

Landing Page Designer

When to Use This Skill

  • Designing a new landing page for a paid traffic campaign
  • Auditing why an existing landing page isn't converting
  • Building vertical-specific templates (dental, contractors, SaaS, etc.)
  • Translating an ad angle into a matching page
  • Planning A/B tests on existing pages

Core Architecture: The 7-Section Page

Every high-converting landing page uses this structure:

  1. Above-the-fold hero (value prop + primary CTA)
  2. Social proof strip (logos, review stars, count)
  3. Problem / agitation
  4. Solution / offer breakdown
  5. Proof stack (testimonials, case studies, before/after)
  6. Objection handling (FAQ, guarantee, risk reversal)
  7. Final CTA + urgency

Long-form pages add: deep offer explanation, founder story, comparison tables. Short-form pages collapse sections 3-5.

Above-the-Fold Rules

The 5-Second Test

A visitor should, within 5 seconds, know:

  • What you offer
  • Who it's for
  • Why they should care
  • What to do next

If any of these 4 are unclear, the page fails.

Hero Section Formula

  • Headline: Outcome + specificity (not feature description)
  • Subheadline: Mechanism + timeline or differentiator
  • Hero visual: Product in context or outcome imagery (not stock photos)
  • CTA button: Action-oriented, first-person ("Get My Quote", not "Submit")
  • Social proof snippet: Star rating, review count, or trust badge

Headline Examples (Good)

  • "Get 20+ Qualified Dental Implant Patients Every Month" (dental)
  • "Transform Your Backyard in 6-8 Weeks - Guaranteed" (hardscaping)
  • "Send Cold Emails That Actually Land in the Inbox" (SaaS)

Headline Examples (Bad)

  • "Welcome to Our Website"
  • "Quality Dental Care You Can Trust" (vague, no outcome)
  • "The Leading Provider of..." (boring)

Copywriting Frameworks

The PAS Formula (Problem-Agitation-Solution)

Best for health, home services, pain-point driven offers.

  • Problem: State the specific pain
  • Agitation: Amplify consequences of not solving it
  • Solution: Introduce your offer as the answer

The AIDA Formula (Attention-Interest-Desire-Action)

Best for discretionary purchases, aesthetic, aspirational offers.

The "So That" Test

Every feature claim should pass the "so that" test:

  • Feature: "24/7 support"
  • So that: "...you never wait when something breaks"
  • Benefit: "You never wait when something breaks"

Lead with the benefit, support with feature.

Mobile-First Design Rules

70%+ of paid traffic is mobile. Design mobile first, then desktop.

Mobile Non-Negotiables

  • Primary CTA visible without scrolling
  • Click-to-call button for service businesses (above fold)
  • Single-column layout (no side-by-side)
  • Minimum 16px body font
  • Minimum 44px tap targets
  • Forms above the fold or sticky button to form
  • No horizontal scroll, ever
  • Images compressed and lazy-loaded

Speed Requirements

  • Target <2.5s LCP (Largest Contentful Paint)
  • Target <100ms FID (First Input Delay)
  • Tools: PageSpeed Insights, WebPageTest
  • Every 1s slower = ~10% drop in conversions

Form Design

Field Minimization

Each field added = ~10% drop in submission rate.

  • Rule of 3: Name, phone, email (+ 1 qualifying if needed)
  • Multi-step forms outperform long single-step forms
  • Progressive profiling - get more info after initial submit

Qualifying Fields (By Vertical)

  • Dental implants: "When did you lose the tooth?" (urgency signal)
  • Hardscaping: "Project budget range" (pre-qualify)
  • SaaS: "Team size" (qualify for pricing tier)
  • Real estate: "Timeline to buy/sell" (hot vs. cold lead)

Form Placement

  • Above fold: Best for high-intent searches (dental emergency, lawyer)
  • Below fold: Best for discovery traffic (social ads, content)
  • Sticky/floating: Hybrid - CTA follows user down page

Vertical-Specific Templates

Dental Implants

  • Hero: "Restore Your Smile in [City] - Free Consultation"
  • Hero visual: Before/after or confident patient smile
  • Trust: "10+ years experience", "2,000+ implants placed"
  • Offer: Free consultation + 3D scan ($[X] value)
  • Proof: Video testimonials, Google review screenshot
  • Urgency: "Limited consultation slots this month"

Hardscaping Contractor

  • Hero: "Transform Your Backyard in 6-8 Weeks"
  • Hero visual: Finished project photo (their best work)
  • Trust: Licensed, insured, warranty badge
  • Offer: Free on-site estimate + 3D design render
  • Proof: Portfolio gallery, project timeline
  • Objection: Financing options, warranty terms

SaaS (Free Trial)

  • Hero: Specific outcome + mechanism
  • Hero visual: Product screenshot or short demo loop
  • Trust: Customer logos (recognizable brands)
  • Offer: Start free trial / Book demo
  • Proof: Case studies with metrics, G2/Capterra badges
  • Objection: "No credit card required", cancellation policy

Real Estate Lead Gen

  • Hero: City-specific hook ("Homes in [Area] under $500K")
  • Hero visual: Map or property grid
  • Offer: Free home valuation / exclusive listings
  • Proof: Recent sales, years of experience, agent photo
  • Urgency: "New listings daily" + current market stats

Conversion Rate Optimization

What to Test (Priority Order)

  1. Offer (free vs. paid, what's included)
  2. Headline (outcome vs. feature vs. brand)
  3. Hero visual (product vs. outcome vs. person)
  4. CTA copy ("Get Started" vs. "Book My Call")
  5. Form length
  6. Social proof placement
  7. Colors/buttons (lowest impact - test last)

Minimum Sample Size

Don't call a test before:

  • 100 conversions per variant minimum
  • 2-week minimum duration (captures weekly cycle)
  • 95% confidence threshold

Common Lift Opportunities

  • Adding video testimonial near CTA (often +15-30% lift)
  • Reducing form fields by 1-2 (often +10-20%)
  • Sticky CTA on mobile (often +10-15%)
  • Social proof count at top (often +5-10%)
  • Speed improvements (varies hugely)

Ad-to-Page Match (Message Match)

Page headline must match the ad headline within 70%+ keyword overlap.

  • Bad: Ad says "Free Dental Implant Consultation" → Page headline "Welcome to [Practice Name]"
  • Good: Ad says "Free Dental Implant Consultation" → Page headline "Free Dental Implant Consultation - Book Today"

Scent Trail

  • Ad image → Hero image (same or visually similar)
  • Ad offer → Page offer (exact match)
  • Ad tone → Page tone (urgency matches urgency, premium matches premium)

GHL-Specific Patterns

GHL Funnel Setup

  • Use sections, not rows for major blocks
  • Mobile + desktop optimization is per-section (check both views)
  • Form → Opportunity pipeline auto-assignment
  • Thank you page = conversion pixel fire + next-step instructions
  • SMS confirmation automation on form submit

GHL Limitations to Plan Around

  • Limited font options (use custom CSS for brand consistency)
  • Mobile responsiveness sometimes needs manual fixes per section
  • Some animations unavailable - keep design clean
  • Third-party embeds for calendars work but test carefully

Anti-Patterns

  • Multiple CTAs competing for attention (stick to one primary action)
  • Carousels/sliders above the fold (low engagement, hurts mobile)
  • Auto-playing video with sound (violates UX norms)
  • Lightbox pop-ups on entry (kills ad traffic conversions)
  • "Download our whitepaper" as main CTA on paid traffic (too low commitment for most budgets)
  • No phone number for service businesses (losing ~30% of conversions)
  • Generic stock photos of smiling people in headsets (zero trust)
  • Long block paragraphs - mobile users scan, don't read

Audit Checklist

When auditing an existing page, check:

  • Above-the-fold passes 5-second test
  • Message match with ads (within 70% keyword overlap)
  • Mobile loads <2.5s
  • CTA visible without scroll on mobile
  • Phone number present (service businesses)
  • Form has ≤4 fields
  • Social proof above the fold
  • Thank you page fires conversion pixel
  • No broken links or images
  • GA4 + Meta Pixel + GTM firing correctly
  • Schema markup present (LocalBusiness, Service, etc.)

Individual skills in this repo

This repo contains 1 individual skill — each has its own dedicated page.

ghazanfar111212/claude-skills-performance-marketing

A strict visual quality bar and design systems for building landing pages that don't look AI-generated. Use whenever building, designing, or redesigning any landing page, funnel page, or lead-gen page - always load this TOGETHER WITH landing-page-designer (conversion structure) and frontend-design (visual craft). This skill supplies the banned-defaults list, approved design systems, the signature-element rule, conversion non-negotiables, and GHL build constraints. Trigger on "landing page", "lead gen page", "funnel page", "make it convert", "looks like AI made this", or any page built for paid ads or outbound campaigns.

関連スキル

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