What is landing-page-marketing?

Perfect for Marketing Agents needing automated landing page updates and HTML deployment capabilities. AI-powered quiz app - test your knowledge on any topic with AI-generated questions. PWA with offline support.

How do I install landing-page-marketing?

Run the command: npx killer-skills add vitorsilva/saberloop/landing-page-marketing. It works with Cursor, Windsurf, VS Code, Claude Code, and 19+ other IDEs.

What are the use cases for landing-page-marketing?

Key use cases include: Automating landing page updates with AI-generated content, Generating and deploying HTML updates for marketing campaigns, Capturing and processing screenshots for landing page optimization.

Which IDEs are compatible with landing-page-marketing?

This skill is compatible with Cursor, Windsurf, VS Code, Trae, Claude Code, OpenClaw, Aider, Codex, OpenCode, Goose, Cline, Roo Code, Kiro, Augment Code, Continue, GitHub Copilot, Sourcegraph Cody, and Amazon Q Developer. Use the Killer-Skills CLI for universal one-command installation.

Are there any limitations for landing-page-marketing?

Requires access to saberloop.com landing page architecture. Limited to PWA application with offline support.

Landing Page Marketing Skill

Name: landing-page-marketing
Availability: InStock
Author: vitorsilva

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

javascript
1import { test, expect } from '@playwright/test';
2import { setupAuthenticatedState, clearSessions } from './helpers.js';
3
4const MOBILE_VIEWPORT = { width: 375, height: 667 };
5const SCREENSHOT_DIR = 'landing/images';
6
7test.use({ viewport: MOBILE_VIEWPORT });
8
9test.describe('Capture [Feature] Screenshots', () => {
10
11  test('[Feature] screenshot', async ({ page }) => {
12    // Setup authenticated state if needed
13    await setupAuthenticatedState(page);
14    await clearSessions(page);
15    await page.reload();
16    await page.waitForSelector('[data-testid="welcome-heading"]', { timeout: 10000 });
17
18    // Navigate to the screen to capture
19    await page.goto('/#/[route]');
20    await page.waitForTimeout(500);
21
22    // Setup the UI state (scroll, open modals, etc.)
23    // ...
24
25    // Capture screenshot
26    await page.screenshot({
27      path: `${SCREENSHOT_DIR}/landing-[feature-name].png`,
28      fullPage: false
29    });
30
31    console.log('✓ Captured: [Feature] screenshot');
32  });
33
34});

Step 1.2: Run Capture Script

bash
1# Run with visible browser
2npx playwright test tests/e2e/capture-[feature]-screenshots.spec.js --headed
3
4# Or run all capture scripts
5npm run test:e2e:capture

Step 1.3: Process Images

bash
1# Resize to landing page dimensions (304x584)
2# Option 1: Using Sharp CLI
3npx sharp-cli landing/images/landing-[feature].png -o landing/images/landing-[feature].png resize 304 584
4
5# Option 2: Using ImageMagick
6convert landing/images/landing-[feature].png -resize 304x584 landing/images/landing-[feature].png
7
8# Verify file size (should be <50KB for fast loading)
9ls -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)

html
1<!-- Add after existing feature cards -->
2<div class="feature-card">
3    <div class="feature-icon">[EMOJI]</div>
4    <h3>[Feature Name]</h3>
5    <p>[Short description - 1-2 sentences]</p>
6</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)

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

Step 2.3: Add Screenshot to Gallery

Location: Screenshots grid in landing/index.html (~line 794)

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

Step 2.4: Update Structured Data

Location: JSON-LD in <head> (~line 52)

json
1{
2    "@context": "https://schema.org",
3    "@type": "SoftwareApplication",
4    "name": "Saberloop",
5    "description": "[Updated description including new feature]",
6    "featureList": [
7        "AI-powered quiz generation",
8        "[New feature description]",
9        "Multi-language support",
10        "Offline mode",
11        "Party Mode multiplayer"
12    ]
13}

Phase 3: Testing

Step 3.1: Local Preview

bash
1# Serve landing page locally
2npx serve landing -p 8080
3
4# Or use Python
5cd landing && python -m http.server 8080

Step 3.2: Responsive Testing

Test at these breakpoints:

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

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

Phase 4: Deployment

Step 4.1: Deploy to Staging

bash
1# Build and deploy to staging first
2npm run deploy:landing -- --staging
3
4# Staging URL: https://saberloop.com/staging/ (if configured)
5# Or test via: https://saberloop.com/app-staging/

Step 4.2: Verify Staging

Checklist:

Step 4.3: Deploy to Production

bash
1# Deploy landing page to production
2npm run deploy:landing
3
4# Production URL: https://saberloop.com/

Step 4.4: Post-Deploy Verification

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

Templates

Feature Card Template

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

Hero Button Template

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

Screenshot Capture Script Template

javascript
1import { test, expect } from '@playwright/test';
2import { setupAuthenticatedState, clearSessions } from './helpers.js';
3
4const MOBILE_VIEWPORT = { width: 375, height: 667 };
5const SCREENSHOT_DIR = 'landing/images';
6
7test.use({ viewport: MOBILE_VIEWPORT });
8
9test.describe('Capture Screenshots for Landing Page', () => {
10
11  test.beforeEach(async ({ page }) => {
12    await setupAuthenticatedState(page);
13    await clearSessions(page);
14    await page.reload();
15    await page.waitForSelector('[data-testid="welcome-heading"]', { timeout: 10000 });
16  });
17
18  test('Screenshot 1: [Description]', async ({ page }) => {
19    await page.goto('/#/[route]');
20    await page.waitForTimeout(500);
21
22    // Setup UI state...
23
24    await page.screenshot({
25      path: `${SCREENSHOT_DIR}/landing-[name].png`,
26      fullPage: false
27    });
28    console.log('✓ Captured: [Description]');
29  });
30
31});

CSS Reference

Feature Card Styles

css
1.feature-card {
2    background: var(--background-light);  /* #252542 */
3    padding: 32px;
4    border-radius: 20px;
5    text-align: center;
6}
7
8.feature-icon {
9    font-size: 3rem;
10    margin-bottom: 16px;
11}
12
13.feature-card h3 {
14    font-size: 1.25rem;
15    margin-bottom: 12px;
16}
17
18.feature-card p {
19    color: var(--text-muted);  /* #a0a0b0 */
20    font-size: 0.95rem;
21}

Button Styles

css
1.btn {
2    padding: 16px 32px;
3    border-radius: 50px;
4    font-weight: 600;
5    font-size: 1rem;
6    text-decoration: none;
7}
8
9.btn-primary {
10    background: var(--primary);  /* #FF6B35 */
11    color: white;
12}
13
14.btn-secondary {
15    background: var(--background-light);
16    color: var(--text);
17    border: 2px solid var(--background-light);
18}

Color Variables

css
1:root {
2    --primary: #FF6B35;
3    --primary-dark: #e55a2b;
4    --background: #1a1a2e;
5    --background-light: #252542;
6    --text: #ffffff;
7    --text-muted: #a0a0b0;
8}

Tracking Events

All clickable elements should have data-track attribute:

html
1<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:

javascript
1document.addEventListener('click', function(e) {
2    const trackable = e.target.closest('[data-track]');
3    if (trackable && typeof gtag === 'function') {
4        gtag('event', trackable.dataset.track, {
5            'event_category': 'engagement',
6            'event_label': trackable.dataset.track
7        });
8    }
9});

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

bash
1# Landing page only
2npm run deploy:landing
3
4# With staging flag (if configured)
5npm run deploy:landing -- --staging
6
7# Full app + landing
8npm 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+