Now liveThe Skillselion MCP - thousands of ranked skills, loaded into your agent mid-task. No install.Get it →
shipshitdev avatar

Landing Page Vercel

shipshitdev/library

  • 224 installs
  • 31 repo stars
  • Updated August 2, 2026
  • shipshitdev/library

Ship a validation landing page on Vercel with hero, social proof, CTA, analytics, and fast deploy so you can test demand before full product build.

About

landing-page-vercel helps agents scaffold and deploy a conversion-focused landing page on Vercel—hero, proof, CTA, and capture forms—so teams can validate ideas and collect leads without building the full product first.

  • Vercel project and deploy setup
  • Hero, features, and CTA sections
  • Waitlist or signup form wiring
  • Basic analytics hookup
  • Performance-friendly static delivery

Landing Page Vercel by the numbers

  • 224 all-time installs (skills.sh)
  • +5 installs in the week ending Jul 27, 2026 (Skillselion tracking)
  • Ranked #828 of 2,245 Frontend Development skills by installs in the Skillselion catalog
  • Data as of Aug 3, 2026 (Skillselion catalog sync)
npx skills add https://github.com/shipshitdev/library --skill landing-page-vercel

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

Listed on Skillselion
Installs224
repo stars★ 31
Last updatedAugust 2, 2026
Repositoryshipshitdev/library ↗

What it does

Ship a validation landing page on Vercel with hero, social proof, CTA, analytics, and fast deploy so you can test demand before full product build.

Files

SKILL.mdMarkdownGitHub ↗

Landing Page (Vercel)

Create a production-ready static landing page with:

Contract

Inputs:

  • Product name, tagline, audience, offer, and CTA
  • Destination directory
  • Form provider and analytics preference

Outputs:

  • Static landing page files
  • Form/analytics setup notes
  • Deployment instructions

Creates/Modifies:

  • Local landing page files and Vercel config
  • Does not deploy production unless explicitly requested

External Side Effects:

  • None during scaffolding
  • May deploy to Vercel only after explicit deploy request

Confirmation Required:

  • Before using external form/analytics identifiers
  • Before running Vercel deploy commands
  • Before overwriting an existing landing page directory

Delegates To:

  • project-init-orchestrator / npx @shipshitdev/v0 for full Shipshit.dev product repos
  • frontend-design for custom visual design
  • deployment-composer or deploy for deployment
  • Structure: Semantic HTML5 + Modern CSS + Vanilla JS
  • Form: Working email capture (Formspree or custom endpoint)
  • Analytics: Plausible/Fathom ready
  • Design: Responsive, accessible, performant
  • Deploy: One-click Vercel deployment

What Makes This Different

This skill generates working landing pages, not empty templates:

  • Real email capture form that actually submits
  • Analytics integration ready to activate
  • Responsive design tested on mobile
  • Accessibility basics (WCAG 2.1 AA)
  • Content from your PRD brief

---

Workflow

Phase 1: PRD Brief Intake

Ask the user for product details, then extract and confirm:

I'll help you create a landing page. Based on your description:

**Product:** [Name]
**Tagline:** [One-line value proposition]

**Hero Section:**
- Headline: [Main headline]
- Subheadline: [Supporting text]
- CTA: [Button text]

**Features:** (3-5)
1. [Feature 1]: [Description]
2. [Feature 2]: [Description]
3. [Feature 3]: [Description]

**CTA Type:** [Waitlist / Sign Up / Demo Request / Contact]

**Social Proof:** [Testimonials / Logos / Stats / None]

Is this correct? Any adjustments?

Phase 2: Content Generation

Generate complete landing page content:

Sections:

1. Hero - Headline, subheadline, CTA button, optional hero image 2. Features - 3-5 feature cards with icons 3. How It Works - 3-step process (optional) 4. Social Proof - Testimonials or logos (optional) 5. FAQ - 4-6 common questions (optional) 6. CTA - Final call to action with form 7. Footer - Links, copyright, social icons

