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.