Ship Page

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

1. Viewport Fitting — Each section should feel "full" but never overflow. Use min-height: 100vh for hero, proportional heights for others.
2. Responsive — Must work on mobile. Use clamp() for all font sizes, viewport-relative units for spacing.
3. Scroll Animations — Use IntersectionObserver for reveal-on-scroll. Elements should animate in as user scrolls.
4. Performance — CSS animations preferred over JS. will-change on animated elements. Debounce scroll handlers.
5. 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) { ... }

// Smooth scroll for nav links
document.querySelectorAll('a[href^="#"]').forEach(anchor => { ... });

Read references/SECTION_LIBRARY.md for complete section templates with HTML, CSS, and JS patterns for each section type.

Anti-AI-Slop Checklist

Before generating, verify:

• Fonts are NOT Inter, Roboto, Arial, or system defaults
• Color scheme is NOT purple-gradient-on-white
• Hero doesn't use the word "Revolutionize" or "Supercharge"
• CTA buttons have hover animations, not just color change
• Background has texture/depth — NOT flat solid color
• At least one unexpected design choice (asymmetric layout, bold typography, creative section divider)

Delivery

1. Save the HTML file with a descriptive name: {product-name}-landing.html
2. Open in browser: open {product-name}-landing.html
3. Present to user and ask for feedback

Phase 4: Iteration

After initial generation, ask via AskUserQuestion (header: "Feedback"): "How does it look?" Options: Ship it! / Adjust colors-fonts / Change layout / Add-remove sections / Start over with new style

For modifications, follow these rules:

• Adding content: Check section density limits first. If exceeded, split sections.
• Changing style: Update CSS variables, don't rewrite structure.
• Adding sections: Read references/SECTION_LIBRARY.md for the section template, insert in logical order.
• Removing sections: Delete cleanly, check that no JS references break.

References (Progressive Disclosure)

This skill uses progressive disclosure — load reference files only when needed: