claude-engineering-plugin/plans/landing-page-launchkit-refresh.md

Landing Page LaunchKit Refresh

Overview

Review and enhance the /docs/index.html landing page using LaunchKit elements and Pragmatic Technical Writing style (Hunt/Thomas, Joel Spolsky). The current implementation is strong but can be refined section-by-section.

Current State Assessment

What's Working Well

• Specific, outcome-focused hero headline ("12 expert opinions in 30 seconds")
• Developer-authentic copywriting (N+1 queries, CORS, SQL injection)
• Stats section with clear metrics (23 agents, 16 commands, 11 skills, 2 MCP servers)
• Philosophy section with concrete story (N+1 query bug)
• Three-step installation with actual commands
• FAQ accordion following LaunchKit patterns
• Categorized feature sections with code examples

Missing Elements (From Best Practices Research)

1. Social Proof Section - No testimonials, GitHub stars, or user metrics
2. Visual Demo - No GIF/animation showing the tool in action
3. Arrow icons on CTAs - 26% conversion boost from studies
4. Trust indicators - Open source badge, license info

---

Section-by-Section Review Plan

1. Hero Section (lines 56-78)

Current:

<h1>Your Code Reviews Just Got 12 Expert Opinions. In 30 Seconds.</h1>

Review Checklist:

• Headline follows Pragmatic Writing (concrete before abstract) ✅
• Eyebrow badge is current (Version 2.6.0) - verify
• Description paragraph under 3 sentences ✅
• Button group has arrow icon on primary CTA
• "Read the Docs" secondary CTA present ✅

Potential Improvements:

• Add → arrow to "Install Plugin" button
• Consider adding animated terminal GIF below buttons showing /review in action

2. Stats Section (lines 81-104)

Current: 4 stat cards (23 agents, 16 commands, 11 skills, 2 MCP servers)

Review Checklist:

• Numbers are accurate (verify against actual file counts)
• Icons are appropriate for each stat
• Hover effects working properly
• Mobile layout (2x2 grid) is readable

Potential Improvements:

• Add "developers using" or "reviews run" metric if available
• Consider adding subtle animation on scroll

3. Philosophy Section (lines 107-192)

Current: "Why Your Third Code Review Should Be Easier Than Your First" with N+1 query story

Review Checklist:

• Opens with concrete story (N+1 query) ✅
• Quote block is memorable and quotable
• Four pillars (Plan, Delegate, Assess, Codify) are clear
• Each pillar has: tagline, description, tool tags
• Descriptions use "you" voice ✅

Potential Improvements:

• Review pillar descriptions for passive voice
• Ensure each pillar description follows PAS (Problem, Agitate, Solve) pattern
• Check tool tags are accurate and current

4. Agents Section (lines 195-423)

Current: 23 agents in 5 categories (Review, Research, Design, Workflow, Docs)

Review Checklist:

• All 23 agents are listed (count actual files)
• Categories are logical and scannable
• Each card has: name, badge, description, usage code
• Descriptions are conversational (not passive)
• Critical badges (Security, Data) stand out

Potential Improvements:

• Review agent descriptions against pragmatic writing checklist
• Ensure descriptions answer "when would I use this?"
• Add concrete scenarios to generic descriptions

5. Commands Section (lines 426-561)

Current: 16 commands in 2 categories (Workflow, Utility)

Review Checklist:

• All 16 commands are listed (count actual files)
• Core workflow commands are highlighted
• Descriptions are action-oriented
• Command names match actual implementation

Potential Improvements:

• Review command descriptions for passive voice
• Lead with outcomes, not features
• Add "saves you X minutes" framing where appropriate

6. Skills Section (lines 564-703)

Current: 11 skills in 3 categories (Development, Content/Workflow, Image Generation)

Review Checklist:

• All 11 skills are listed (count actual directories)
• Featured skill (gemini-imagegen) is properly highlighted
• API key requirement is clear
• Skill invocation syntax is correct

Potential Improvements:

• Review skill descriptions against pragmatic writing
• Ensure each skill answers "what problem does this solve?"

7. MCP Servers Section (lines 706-751)