Phase 3: Form Integration

Email Capture Options:

1. Formspree (Recommended - Free tier)

  • No backend needed
  • Instant setup
  • Email notifications

2. Custom Endpoint

  • Your own API
  • Full control
  • Requires backend

3. Waitlist Service

  • Waitlist.email
  • Loops.so
  • ConvertKit

Phase 4: Quality Verification

Verify before handoff:

  • HTML validates (W3C)
  • Responsive on mobile
  • Form submits successfully
  • Analytics placeholders present
  • Lighthouse score 90+

---

Usage

# Create landing page with PRD
python3 scripts/scaffold.py \
  --out ./my-landing-page \
  --name "ProductName" \
  --tagline "Your compelling value proposition" \
  --features "Feature1,Feature2,Feature3"

# Interactive mode
python3 scripts/scaffold.py \
  --out ./my-landing-page \
  --interactive

---

Generated Structure

my-landing-page/
├── index.html           # Main landing page
├── styles.css           # All styles (no framework)
├── script.js            # Form handling + interactions
├── data.json            # Content data (easy to edit)
├── vercel.json          # Vercel configuration
├── assets/
│   ├── favicon.ico
│   └── og-image.png     # Social sharing image
└── README.md            # Deployment instructions

---

Key Patterns

Form Handling (JavaScript)

document.addEventListener('DOMContentLoaded', () => {
  const form = document.getElementById('signup-form');
  const button = form.querySelector('button[type="submit"]');
  const messageEl = document.getElementById('form-message');

  form.addEventListener('submit', async (e) => {
    e.preventDefault();

    const originalText = button.textContent;

    try {
      button.textContent = 'Submitting...';
      button.disabled = true;

      const response = await fetch(form.action, {
        method: 'POST',
        body: new FormData(form),
        headers: { 'Accept': 'application/json' }
      });

      if (response.ok) {
        // Hide form and show success message
        form.style.display = 'none';
        messageEl.textContent = 'Thanks! We will be in touch.';
        messageEl.classList.add('success');
      } else {
        throw new Error('Form submission failed');
      }
    } catch (error) {
      button.textContent = originalText;
      button.disabled = false;
      messageEl.textContent = 'Something went wrong. Please try again.';
      messageEl.classList.add('error');
    }
  });
});

Data Structure (data.json)

{
  "name": "ProductName",
  "tagline": "Your compelling value proposition",
  "hero": {
    "headline": "Build something amazing",
    "subheadline": "The easiest way to create, launch, and grow your product.",
    "cta": "Join the Waitlist"
  },
  "features": [
    {
      "icon": "zap",
      "title": "Lightning Fast",
      "description": "Built for speed from the ground up."
    },
    {
      "icon": "shield",
      "title": "Secure by Default",
      "description": "Enterprise-grade security included."
    },
    {
      "icon": "sparkles",
      "title": "AI-Powered",
      "description": "Smart features that learn from you."
    }
  ],
  "faq": [
    {
      "question": "When will you launch?",
      "answer": "We're aiming for Q1 2026. Join the waitlist to be first to know."
    }
  ]
}

---

Form Integration Guide

Option 1: Formspree (Recommended)

1. Go to formspree.io 2. Create a free account 3. Create a new form 4. Copy your form ID 5. Replace YOUR_FORM_ID in the HTML

Option 2: Custom Endpoint

// In script.js, update the form action
const API_URL = 'https://your-api.com/api/waitlist';

form.addEventListener('submit', async (e) => {
  e.preventDefault();
  const email = form.querySelector('input[name="email"]').value;

  const response = await fetch(API_URL, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ email })
  });
  // Handle response...
});

---

Analytics Setup

Plausible (Privacy-friendly)

<!-- Add to head section -->
<script defer data-domain="yourdomain.com" src="https://plausible.io/js/script.js"></script>

Fathom

