Claude-skill-registry landing-page-marketing

Automate landing page updates and marketing asset capture following established patterns

install

source · Clone the upstream repo

git clone https://github.com/majiayu000/claude-skill-registry

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/majiayu000/claude-skill-registry "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/data/landing-page-marketing" ~/.claude/skills/majiayu000-claude-skill-registry-landing-page-marketing && rm -rf "$T"

manifest: skills/data/landing-page-marketing/SKILL.md

Landing Page Marketing Skill

Overview

This skill automates the complete workflow for updating the Saberloop landing page and capturing marketing assets. It consolidates screenshot capture, image processing, HTML updates, and deployment into a standardized process.

Landing Page Architecture

saberloop.com/
├── index.html          # Landing page (from ./landing/)
├── app/                # PWA application
├── app-staging/        # Staging PWA
└── [other endpoints]

./landing/
├── index.html          # Main landing page HTML
├── images/             # Landing page images (304x584 for mobile screenshots)
│   ├── demo.webm
│   ├── landing-*.png
│   └── party-demo.webm
└── [deployed to root]

When to Use This Skill

Use this skill when ANY of these are true:

Adding a new feature to showcase on landing page
Updating marketing copy or CTAs
Capturing new app screenshots
Creating demo videos
Refreshing existing screenshots after UI changes
Deploying landing page updates

Landing Page Sections

Section	Location (lines)	Purpose
Hero	~668-694	Main headline, video demo, primary CTAs
Features	~697-733	Feature cards grid (6-7 cards)
Party Mode	~736-759	Dedicated party mode section
How It Works	~762-788	4-step process explanation
Screenshots	~791-803	App screenshot gallery
Share Section	~806-819	Social sharing preview
CTA	~822-848	Final call-to-action columns
Footer	~851-862	Links and copyright

Complete Workflow

Phase 1: Screenshot Capture

Step 1.1: Create Capture Script

File:

tests/e2e/capture-[feature]-screenshots.spec.js

import { test, expect } from '@playwright/test';
import { setupAuthenticatedState, clearSessions } from './helpers.js';

const MOBILE_VIEWPORT = { width: 375, height: 667 };
const SCREENSHOT_DIR = 'landing/images';

test.use({ viewport: MOBILE_VIEWPORT });

test.describe('Capture [Feature] Screenshots', () => {

  test('[Feature] screenshot', async ({ page }) => {
    // Setup authenticated state if needed
    await setupAuthenticatedState(page);
    await clearSessions(page);
    await page.reload();
    await page.waitForSelector('[data-testid="welcome-heading"]', { timeout: 10000 });

    // Navigate to the screen to capture
    await page.goto('/#/[route]');
    await page.waitForTimeout(500);

    // Setup the UI state (scroll, open modals, etc.)
    // ...

    // Capture screenshot
    await page.screenshot({
      path: `${SCREENSHOT_DIR}/landing-[feature-name].png`,
      fullPage: false
    });

    console.log('✓ Captured: [Feature] screenshot');
  });

});

Step 1.2: Run Capture Script

# Run with visible browser
npx playwright test tests/e2e/capture-[feature]-screenshots.spec.js --headed

# Or run all capture scripts
npm run test:e2e:capture

Step 1.3: Process Images

# Resize to landing page dimensions (304x584)
# Option 1: Using Sharp CLI
npx sharp-cli landing/images/landing-[feature].png -o landing/images/landing-[feature].png resize 304 584

# Option 2: Using ImageMagick
convert landing/images/landing-[feature].png -resize 304x584 landing/images/landing-[feature].png

# Verify file size (should be <50KB for fast loading)
ls -la landing/images/landing-[feature].png

Phase 2: HTML Updates

Step 2.1: Add Feature Card

Location: Features grid in

landing/index.html

(~line 700)

<!-- Add after existing feature cards -->
<div class="feature-card">
    <div class="feature-icon">[EMOJI]</div>
    <h3>[Feature Name]</h3>
    <p>[Short description - 1-2 sentences]</p>
</div>

Available emojis for consistency:

🧠 AI/Learning
🌍 Languages/Global
🎓 Education/Levels
📱 Mobile/Offline
🔒 Privacy/Security
🎉 Social/Party
🤖 AI Models/Tech
⚡ Performance
💰 Pricing/Value

Step 2.2: Update CTA Section

Location: CTA columns in

landing/index.html

(~line 822)

<div class="cta-column">
    <h3>[Column Title]</h3>
    <ul>
        <li>[Benefit 1]</li>
        <li>[Benefit 2]</li>
        <li>[Benefit 3]</li>
        <li>[Benefit 4]</li>
    </ul>
    <a href="[URL]" class="btn btn-secondary" data-track="[tracking_id]">[Button Text]</a>
</div>

Step 2.3: Add Screenshot to Gallery

Location: Screenshots grid in

landing/index.html

(~line 794)

<img src="images/landing-[feature].png"
     alt="[Descriptive alt text]"
     width="304" height="584"
     loading="lazy">

Step 2.4: Update Structured Data

Location: JSON-LD in

<head>

(~line 52)

{
    "@context": "https://schema.org",
    "@type": "SoftwareApplication",
    "name": "Saberloop",
    "description": "[Updated description including new feature]",
    "featureList": [
        "AI-powered quiz generation",
        "[New feature description]",
        "Multi-language support",
        "Offline mode",
        "Party Mode multiplayer"
    ]
}

