Landing Page (Vercel)

Create a 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: product name, tagline, hero headline/subheadline/CTA, 3-5 features with descriptions, CTA type (Waitlist/Sign Up/Demo Request/Contact), and social proof preference (Testimonials/Logos/Stats/None). See references/full-guide.md (§ PRD Brief Intake Template) for the confirmation message format.

Phase 2: Content Generation

Generate complete landing page content across these sections:

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

Phase 3: Form Integration

Choose an email capture option:

Formspree (Recommended - Free tier) - no backend needed, instant setup, email notifications
Custom Endpoint - your own API, full control, requires backend
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

Generates index.html, styles.css, script.js, data.json, vercel.json, and an assets/ directory. See references/full-guide.md (§ Generated Structure) for the full file tree.

Key Patterns

Form submission handles loading/success/error states via fetch against the form's action URL; content lives in data.json (hero, features, faq) so copy edits never touch markup. See references/full-guide.md (§ Form Handling (JavaScript), § Data Structure (data.json)) for the full implementations.

Form Integration Guide

Formspree (Recommended): create a free account at formspree.io, create a form, and replace YOUR_FORM_ID in the HTML with the generated form ID.

Custom Endpoint: post { email } as JSON to a self-hosted API and handle the response. See references/full-guide.md (§ Option 2: Custom Endpoint) for the full snippet.

Analytics Setup

Add one script tag to the page head: Plausible (data-domain + plausible.io/js/script.js) for privacy-friendly analytics, or Fathom (cdn.usefathom.com/script.js + data-site). See references/full-guide.md (§ Analytics Setup) for both tags.

Deployment

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

vercel.json maps all static assets through @vercel/static, routes everything to index.html, and sets baseline security headers (X-Content-Type-Options, X-Frame-Options, X-XSS-Protection). See references/full-guide.md (§ Vercel Configuration (vercel.json)) for the full config.

CSS Variables

Theme tokens (--color-primary, --color-bg, --font-sans, --spacing-*, --max-width) drive the whole stylesheet — see references/full-guide.md (§ CSS Variables) for the full :root block.

Accessibility Checklist

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

Performance Checklist

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

References

scripts/scaffold.py - Generation script (templates are inline)
references/full-guide.md - Full PRD template, generated file tree, form/analytics/deploy config dumps, and CSS variable set

landing-page-vercel