Current: 2 MCP servers (Playwright, Context7)

Review Checklist:

• Tool lists are accurate
• Descriptions explain WHY not just WHAT
• Framework support list is current (100+)

Potential Improvements:

• Add concrete example of each server in action
• Consider before/after comparison

8. Installation Section (lines 754-798)

Current: "Three Commands. Zero Configuration." with 3 steps

Review Checklist:

• Commands are accurate and work
• Step 3 shows actual usage examples
• Timeline visual (vertical line) renders correctly
• Copy buttons work on code blocks

Potential Improvements:

• Add copy-to-clipboard functionality if missing
• Consider adding "What you'll see" output example

9. FAQ Section (lines 801-864)

Current: 5 questions in accordion format

Review Checklist:

• Questions address real objections
• Answers are conversational (use "you")
• Accordion expand/collapse works
• No passive voice in answers

Potential Improvements:

• Review for weasel words ("best practices suggest")
• Ensure answers are direct and actionable

10. CTA Section (lines 868-886)

Current: "Install Once. Compound Forever." with Install + GitHub buttons

Review Checklist:

• Badge is eye-catching ("Free & Open Source")
• Headline restates core value proposition
• Primary CTA has arrow icon ✅
• Trust line at bottom

Potential Improvements:

• Review trust line copy
• Consider adding social proof element

---

NEW: Social Proof Section (To Add)

Position: After Stats section, before Philosophy section

Components:

• GitHub stars counter (dynamic or static)
• "Trusted by X developers" metric
• 2-3 testimonial quotes (if available)
• Company logos (if applicable)

LaunchKit Pattern:

<section class="social-proof-section">
  <div class="heading centered">
    <p class="paragraph m secondary">Trusted by developers at</p>
  </div>
  <div class="logo-grid">
    <!-- Company logos or GitHub badge -->
  </div>
</section>

---

Pragmatic Writing Style Checklist (Apply to ALL Copy)

The Five Laws

1. Concrete Before Abstract - Story/example first, then principle
2. Physical Analogies - Import metaphors readers understand
3. Conversational Register - Use "you", contractions, asides
4. Numbered Frameworks - Create referenceable structures
5. Humor as Architecture - Mental anchors for dense content

Anti-Patterns to Find and Fix

• "It is recommended that..." → "Do this:"
• "Best practices suggest..." → "Here's what works:"
• Passive voice → Active voice
• Abstract claims → Specific examples
• Walls of text → Scannable lists

Quality Checklist (Per Section)

• Opens with concrete story or example?
• Can reader skim headers and get the arc?
• Uses "you" at least once?
• Clear action reader can take?
• Reads aloud like speech?

---

Implementation Phases

Phase 1: Copy Audit (No HTML Changes)

1. Read through entire page
2. Flag passive voice instances
3. Flag abstract claims without examples
4. Flag missing "you" voice
5. Document improvements needed

Phase 2: Copy Rewrites

1. Rewrite flagged sections following pragmatic style
2. Ensure each section passes quality checklist
3. Maintain existing HTML structure

Phase 3: Component Additions

1. Add arrow icons to primary CTAs
2. Add social proof section (if data available)
3. Consider visual demo element

Phase 4: Verification

1. Validate all counts (agents, commands, skills)
2. Test all links and buttons
3. Verify mobile responsiveness
4. Check accessibility

---

Files to Modify

File	Changes
docs/index.html	Copy rewrites, potential new section
docs/css/style.css	Social proof styles (if adding)

---

Success Criteria

1. All copy passes Pragmatic Writing quality checklist
2. No passive voice in any description
3. Every feature section answers "why should I care?"
4. Stats are accurate against actual file counts
5. Page loads in <3 seconds
6. Mobile layout is fully functional

---

References

• LaunchKit Template: https://launchkit.evilmartians.io/
• Pragmatic Writing Skill: ~/.claude/skills/pragmatic-writing-skill/SKILL.md
• Current Landing Page: /Users/kieranklaassen/every-marketplace/docs/index.html
• Style CSS: /Users/kieranklaassen/every-marketplace/docs/css/style.css