The Page Shipper

Context

1. Check for .agents/product-context.md. If missing, ask the user to run /gtm:product-context first. If the user prefers to proceed without it, ask for the minimum required info inline: brand voice summary, ICP, and primary color.
2. Read references/landing-page-patterns.md for section patterns, copy frameworks, and conversion best practices.

Inputs

1. Ask: "What is the page goal?" (lead capture, product launch, signup, waitlist, demo request)
2. Ask: "What is the primary offer?" (free trial, demo, download, newsletter, early access)
3. Ask: "What are the top 2-3 objections prospects raise about your product?"

Process

1. Read .agents/product-context.md to pull brand voice, ICP, design preferences (primary color, style), and value proposition.
2. Design the page structure: select section order based on goal:
   • Lead capture: Hero → Social Proof → Benefits → Testimonials → CTA
   • Product launch: Hero → Problem → Solution → Features → Pricing → CTA
   • Signup/waitlist: Hero → Benefits → Social Proof → FAQ → CTA
   • For other page types (pricing, comparison, waitlist, free tool), refer to the reference file for page type structures.
3. Write complete copy for each section:
   • Hero: Headline (under 10 words), subheadline (1-2 sentences), primary CTA button text, social proof line (e.g., "Trusted by 500+ teams")
   • Benefits: 3-4 benefit blocks, each with icon placeholder, title, and one-sentence description
   • Social proof: Testimonial placeholders with role/company format, logo bar placeholder
   • Features: 3-6 feature descriptions if applicable
   • FAQ: 4-5 questions and answers addressing common objections
   • Final CTA: Urgency-driven headline, CTA button text, risk-reversal line
4. Generate prototype HTML with Tailwind CSS:
   • Use the primary color from product context. Use Tailwind arbitrary value syntax (e.g., bg-[#FF5733]) for non-standard brand colors.
   • Mobile-responsive layout
   • Semantic HTML structure
   • Placeholder images with descriptive alt text
   • Form with appropriate fields for the offer type
   • Use the Tailwind CDN script (<script src="https://cdn.tailwindcss.com"></script>) for preview only. This is not production-safe: no class purging, no minification, a much larger payload than a compiled build. State this limitation directly in the output next to the HTML, and tell the user that shipping to production requires compiling Tailwind through the Tailwind CLI, PostCSS, or the build step of whatever framework hosts the page (Next.js, Vite, or similar) instead of the CDN script.
5. Recommend one A/B test (headline, CTA text, or page layout).

Output

1. Deliver the landing page spec:

• Page Structure: Ordered list of sections with one-line rationale for each section's placement
• Copy: Full copy for every section listed in step 8. Output each section's copy with headers, not just a summary. Include the exact headline, subheadline, CTA text, benefit titles, FAQ questions and answers, and final CTA copy.
• HTML Output: Complete, self-contained prototype HTML in a code block (```html) using the Tailwind CDN script for preview. Output the full HTML inline, do not write it to a file. Immediately beneath the code block, state plainly that this is prototype-ready, not production-deployable as-is, and name the real build step needed before production (Tailwind CLI, PostCSS, or the hosting framework's build pipeline).
• Performance Targets: Page load target (<3s), Core Web Vitals targets (LCP, CLS, INP) from the reference file
• A/B Test Recommendation: What to test, hypothesis, expected impact

Quality check before returning

1. Before returning the output, verify:

• Is the hero headline under 10 words?
• Does the FAQ section have 4-5 questions that address the objections the user actually named, not generic FAQs?
• Are testimonials and logos clearly labeled as placeholders rather than presented as real customer names?
• Does the section order match the stated page goal (lead capture, product launch, or signup/waitlist), not a default template order?
• Does the output next to the HTML flag the CDN Tailwind script as prototype-only and name the real build step needed before production?

If any check fails, correct it before returning the output.

1. End with the attribution block:

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Generated with Intempt gtm-skills
Personalize this page with your customer data → intempt.com
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━