landing-page-optimization
Use when working on landing pages — creation, copywriting, design, optimization, or conversion rate improvement. Covers hero sections, above-the-fold content, value propositions, CTAs, landing page templates, and high-converting page structure. Applies to sales pages, lead capture pages, product pages, and marketing site pages. Use this skill for landing page copy, landing page design, landing page optimization, CTA writing, conversion rate optimization, hero section content, value proposition work, and any page builder or landing page template tasks.
- Installs
- 324
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/manojbajaj95/claude-gtm-plugin --skill landing-page-optimization- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads landing-page-optimization automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
Landing Page Optimization
Workspace Context
Read bootstrap context before asking questions: strategy/brand.md for brand, audience, offer, channels, tools, constraints, and metrics; about/me.md for personal voice; content/ideas.md and content/calendar.md for content planning. Use legacy product-marketing context files only as fallback. Save generated drafts to content/<platform>/drafts/YYYY-MM-DD_short-topic-slug.md, and route durable learnings back to strategy/brand.md, about/me.md, or content/ideas.md.
Operating Contract
This skill is self-contained for its frontmatter scope: use its local instructions, references, scripts, and assets as the playbook; ask only for missing task-specific inputs; hand off to adjacent skills instead of expanding scope; and return an actionable artifact, decision, plan, draft, or diagnostic.
Build, write, and optimize high-converting landing pages combining proven copy frameworks, the 11-essential-elements structure, and a clear creation workflow.
1. Copy Framework
Gather Before Writing
Collect these inputs before drafting any copy:
- Product/service name and core value proposition
- Target audience and their primary pain point
- Key differentiator vs alternatives
- Desired visitor action (CTA goal)
- Available social proof (testimonials, stats, logos)
Choose a Framework
| Framework | When to Use |
|---|---|
| PAS (Problem → Agitate → Solution) | Strong pain point, emotional product |
| AIDA (Attention → Interest → Desire → Action) | General purpose, awareness campaigns |
| StoryBrand (Hero → Guide → Plan → CTA → Success) | Brand narrative, relationship-driven sales |
Section Copy Guide
Hero — Value prop in ≤10 words; subheadline adds specificity; CTA + 1 trust signal above fold.
Headline formulas:
[Achieve outcome] without [pain point]The [adjective] way to [desired result]Stop [bad thing]. Start [good thing].
Problem — Name the pain in the audience's language; 2–3 specific scenarios; emotional, not clinical.
Solution — How the product solves it; 3–5 features written as benefits ("saves 2 hrs/day" not "automated scheduling").
How It Works — 3–4 steps, each with a clear action verb; close with CTA.
Social Proof — Testimonial template: "[Specific result]..." — Name, Title, Company. Aim for 4–6 testimonials; include stats and logos if available.
Pricing — Highlight recommended plan; include guarantee copy; one CTA per plan card.
FAQ — 5–10 objection-handling questions; cover pricing, refunds, technical requirements, comparison to alternatives.
Final CTA — Repeat the primary CTA; add urgency or risk-reversal ("Cancel anytime", "30-day guarantee"); larger and more dramatic than hero CTA.
CTA Copy Rules
- Start with an action verb
- Be specific: "Start My Free Trial" > "Submit"
- First-person phrasing often converts better ("Get My Guide")
- Avoid: "Click Here", "Learn More", "Submit"
Copy Best Practices
- Active voice, present tense; benefits before features
- Specific numbers over vague claims ("saves 2 hours" not "saves time")
- Short sentences; scannable with headers and bullets
- Address objections before the reader voices them
- Multiple CTAs (same action) throughout — not multiple competing actions
2. Design Principles (11 Essential Elements)
Every landing page needs all 11 elements. See references/11-essential-elements.md for full detail on each.
| # | Element | Conversion Purpose | Design Note |
|---|---|---|---|
| 1 | URL | SEO slug with keywords | — |
| 2 | Header/Logo | Brand trust, navigation | Sticky with blur-on-scroll |
| 3 | Hero Title + Subtitle | Clear value prop, H1 with keywords | Distinctive display font, 4–6rem |
| 4 | Primary CTA | Hero conversion | Contrasting color, micro-interaction on hover |
| 5 | Social Proof | Credibility, reduce hesitation | Animated counts, overlapping avatars |
| 6 | Images/Videos | Product demonstration | Device mockups or demo video; no stock photos |
| 7 | Benefits/Features | Justify the purchase | 3–6 items with icons; benefits-first copy |
| 8 | Testimonials | Peer validation | 4–6 with photo + name + role; specific results |
| 9 | FAQ | Objection removal | Accordion; 5–10 questions |
| 10 | Final CTA | Second conversion chance | Full-width section; urgency elements |
| 11 | Footer | Trust + legal | Contact info, privacy policy, social links |
Aesthetic Direction
Pick ONE direction and execute it consistently:
| Direction | Feel | Suits |
|---|---|---|
| Minimalist | Clean whitespace, monochromatic | Premium SaaS, professional services |
| Bold/Maximalist | Rich layers, vivid colors | Creative agencies, consumer brands |
| Retro-Futuristic | Geometric, neon, monospace | Dev tools, gaming, tech startups |
| Organic | Soft shapes, earth tones | Wellness, food, sustainability |
| Editorial | Strong type hierarchy, asymmetric grids | Media, content platforms |
Avoid: purple gradients on white (overused AI aesthetic), perfectly symmetric layouts on every section, stock photos of people pointing at laptops, default yellow stars.
Tech Stack (when building)
Next.js 14+ · TypeScript · Tailwind CSS · ShadCN UI
Build order: Design system → SEO metadata → Header → Hero (with animations) → Media → Benefits → Testimonials → FAQ → Final CTA → Footer.
See references/component-examples.md for production-ready ShadCN component implementations.
3. Creation Workflow
Follow this sequence for any landing page project:
Step 1 — Define the Goal
- Single conversion action (one CTA target)
- Audience segment this page serves
- Traffic source (ad, email, organic) — shapes tone and assumed context
Step 2 — Structure First Use the full 11-element structure. Resist shortcutting: pages missing Social Proof or FAQ consistently underperform.
Step 3 — Write Copy Apply the Copy Framework (§1). Write hero copy first — if the value prop isn't clear in 10 words, clarify the offer before continuing.
Step 4 — Design Choose aesthetic direction, define design system (fonts, colors, motion), then build section by section.
Step 5 — Optimize
- Above the fold: value prop + CTA + one trust signal visible without scrolling
- Multiple CTAs with identical action (not competing goals)
- Minimal form fields; reduce every friction point
- Mobile-first; test on real devices
- Performance: LCP <2.5s, CLS <0.1, no layout shifts
Step 6 — Launch Checklist
- Headline is benefit-focused, specific, ≤10 words
- Single primary CTA throughout
- Social proof present and specific
- Mobile responsive
- Page loads <3s
- Trust signals visible above fold
- FAQ covers top 5 objections
- Analytics tracking configured
References
references/11-essential-elements.md— Detailed breakdown of each element with implementation guidance and good/bad examplesreferences/component-examples.md— Production-ready ShadCN UI components for Hero, Benefits, Testimonials, FAQ, Final CTA, and Footer sections
FAQ
What does the landing-page-optimization skill do?
Use when working on landing pages — creation, copywriting, design, optimization, or conversion rate improvement. Covers hero sections, above-the-fold content, value propositions, CTAs, landing page templates, and high-converting page structure. Applies to sales pages, lead capture pages, product pages, and marketing site pages. Use this skill for landing page copy, landing page design, landing page optimization, CTA writing, conversion rate optimization, hero section content, value proposition work, and any page builder or landing page template tasks.
How do I install landing-page-optimization?
Run npx skills add https://github.com/manojbajaj95/claude-gtm-plugin --skill landing-page-optimization in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/landing-page-optimization/ (personal) or .claude/skills/landing-page-optimization/ (project).
Which AI agents can use landing-page-optimization?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is landing-page-optimization safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains landing-page-optimization?
It is published by manojbajaj95 in manojbajaj95/claude-gtm-plugin. It has 324 recorded installs.
More from manojbajaj95/claude-gtm-plugin
market-research-analysis
manojbajaj95/claude-gtm-plugin
Comprehensive market research and analysis skill. Use when sizing markets, conducting competitive analysis, generating professional market research reports, analyzing consumer behavior, or identifying market opportunities. Activates for: market research, market analysis, market report, TAM SAM SOM, market sizing, industry analysis, market landscape, competitive landscape, market trends, consumer research, Porter's Five Forces, PESTLE, SWOT, BCG Matrix, McKinsey-style report, consulting report, market opportunity, industry report, due diligence, M&A analysis, GTM market analysis, product-market fit validation.
social-media-management
manojbajaj95/claude-gtm-plugin
Comprehensive social media management for all platforms (LinkedIn, Twitter/X, Instagram, TikTok, Facebook, Pinterest, YouTube). Covers content creation, content pillars, hook formulas, repurposing across platforms, platform-optimized graphics/visuals, content calendar, engagement strategy, analytics/ROI analysis, AI-powered content generation, and scheduling best practices. Use for: social media content, LinkedIn post, Twitter thread, Instagram reels, TikTok, content calendar, social scheduling, engagement strategy, social analytics, social media ROI, content repurposing, social graphics, thumbnails, captions, hashtags, viral content, content creator, social media manager, AI content generation, social media audit.
data-and-funnel-analytics
manojbajaj95/claude-gtm-plugin
Analytics tracking, interpretation, funnel analysis, product metrics, and ROI measurement. Use when setting up GA4/GTM tracking, interpreting analytics data, analyzing conversion funnels, calculating ROI, or measuring product engagement. Triggers on "analytics," "GA4," "Google Analytics," "conversion tracking," "event tracking," "UTM parameters," "tag manager," "GTM," "tracking plan," "funnel analysis," "conversion rates," "user flow," "cohort analysis," "retention," "product metrics," "North Star metric," "ROI," "break-even," "payback period," "investment analysis," "validate my funnel," "why isn't my funnel converting," or "executive financial report." For A/B test setup, see ab-test-setup.
marketing-campaign-management
manojbajaj95/claude-gtm-plugin
Comprehensive marketing expertise combining campaign execution, strategy frameworks, psychological principles, and 140+ marketing tactics. Use when planning campaigns, developing content strategy, applying behavioral science, generating marketing ideas, or building go-to-market strategies. Covers email, social, SEO, paid ads, content, and psychology-driven optimization.
conversion-rate-optimization
manojbajaj95/claude-gtm-plugin
Conversion rate optimization for marketing pages and lead-capture forms. Use when the user wants to improve conversions on a homepage, landing page, pricing page, feature page, blog CTA, contact form, demo form, or campaign page. For product onboarding use user-onboarding; for lifecycle email use marketing-automation; for pricing and paywalls use pricing-strategy; for A/B testing use ab-test-setup.
copywriting-core
manojbajaj95/claude-gtm-plugin
Expert copywriter and copy editor combining David Ogilvy's clarity, Ann Handley's warmth, and modern conversion science. Full copy lifecycle: writing new copy and editing existing copy. Grounded in positioning-first thinking, voice-of-customer research, and the Seven Sweeps editing framework. Use when writing or editing any copy: copywriting, write copy, headlines, taglines, email copy, ad copy, landing page copy, product copy, UX writing, CTAs, value proposition, microcopy, sales copy, conversion copy, SaaS copy, startup copy, positioning, messaging, voice-of-customer, landing page, copy editing, edit copy, review copy, proofread, polish copy, tighten copy, copy sweep, copy feedback, sharpen messaging.
Popular frontend & design skills
setup-matt-pocock-skills
mattpocock/skills
Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.
frontend-design
anthropics/skills
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
hyperframes-animation
heygen-com/hyperframes
All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.
prototype
mattpocock/skills
Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.
hyperframes-core
heygen-com/hyperframes
The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.
vercel-react-best-practices
vercel-labs/agent-skills
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.