Skip to content
OpenSmartRoute
Skillv1.0.0

landing-page-vercel

Scaffolds a production-ready static landing page with working email capture form, analytics, and responsive design. Activates on "create landing page", "build a landing page", "launch page for product

by shipshitdev(0) 0 installs
Free
Sign in to install

Free account. Installing gives you the manifest plus copy-paste snippets.

See reviews

About

Imported from shipshitdev/skills (skills/landing-page-vercel/SKILL.md). Install upstream with npx skills add shipshitdev/skills --skill landing-page-vercel. Copyright stays with the author.

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:

  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

Choose an email capture option:

  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

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

Use it

Copy one of these into your project. Installing also returns the manifest and these snippets.

yaml
targets:
  - https://api.opensmartroute.ai/api/v1/registry/shipshitdev-skills-landing-page-vercel/manifest   # or paste the manifest below

Manifest

An Open Capability Manifest: the router reads it to know what this does, what it costs and when to pick it.

shipshitdev-skills-landing-page-vercel.ocm.jsonjson
{
  "ocm": "1",
  "id": "shipshitdev-skills-landing-page-vercel",
  "kind": "skill",
  "name": "landing-page-vercel",
  "description": "Scaffolds a production-ready static landing page with working email capture form, analytics, and responsive design. Activates on \"create landing page\", \"build a landing page\", \"launch page for product\", or similar requests. Optionally deploys to Vercel on explicit request.",
  "publisher": "shipshitdev",
  "version": "1.0.0",
  "capabilities": {
    "domains": [
      "marketing"
    ],
    "tags": [
      "skill-md",
      "landing-page",
      "vercel",
      "frontend",
      "skills-sh"
    ],
    "languages": [
      "en"
    ]
  },
  "quality_prior": 0.6,
  "examples": [
    "Scaffolds a production-ready static landing page with working email capture form, analytics, and responsive design. Activates on \"create landing page\", \"build a landing page\", \"launch page for product\", or similar requests. Optionally deploys to Vercel on explicit request."
  ],
  "primary": false,
  "metadata": {
    "source": {
      "provider": "skills.sh",
      "repository": "https://github.com/shipshitdev/skills",
      "path": "skills/landing-page-vercel/SKILL.md",
      "ref": "HEAD",
      "url": "https://github.com/shipshitdev/skills/blob/HEAD/skills/landing-page-vercel/SKILL.md",
      "key": "shipshitdev/skills/skills/landing-page-vercel/SKILL.md"
    }
  },
  "instructions": "# Landing Page (Vercel)\n\nCreate a static landing page with:\n\n## Contract\n\nInputs:\n\n- Product name, tagline, audience, offer, and CTA\n- Destination directory\n- Form provider and analytics preference\n\nOutputs:\n\n- Static landing page files\n- Form/analytics setup notes\n- Deployment instructions\n\nCreates/Modifies:\n\n- Local landing page files and Vercel config\n- Does not deploy production unless explicitly requested\n\nExternal Side Effects:\n\n- None during scaffolding\n- May deploy to Vercel only after explicit deploy request\n\nConfirmation Required:\n\n- Before using external form/analytics identifiers\n-",
  "cost": {
    "context_tokens": 1442
  }
}

Fetch it by URL: GET /api/v1/registry/shipshitdev-skills-landing-page-vercel/manifest?version=1.0.0

Reviews

Star ratings from people who tried it. One review per account; edit yours any time.

No reviews yet. Install it, try it, and be the first to rate it.