--- name: landing description: Generate a responsive tool landing page (hero, demo, features, CTA, footer) from a tool name and description. Use when launching a new tool or building a marketing page. user-invocable: true allowed-tools: Read, Write, Edit, Bash, Glob argument-hint: [tool-name-and-description] --- # Landing Page Generator Generate a complete, responsive landing page for a tool or app. **Argument**: `$ARGUMENTS` is a tool name + description (e.g., "Podcast Packager — turn a podcast episode into YouTube-ready titles and thumbnails"). If not provided, ask. ## Process ### 1. Gather the essentials Ask for (or infer from args): - **Tool name** - **One-line tagline** (6-10 words, what it does + who for) - **3-5 key features** (one sentence each) - **Primary CTA** (e.g., "Try it free", "Sign up", "Join waitlist") - **Demo media** — video URL, screenshot, or animated GIF (optional) - **Brand colors** — or ask if starting fresh - **Domain** — where this will live ### 2. Choose the stack Based on where it's going: - **Static HTML** — single page, no framework (fastest, most portable) - **Next.js (App Router)** — if the tool already uses Next.js - **Vite + React** — if the project is Vite-based Default to **static HTML** unless the user specifies otherwise. ### 3. Generate the page **Page structure (in order):** 1. **Nav** — logo + 2-4 links (Features, Pricing, Sign in) 2. **Hero** — headline + tagline + CTA button + demo visual 3. **Social proof** — logos, testimonials, or user count (optional) 4. **Features** — 3-column grid or alternating left/right layout 5. **How it works** — 3 steps with icons or numbers 6. **FAQ** — 4-6 common questions (collapsible) 7. **Final CTA** — one big button 8. **Footer** — links, social, legal **HTML template (static):** ```html [Tool Name] — [Tagline]

[Headline]

[Tagline — one sentence, who it's for and what it does]

[Primary CTA]

Everything you need, nothing you don't.

How it works

Questions

[Final CTA headline]

[Subtext]

[CTA button]
``` ### 4. Fill in the content Replace every placeholder with real content from the user's description: - **Headline**: rewrite the tagline as a stronger, benefit-focused headline - **Features**: one emoji icon + 2-4 word title + one sentence each - **Steps**: "1. Paste URL", "2. We analyze", "3. Copy results" — make them verb-driven - **FAQ**: pre-empt real objections (cost, data, setup, support) ### 5. Add referenced assets Remind the user to add: - `og-image.png` (use `/og-image` skill) - `favicon.ico` + `favicon.svg` + `apple-touch-icon.png` (use `/favicon` skill) - A demo image/video/GIF in the hero ### 6. Next.js variant If the project is Next.js App Router, adapt: - Place at `src/app/page.tsx` - Convert inline styles to Tailwind classes (if Tailwind is set up) or a CSS module - Use `metadata` export in `layout.tsx` instead of HTML head tags - Use `next/image` for the hero media and feature icons ## Design principles - **Text-wrap: balance** on all headlines - **Clamp() for fluid typography** — hero headline should shrink gracefully on mobile - **Max width ~1120px** — wider feels awkward on desktop - **Generous vertical rhythm** — 80px between sections on desktop, 60px on mobile - **One accent color** — don't introduce new colors in the design - **Rounded corners consistent** — use the --radius token everywhere ## Rules - Don't add tracking scripts, chat widgets, or analytics unless asked - Check the hero at 375px wide before finishing