Agent Skills: /fix-landing

|

UncategorizedID: phrazzld/claude-config/fix-landing

Install this agent skill to your local

pnpm dlx add-skill https://github.com/phrazzld/claude-config/tree/HEAD/skills/fix-landing

Skill Files

Browse the full folder contents for fix-landing.

Download Skill

Loading file tree…

skills/fix-landing/SKILL.md

Skill Metadata

Name
fix-landing
Description
|

/fix-landing

Fix the highest priority landing page issue.

What This Does

  1. Invoke /check-landing to audit landing page
  2. Identify highest priority issue
  3. Fix that one issue
  4. Verify the fix
  5. Report what was done

This is a fixer. It fixes one issue at a time. Run again for next issue. Use /copywriting for copy improvements.

Process

1. Run Primitive

Invoke /check-landing skill to get prioritized findings.

2. Fix Priority Order

Fix in this order:

  1. P0: No landing page, redirects to app
  2. P1: No value prop, no CTA, weak CTA, mobile broken, slow
  3. P2: No social proof, single CTA, missing metadata
  4. P3: Polish items

3. Execute Fix

No landing page (P0): Create app/page.tsx or app/(marketing)/page.tsx with:

  • Hero section with headline
  • Feature highlights
  • Call-to-action
  • Social proof section

No clear value prop (P1): Add compelling headline:

<section className="hero">
  <h1 className="text-5xl font-bold">
    [Verb] your [noun]. [Benefit] in [timeframe].
  </h1>
  <p className="text-xl text-gray-600">
    [Product] helps you [primary benefit] without [common pain point].
  </p>
</section>

Examples:

  • "Track your fitness. See results in weeks."
  • "Write better code. Ship faster with confidence."
  • "Manage your team. Focus on what matters."

No CTA or weak CTA (P1): Add strong CTA:

<a
  href="/signup"
  className="bg-primary text-white px-8 py-4 rounded-lg text-lg font-semibold"
>
  Start Free Trial →
</a>

CTA best practices:

  • Action-oriented: "Start", "Get", "Try", "Create"
  • Specific: "Start Free Trial" not "Submit"
  • Visible: High contrast, above fold
  • Multiple: Above fold + below fold

Mobile broken (P1): Add responsive classes:

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  {/* Features */}
</div>

Add mobile menu.

Slow load time (P1):

  • Use next/image for images
  • Use next/font for fonts
  • Remove heavy client-side libraries from landing
  • Ensure page is statically generated

No social proof (P2): Add testimonials section:

<section className="testimonials">
  <h2>What our users say</h2>
  <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
    <blockquote>
      <p>"Quote from happy user"</p>
      <cite>Name, Title at Company</cite>
    </blockquote>
  </div>
</section>

4. Expert Panel Review (MANDATORY)

Before returning fix to user, run expert panel review.

See: ui-skills/references/expert-panel-review.md

  1. Simulate 10 world-class advertorial experts (Ogilvy, Rams, Scher, Wiebe, Laja, Walter, Cialdini, Ive, Wroblewski, Millman)
  2. Each expert scores the fixed section 0-100 with specific feedback
  3. Calculate average score
  4. If average < 90: Implement highest-impact feedback, iterate
  5. If average ≥ 90: Proceed to verification

Example review output:

Expert Panel Review: Hero Section Fix

| Expert | Score | Critical Improvement |
|--------|-------|---------------------|
| Ogilvy | 85 | Lead with user benefit, not feature |
| Wiebe | 82 | CTA needs specificity ("Start Free Trial" not "Get Started") |
| Laja | 78 | Add social proof above fold |
| Cialdini | 84 | Include urgency element |
...
**Average: 84.5** ❌ → Implementing top 4 improvements...

Do not proceed until 90+ average achieved.

5. Verify

After fix passes expert review:

# Check headline exists
grep -E "text-(4xl|5xl|6xl)" app/page.tsx

# Check CTA exists
grep -E "Start|Get Started|Try|Sign Up" app/page.tsx

# Check mobile responsiveness
grep -E "sm:|md:|lg:" app/page.tsx | head -5

# Check performance (if lighthouse CLI available)
lighthouse http://localhost:3000 --only-categories=performance

6. Report

Fixed: [P1] No clear value proposition

Updated: app/page.tsx
- Added hero section with headline
- Added sub-headline explaining benefit
- Added supporting visual

Copy:
- Headline: "Track your fitness journey. See results in weeks."
- Sub: "Volume helps you build consistent habits without complicated tracking."

Next highest priority: [P1] No CTA button
Run /fix-landing again to continue.

Branching

Before making changes:

git checkout -b landing/improvements-$(date +%Y%m%d)

Single-Issue Focus

Landing pages are high-impact. Test each change:

  • A/B test major copy changes
  • Measure conversion impact
  • Keep changes reversible

Run /fix-landing repeatedly to optimize conversions.

Related

  • /check-landing - The primitive (audit only)
  • /log-landing-issues - Create issues without fixing
  • /copywriting - Marketing copy improvements
  • /cro - Conversion rate optimization