Ship Page

Create interactive, animation-rich landing pages that run entirely in the browser as a single HTML file.

This skill helps non-designers ship professional product pages through visual exploration ("show, don't tell"), then generates production-quality landing pages with real interactivity — not static mockups.

Core Principles

Zero Dependencies — Single HTML file with inline CSS/JS. No npm, no build tools, no frameworks. A single HTML file will outlive any React project.
Show, Don't Tell — People can't describe what they want, but they know it when they see it. Generate visual previews, let them pick.
Anti-AI-Slop — No purple gradients on white. No generic SaaS templates. Every page should feel custom-crafted for the product.
Interactive by Default — Landing pages aren't slides. They have scroll animations, hover states, data counters, particle effects, and micro-interactions that make visitors stay.
Ship-Ready — Output works immediately. Drop the HTML file anywhere — GitHub Pages, Vercel, Netlify, or just open it in a browser.

Detect Mode

Mode A: New Page — Create from scratch. Go to Phase 1.
Mode B: README Conversion — Turn a GitHub README or product description into a landing page. Extract content, then go to Phase 1 Step 2 (skip content questions, go straight to style).
Mode C: Enhancement — Improve an existing HTML landing page. Read it, understand the structure, enhance while preserving content. Follow viewport and section density rules.

Phase 1: Discovery

Understand the product and gather content. Ask ALL questions in a single AskUserQuestion call.

Question 1 — Product Type (header: "Product"): What are you building? Options: SaaS / Developer Tool / Mobile App / Open Source Project / Personal Brand / Other

Question 2 — Content (header: "Content"): What should the page include? Options: I'll paste my content / Pull from my README / Just describe it for me / I have a document

Question 3 — Key Sections (header: "Sections", multiSelect: true): Which sections do you need? Options: Hero with CTA / Features Grid / How It Works / Pricing / Testimonials / FAQ / Stats & Metrics / Newsletter Signup / GitHub Stars Badge

Question 4 — Launch Target (header: "Launch"): Where will this page live? Options: GitHub Pages / Standalone website / Product Hunt launch / Just exploring

If user provides content (README, description, document), proceed to:

Step 1.1: Content Analysis

Parse the provided content and extract:

Product name and one-line description
Key features (aim for 3-6)
Target audience signals
Any metrics/numbers mentioned
Call-to-action (what should visitors do?)

Confirm via AskUserQuestion (header: "Content Check"): "Here's what I extracted — does this look right?" Options: Looks good / Let me adjust

Phase 2: Style Discovery

This is the "show, don't tell" phase. Most people can't articulate design preferences in words.

Step 2.1: Vibe Selection

Ask via AskUserQuestion (header: "Vibe", multiSelect: true, max 2): What feeling should visitors get? Options: Futuristic & Tech / Clean & Minimal / Bold & Energetic / Dark & Premium / Playful & Creative / Corporate & Trust

Step 2.2: Generate Style Previews

Based on vibe selection, generate 3 distinct single-section HTML previews showing:

Typography choices (heading + body font pairing)
Color palette (background, text, accent, CTA)
Hero section layout with the product name
One micro-interaction or animation
Overall atmosphere (background treatment, spacing)

Each preview should be a complete, working HTML file showing just the hero section styled three completely different ways. Save previews to .ship-page/previews/.

Read references/STYLE_PRESETS.md for curated preset definitions. Use presets as a FOUNDATION, then customize for the specific product.

Confirm via AskUserQuestion (header: "Pick Your Style"): "Which direction resonates?" Options: Style A / Style B / Style C / Mix elements (describe)

Step 2.3: Direct Preset Selection (Alternative)

If user already knows what they want or says "just make it dark/minimal/tech":

Read references/STYLE_PRESETS.md
Match to nearest preset
Skip preview generation, go to Phase 3

Phase 3: Generate Landing Page

Generate the full landing page using content from Phase 1 and style from Phase 2.

Structure Rules

Every landing page follows this architecture:

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Fonts, CSS variables, all styles inline -->
  <!-- No external dependencies except Google Fonts + Font Awesome CDN -->
</head>
<body>
  <nav><!-- Sticky nav with product name + CTA --></nav>
  
  <section class="hero"><!-- Above the fold: headline, subheadline, CTA --></section>
  <section class="features"><!-- Feature grid or showcase --></section>
  <section class="social-proof"><!-- Stats, testimonials, logos --></section>
  <!-- ... additional sections as needed ... -->
  <section class="cta-final"><!-- Final call to action --></section>
  <footer><!-- Links, copyright --></footer>

  <script>
    // Scroll animations, counters, interactions — all inline
  </script>
</body>
</html>

Mandatory Technical Requirements

Viewport Fitting — Each section should feel "full" but never overflow. Use min-height: 100vh for hero, proportional heights for others.
Responsive — Must work on mobile. Use clamp() for all font sizes, viewport-relative units for spacing.
Scroll Animations — Use IntersectionObserver for reveal-on-scroll. Elements should animate in as user scrolls.
Performance — CSS animations preferred over JS. will-change on animated elements. Debounce scroll handlers.
Accessible — Semantic HTML, sufficient contrast, prefers-reduced-motion media query for all animations.

Section Density Limits

Per section (to prevent overcrowding):

Hero: 1 headline (max 8 words), 1 subheadline (max 20 words), 1-2 CTAs, optional background effect
Features: Max 6 cards. Each card: icon + title (3-4 words) + description (max 15 words)
Stats/Metrics: Max 4 counters
Testimonials: Max 3 quotes
Pricing: Max 3 tiers
FAQ: Max 6 items (use accordion/collapse)

Too much content for one section? Split into two sections with a visual break between them.

CSS Architecture

:root {
  /* Typography — always use clamp() */
  --font-display: 'YOUR_CHOICE', sans-serif;
  --font-body: 'YOUR_CHOICE', sans-serif;
  --heading-size: clamp(2rem, 5vw, 4.5rem);
  --body-size: clamp(0.875rem, 1.5vw, 1.125rem);
  
  /* Colors — define full palette */
  --bg-primary: #...;
  --bg-secondary: #...;
  --text-primary: #...;
  --text-secondary: #...;
  --accent: #...;
  --accent-hover: #...;
  --cta-gradient: linear-gradient(...);
  
  /* Spacing */
  --section-padding: clamp(3rem, 8vw, 8rem);
  --content-width: min(90vw, 1200px);
  
  /* Animation */
  --transition-fast: 0.3s ease;
  --transition-smooth: 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Scroll reveal base class */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--transition-smooth), transform var(--transition-smooth);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

JavaScript Essentials

Always include these patterns:

// Scroll reveal with IntersectionObserver
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('visible');
    }
  });
}, { threshold: 0.1 });

document.querySelectorAll('.reveal').forEach(el => observer.observe(el));

// Animated counters (for stats sections)
function animateCounter(el, target, duration = 2000

ship-page