Phase 3: Testing

Step 3.1: Local Preview

# Serve landing page locally
npx serve landing -p 8080

# Or use Python
cd landing && python -m http.server 8080

Step 3.2: Responsive Testing

Test at these breakpoints:

Mobile: 375px (primary)
Tablet: 768px
Desktop: 1200px+

# Use Playwright for responsive screenshots
npx playwright test tests/e2e/capture-landing-responsive.spec.js

Phase 4: Deployment

Step 4.1: Deploy to Staging

# Build and deploy to staging first
npm run deploy:landing -- --staging

# Staging URL: https://saberloop.com/staging/ (if configured)
# Or test via: https://saberloop.com/app-staging/

Step 4.2: Verify Staging

Checklist:

Step 4.3: Deploy to Production

# Deploy landing page to production
npm run deploy:landing

# Production URL: https://saberloop.com/

Step 4.4: Post-Deploy Verification

# Clear CDN cache if needed (depends on hosting)
# Verify in incognito/private browsing
# Test on actual mobile device

Templates

Feature Card Template

<div class="feature-card">
    <div class="feature-icon">🤖</div>
    <h3>Feature Name</h3>
    <p>Brief description of the feature benefit to users. Keep it to 1-2 sentences.</p>
</div>

Hero Button Template

<a href="/app/" class="btn btn-primary" data-track="[tracking_id]">
    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
        <!-- SVG path here -->
    </svg>
    Button Text
</a>

Screenshot Capture Script Template

import { test, expect } from '@playwright/test';
import { setupAuthenticatedState, clearSessions } from './helpers.js';

const MOBILE_VIEWPORT = { width: 375, height: 667 };
const SCREENSHOT_DIR = 'landing/images';

test.use({ viewport: MOBILE_VIEWPORT });

test.describe('Capture Screenshots for Landing Page', () => {

  test.beforeEach(async ({ page }) => {
    await setupAuthenticatedState(page);
    await clearSessions(page);
    await page.reload();
    await page.waitForSelector('[data-testid="welcome-heading"]', { timeout: 10000 });
  });

  test('Screenshot 1: [Description]', async ({ page }) => {
    await page.goto('/#/[route]');
    await page.waitForTimeout(500);

    // Setup UI state...

    await page.screenshot({
      path: `${SCREENSHOT_DIR}/landing-[name].png`,
      fullPage: false
    });
    console.log('✓ Captured: [Description]');
  });

});

CSS Reference

Feature Card Styles

.feature-card {
    background: var(--background-light);  /* #252542 */
    padding: 32px;
    border-radius: 20px;
    text-align: center;
}

.feature-icon {
    font-size: 3rem;
    margin-bottom: 16px;
}

.feature-card h3 {
    font-size: 1.25rem;
    margin-bottom: 12px;
}

.feature-card p {
    color: var(--text-muted);  /* #a0a0b0 */
    font-size: 0.95rem;
}

Button Styles

.btn {
    padding: 16px 32px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
}

.btn-primary {
    background: var(--primary);  /* #FF6B35 */
    color: white;
}

.btn-secondary {
    background: var(--background-light);
    color: var(--text);
    border: 2px solid var(--background-light);
}

Color Variables

:root {
    --primary: #FF6B35;
    --primary-dark: #e55a2b;
    --background: #1a1a2e;
    --background-light: #252542;
    --text: #ffffff;
    --text-muted: #a0a0b0;
}

Tracking Events

All clickable elements should have

data-track

attribute:

<a href="/app/" data-track="web_app_hero">Try in Browser</a>

Events are automatically tracked via the script at the bottom of the landing page:

document.addEventListener('click', function(e) {
    const trackable = e.target.closest('[data-track]');
    if (trackable && typeof gtag === 'function') {
        gtag('event', trackable.dataset.track, {
            'event_category': 'engagement',
            'event_label': trackable.dataset.track
        });
    }
});

Image Specifications

Type	Dimensions	Format	Max Size	Location
App Screenshot	304x584	PNG	50KB	`landing/images/`
Demo Video	375x667	WebM	500KB	`landing/images/`
Hero Video	300x600	WebM	500KB	`landing/images/`

Deployment Commands

# Landing page only
npm run deploy:landing

# With staging flag (if configured)
npm run deploy:landing -- --staging

# Full app + landing
npm run deploy && npm run deploy:landing

Troubleshooting

Images Not Loading

Check file path is correct (relative to landing/index.html)
Verify file was uploaded (FTP deployment)
Clear browser cache
Check file permissions on server

Layout Issues

Test at all breakpoints (375, 768, 1200)
Check CSS grid/flexbox rules
Verify image dimensions match expected
Check for overflow issues

Tracking Not Working

Verify
```
data-track
```
attribute exists
Check GA is loaded (no ad blockers)
Verify gtag function is available
Check browser console for errors

Integration with Other Skills

This skill integrates with:

testing-suite-management - For E2E capture scripts
cicd-pipeline-management - For deployment workflows
documentation-generation - For marketing docs

References

Developer Guides

Existing Capture Scripts

tests/e2e/capture-landing-assets.spec.js

tests/e2e/capture-playstore-screenshots.spec.js

```
tests/e2e/capture-party-demo.spec.js
```

Previous Landing Updates

Version: 1.0.0 Last Updated: 2026-01-23 Compatible with: Saberloop v2.0.0+