john/claude-engineering-plugin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix landing page component counts and formatting

Browse Source 
Critical fixes:
- Commands: 16 → 18 (added missing deploy-docs, release-docs)
- Agents: Fixed "24 specialized agents" → "23"
- Numbers: Standardized format (four → 4, three → 3, etc.)

Verified counts:
- 23 agents ✓
- 18 commands ✓
- 11 skills ✓
- 2 MCP servers ✓

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Kieran Klaassen
2025-11-26 20:39:00 -08:00
parent d367b2574d
commit ff9fd7cb0f
2 changed files with 303 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
docs/index.html
View File

@@ -4,7 +4,7 @@
<head>
<meta charset="utf-8" />
<title>Compounding Engineering - AI-Powered Development Tools for Claude Code</title>
<meta content="Your code reviews just got 12 expert opinions in 30 seconds. 23 specialized agents, 16 workflow commands, and 11 skills that make today's work easier than yesterday's." name="description" />
<meta content="Your code reviews just got 12 expert opinions in 30 seconds. 23 specialized agents, 18 workflow commands, and 11 skills that make today's work easier than yesterday's." name="description" />
<meta content="width=device-width, initial-scale=1" name="viewport" />
<!-- Open Graph -->
@@ -64,7 +64,7 @@
Your Code Reviews Just Got 12 Expert Opinions. In 30 Seconds.
</h1>
<p class="paragraph m secondary balanced" style="margin-bottom: 32px;">
Here's what happened when we shipped yesterday: security audit, performance analysis, architectural review, pattern detection, and eight more specialized checks—all running in parallel. No meetings. No waiting. Just answers. That's compounding engineering: 23 specialized agents, 16 workflow commands, and 11 skills that make today's work easier than yesterday's.
Here's what happened when we shipped yesterday: security audit, performance analysis, architectural review, pattern detection, and eight more specialized checks—all running in parallel. No meetings. No waiting. Just answers. That's compounding engineering: 23 specialized agents, 18 workflow commands, and 11 skills that make today's work easier than yesterday's.
</p>
<div class="button-group margin-paragraph centered">
<a href="#install" class="button primary">
@@ -87,7 +87,7 @@
</div>
<div class="stat-card">
<div class="stat-icon"><i class="fa-solid fa-terminal"></i></div>
<div class="stat-number">16</div>
<div class="stat-number">18</div>
<div class="stat-label">Slash Commands</div>
</div>
<div class="stat-card">
@@ -147,7 +147,7 @@
The <code>security-sentinel</code> has checked 10,000 PRs for SQL injection. The <code>kieran-rails-reviewer</code> never approves a controller with business logic. They don't get tired, don't skip Friday afternoon reviews, don't forget the conventions you agreed on in March. Run <code>/workflows:work</code> and watch your plan execute with quality gates that actually enforce your standards—every single time.
</p>
<div class="pillar-tools">
<span class="tool-tag">24 specialized agents</span>
<span class="tool-tag">23 specialized agents</span>
<span class="tool-tag">/workflows:work</span>
<span class="tool-tag">dhh-ruby-style skill</span>
<span class="tool-tag">git-worktree skill</span>
@@ -291,7 +291,7 @@
<!-- Research Agents -->
<div class="agent-category">
<h3><i class="fa-solid fa-microscope"></i> Research Agents (four)</h3>
<h3><i class="fa-solid fa-microscope"></i> Research Agents (4)</h3>
<div class="grid columns-2">
<div class="agent-card">
<div class="agent-header">
@@ -330,7 +330,7 @@
<!-- Design Agents -->
<div class="agent-category">
<h3><i class="fa-solid fa-palette"></i> Design Agents (three)</h3>
<h3><i class="fa-solid fa-palette"></i> Design Agents (3)</h3>
<div class="grid columns-3">
<div class="agent-card">
<div class="agent-header">
@@ -361,7 +361,7 @@
<!-- Workflow Agents -->
<div class="agent-category">
<h3><i class="fa-solid fa-gears"></i> Workflow Agents (five)</h3>
<h3><i class="fa-solid fa-gears"></i> Workflow Agents (5)</h3>
<div class="grid columns-2">
<div class="agent-card">
<div class="agent-header">
@@ -408,7 +408,7 @@
<!-- Docs Agent -->
<div class="agent-category">
<h3><i class="fa-solid fa-file-lines"></i> Documentation Agent (one)</h3>
<h3><i class="fa-solid fa-file-lines"></i> Documentation Agent (1)</h3>
<div class="grid">
<div class="agent-card full-width">
<div class="agent-header">
@@ -426,7 +426,7 @@
<section id="commands">
<div class="heading">
<h2 class="no-top-margin">
<i class="fa-solid fa-terminal color-accent"></i> 16 Powerful Commands
<i class="fa-solid fa-terminal color-accent"></i> 18 Powerful Commands
</h2>
<p class="paragraph m secondary">
Slash commands that replace entire workflows. <code>/workflows:review</code> is your code review committee. <code>/workflows:plan</code> is your research team. <code>/triage</code> sorts 50 todos in the time it takes you to read five. Each one automates hours of work into a single line.
@@ -556,6 +556,20 @@
</div>
<p class="command-description">Resolve file-based todos in parallel.</p>
</div>
<div class="command-card">
<div class="command-header">
<code class="command-name">/release-docs</code>
<span class="command-type-badge">util</span>
</div>
<p class="command-description">Build and update the documentation site with current plugin components.</p>
</div>
<div class="command-card">
<div class="command-header">
<code class="command-name">/deploy-docs</code>
<span class="command-type-badge">util</span>
</div>
<p class="command-description">Validate and prepare documentation for GitHub Pages deployment.</p>
</div>
</div>
</div>
</section>
@@ -870,7 +884,7 @@ skill: gemini-imagegen</code></pre>
<span class="cta-badge"><i class="fa-solid fa-bolt"></i> Free & Open Source</span>
<h2>Install Once. Compound Forever.</h2>
<p class="paragraph m cta-subheading">
<strong>Your next code review takes 30 seconds.</strong> The one after that? Even faster. That's compounding. Get 23 expert agents, 16 workflow commands, and 11 specialized skills working for you right now.
<strong>Your next code review takes 30 seconds.</strong> The one after that? Even faster. That's compounding. Get 23 expert agents, 18 workflow commands, and 11 specialized skills working for you right now.
</p>
<div class="button-group margin-paragraph centered">
<a href="#install" class="button primary cta-primary">

279
plans/landing-page-launchkit-refresh.md Normal file
View File

@@ -0,0 +1,279 @@
# 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:**
```html
<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 `/workflows: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:**
```html
<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`