<!-- Add to head section -->
<script src="https://cdn.usefathom.com/script.js" data-site="YOUR_SITE_ID" defer></script>

---

Deployment

Vercel (One-click)

# Deploy (no global install needed)
cd my-landing-page
bunx vercel

# Production deploy
bunx vercel --prod

Vercel Configuration (vercel.json)

{
  "version": 2,
  "builds": [
    { "src": "*.html", "use": "@vercel/static" },
    { "src": "*.css", "use": "@vercel/static" },
    { "src": "*.js", "use": "@vercel/static" },
    { "src": "assets/**", "use": "@vercel/static" }
  ],
  "routes": [
    { "src": "/(.*)", "dest": "/index.html" }
  ],
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        { "key": "X-Content-Type-Options", "value": "nosniff" },
        { "key": "X-Frame-Options", "value": "DENY" },
        { "key": "X-XSS-Protection", "value": "1; mode=block" }
      ]
    }
  ]
}

---

CSS Variables

:root {
  --color-primary: #3b82f6;
  --color-primary-dark: #2563eb;
  --color-bg: #0f172a;
  --color-bg-secondary: #1e293b;
  --color-text: #f8fafc;
  --color-text-muted: #94a3b8;
  --font-sans: system-ui, -apple-system, sans-serif;
  --max-width: 1200px;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 2rem;
  --spacing-xl: 4rem;
}

---

Accessibility Checklist

  • [x] Semantic HTML structure
  • [x] Proper heading hierarchy (h1 → h2 → h3)
  • [x] Alt text for images
  • [x] Focus states for interactive elements
  • [x] Color contrast ratio 4.5:1 minimum
  • [x] Form labels and error messages
  • [x] Skip link for keyboard navigation
  • [x] Responsive text sizing (no fixed px for body text)

---

Performance Checklist

  • [x] No external CSS frameworks
  • [x] Minimal JavaScript
  • [x] Optimized images (WebP with fallback)
  • [x] System fonts (no web font loading)
  • [x] Lazy loading for below-fold images
  • [x] Preconnect for external resources

---

References

  • scripts/scaffold.py - Generation script (templates are inline)

Related skills

vercel-labsVercel React Best PracticesAutomatically apply Vercel’s official React and Next.js performance rules during code generation and review.587k29.6kvercel-labsVercel Composition PatternsGenerate and refactor React components that stay maintainable as complexity grows without boolean prop explosion.267k29.6kshadcnShadcnAdd, compose, search, fix, and style production-grade React components directly from source without leaving their editor.257k120kxixu-meDevelop UserscriptsCorrectly write, debug, and package userscripts for Tampermonkey and ScriptCat with proper metadata, GM APIs, and runtime decisions.224k72leonxlnxMinimalist UiGenerate clean, editorial-style web interfaces with warm monochrome palettes, typographic hierarchy, bento grids and flat components that feel premium and utilita212k69.4kleonxlnxImage To CodeConvert high-fidelity design images into production-ready, visually accurate frontend code that avoids generic AI design pitfalls.177k69.4k
Frontend Developmentcontentdistribution
Browse by category
AI & AgentsFrontend & DesignBackend & DataDev ToolsAutomationTesting & ReviewSecurityMonitoring & CloudDocs & Planning
Design & frontend
Design systemsAnimation & motionAccessibility (a11y)CSS & TailwindUI designUXDesign to codeshadcn/uiLanding pagesBest design skills
Most searched skills
find-skillscavemanfrontend-designbrainstormingsystematic-debuggingstop-slopemil-design-engui-ux-pro-maxkarpathy-guidelinesweb-design-guidelinesreact-best-practicesgrill-meimprovemicrosoft-foundryagent-browser
Browse all listings
All agent skillsAll MCP serversAll marketplacesAll plugins

This week in AI coding

Five minutes, every Monday - the tools, releases and tactics for developers.

unsubscribe anytime.