Communitygithub.com

Biznomad/agent-skills

Optimize landing pages for higher conversion rates using proven frameworks and design patterns. Use when designing, reviewing, or improving landing pages, hero sections, pricing pages, CTAs, or when the user asks about conversion optimization.

agent-skills とは?

agent-skills is a Claude Code agent skill that optimize landing pages for higher conversion rates using proven frameworks and design patterns. Use when designing, reviewing, or improving landing pages, hero sections, pricing pages, CTAs, or when the user asks about conversion optimization.

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/Biznomad/agent-skills/tree/HEAD/landing-page-optimization

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

Landing Page Optimization

Research-backed insights from analyzing 1000+ landing pages across SaaS, Tech, Web3, finance, and health industries.

Core Principle

Landing pages are 24/7 sales teams. Users decide in 3 seconds whether to stay. Focus on clarity and immediate value.


1. Hero Section (First 3 Seconds)

The hero section determines if visitors stay. Vague heroes drop conversion rates by 40-60%.

Requirements

ElementGuideline
Value PropAnswer: What is it? Who is it for? Why care?
HeadlineBenefit-focused, grabs emotion
SubheadlineAdds proof or specificity
VisualsProduct demos, illustrations, or pain-point visuals. No stock photos.
CTAsDual: one low-commitment ("Get Started in 3 Minutes"), one high-value ("Book a Demo")

Avoid

  • Buzzwords: "AI-powered," "revolutionary," "next-gen," "seamless," "disruptive"
  • Generic imagery (abstract orbs, random stock photos)
  • Single vague CTA

Example Transformation

Before: "Innovative AI Platform" + bland orb visual
After:  "The Only Platform for Continuous Offensive Pentests - 
        Catch SOC2 Violations Before Hackers Do" + vulnerability icons

Result: 2x time-on-page, 35% higher click-through.


2. Copywriting Frameworks

Good copy elevates mediocre design. Bad copy sinks great design. Every word must be scannable, emotional, and benefit-driven.

Primary Frameworks

PAS (Problem-Agitate-Solution) — 25-40% conversion lift observed

  1. State the pain: "Tired of low conversion rates?"
  2. Agitate: "You're losing 78% of visitors in seconds."
  3. Solve: "Our templates convert 3x better."

AIDA (Attention-Interest-Desire-Action)

  1. Hook with attention-grabbing statement
  2. Build interest with stories/relevance
  3. Create desire with clear benefits
  4. End with specific CTA

FAB (Feature-Advantage-Benefit)

  • Feature: "AI Chatbot"
  • Advantage: "24/7 Support"
  • Benefit: "Save $10k/year on customer service hires"

Before-After-Bridge

  • Before: The struggle
  • After: The success
  • Bridge: Your product

Copy Rules

  • Be specific: "Boost sales by 47%" > "Increase revenue"
  • Use power words: "Unlock," "Transform," "Dominate"
  • Short sentences. Active voice.
  • Embed social proof: "Join 500+ founders who doubled leads"

3. Design Patterns

Users want simplicity. Complex designs see 70% bounce rates; minimal designs see 30%.

What Works

PatternUse Case
MinimalismClean layouts, dominant color scheme, purposeful whitespace
Bento GridsFeatures, testimonials. Add flip cards for interactivity
iOS-InspiredRounded corners, subtle shadows, playful pricing cards
One-PageStartups, quick builds, high conversion

What Fails

  • Scroll hijacking
  • Excessive animations
  • Load times > 2s
  • Purple overloads or random effects
  • Desktop-first design (60% traffic is mobile)

Target Metrics

  • Load time: < 1s
  • Bounce rate: < 35%
  • Linear, predictable scroll flow

4. Social Proof & Trust

Only 22% of businesses are satisfied with their conversion rates. The difference is often trust signals.

Effective Proof Elements

TypeImplementation
Testimonials 2.0Highlight key phrases, pop-out profiles, niche-specific ("As a SaaS founder...")
Logos + Metrics"Trusted by 10k+ users" with recognizable client logos
Case StudiesShort, benefit-focused: "From 10% to 45% conversion in 2 weeks"
Urgency BuildersCountdowns, limited spots, "Join 500 waiting"

Strong social proof can increase conversions 2-3x.


5. Pricing Page Design

Pricing is users' #1 question. Hidden pricing loses visitors.

Structure (3 Tiers Max)

TierPricePositioning
Starter/Free$0-29/moEntry point, basic features
Pro (highlight)$49-149/moMost Popular badge, best value
EnterpriseCustomContact Us, dedicated support

Best Practices

  • Show benefits, not just features
  • Use monthly/annual toggle (annual shows savings)
  • Better CTAs: "Get Started" > "Buy Now"
  • Skip money-back guarantees if confident; focus on results

This structure has lifted upsells by 30%.


6. Conversion Optimization Checklist

99% of pages have too much content. Users have 8-second attention spans.

Simplification Rules

  • Remove navigation menus on landing pages
  • Every element points to one conversion goal
  • No distracting secondary links or options
  • Above-fold content answers: What? Who? Why?

Testing Requirements

  • A/B test headlines (biggest impact)
  • A/B test CTAs (wording, color, placement)
  • A/B test visuals (product vs lifestyle vs abstract)
  • Mobile testing (60% of traffic)

Urgency Elements

  • Countdown timers (use sparingly)
  • Limited availability messaging
  • Bonus offers with deadlines

Post-simplification results: 50-100% conversion rate improvements.


Quick Reference: Anti-Patterns

Don'tWhy
"Innovative AI Platform"Says nothing specific
Stock photos of smiling peopleGeneric, untrustworthy
Hidden pricing#1 user frustration
Wall of textUsers scan, not read
Multiple competing CTAsDecision paralysis
Slow load timesEach second loses 7% conversions
Mobile as afterthoughtMajority of traffic is mobile

Framework Selection Guide

GoalFramework
Address specific pain pointsPAS
Tell a transformation storyBefore-After-Bridge
Explain complex featuresFAB
Full funnel narrativeAIDA
Qualify and convertQUEST

For detailed examples and case studies, see references/examples.md.

Individual skills in this repo

This repo contains 20 individual skills — each has its own dedicated page.

Biznomad/agent-skills

Landing page quality assessment for paid advertising campaigns. Evaluates message match, page speed, mobile experience, trust signals, form optimization, and conversion rate potential. Use when user says "landing page", "post-click experience", "landing page audit", "conversion rate", or "landing page optimization".

Biznomad/agent-skills

TikTok Ads deep analysis covering creative quality, tracking, bidding, campaign structure, and TikTok Shop. Evaluates 25 checks with emphasis on creative-first strategy, safe zone compliance, and Smart+ campaigns. Use when user says "TikTok Ads", "TikTok marketing", "TikTok Shop", "Spark Ads", "Smart+", or "TikTok campaign".

Biznomad/agent-skills

YouTube Ads specific analysis covering campaign types, creative quality, audience targeting, and measurement. Evaluates video ad performance across skippable, non-skippable, bumper, Shorts, and Demand Gen formats. Use when user says "YouTube Ads", "video ads", "pre-roll", "bumper ads", "YouTube campaign", or "Shorts ads".

Biznomad/agent-skills

Help users get promoted at work. Use when someone is preparing for a promotion conversation, building their case for advancement, trying to understand what's blocking their promotion, or figuring out how to get to the next level in their career.

Biznomad/agent-skills

CSS animation adapter patterns for HyperFrames. Use when authoring CSS keyframes, animation-delay based timing, animation-fill-mode, animation-play-state, or CSS-only motion that HyperFrames must seek deterministically during preview and rendering.

Biznomad/agent-skills

Video and audio processing with FFmpeg. Use for format conversion, resizing, compression, audio extraction, and preparing assets for Remotion. Triggers include converting GIF to MP4, resizing video, extracting audio, compressing files, or any media transformation task.

Biznomad/agent-skills

Read-only queue dashboard for workspace-aware ship. Shows which VERSION slots are currently claimed by open PRs, which sibling Conductor workspaces have WIP work likely to ship soon, and what slot /ship would pick next. No mutations — just a snapshot. Use when asked to "landing report", "what's in the queue", "show me open PRs", or "which version do I claim next". (gstack)

Biznomad/agent-skills

HyperFrames CLI dev loop — `npx hyperframes` for scaffolding (init), validation (lint, inspect), preview, render, and environment troubleshooting (doctor, browser, info, upgrade). Use when running any of these commands or troubleshooting the HyperFrames build/render environment. For asset preprocessing commands (`tts`, `transcribe`, `remove-background`), invoke the `hyperframes-media` skill instead.

Biznomad/agent-skills

Asset preprocessing for HyperFrames compositions — text-to-speech narration (Kokoro), audio/video transcription (Whisper), and background removal for transparent overlays (u2net). Use when generating voiceover from text, transcribing speech for captions, removing the background from a video or image to use as a transparent overlay, choosing a TTS voice or whisper model, or chaining these (TTS → transcribe → captions). Each command downloads its own model on first run.

Biznomad/agent-skills

Install and wire registry blocks and components into HyperFrames compositions. Use when running hyperframes add, installing a block or component, wiring an installed item into index.html, or working with hyperframes.json. Covers the add command, install locations, block sub-composition wiring, component snippet merging, and registry discovery.

Biznomad/agent-skills

Create video compositions, animations, title cards, overlays, captions, voiceovers, audio-reactive visuals, and scene transitions in HyperFrames HTML. Use when asked to build any HTML-based video content, add captions or subtitles synced to audio, generate text-to-speech narration, create audio-reactive animation (beat sync, glow, pulse driven by music), add animated text highlighting (marker sweeps, hand-drawn circles, burst lines, scribble, sketchout), or add transitions between scenes (crossfades, wipes, reveals, shader transitions). Covers composition authoring, timing, media, and the full video production workflow. For dev-loop CLI commands (init, lint, inspect, preview, render) see the hyperframes-cli skill; for asset preprocessing commands (tts, transcribe, remove-background) see the hyperframes-media skill.

Biznomad/agent-skills

Still-to-video conversion guide: model selection, motion prompting, and camera movement. Covers Wan 2.5 i2v, Seedance, Fabric, Grok Video with when to use each. Use for: animating images, creating video from stills, adding motion, product animations. Triggers: image to video, i2v, animate image, still to video, add motion to image, image animation, photo to video, animate still, wan i2v, image2video, bring image to life, animate photo, motion from image

Biznomad/agent-skills

>- The Landing Page Audit skill performs comprehensive evaluations of post-click experiences, combining technical performance analysis with conversion rate optimization (CRO) assessment.

Biznomad/agent-skills

Write high-converting landing page copy using proven frameworks like PAS (Problem-Agitate-Solution), AIDA, and StoryBrand. Creates headlines, value propositions, CTAs, and full page sections optimized for conversion. Use when users need landing page copy, sales page content, or marketing website text.

Biznomad/agent-skills

Read-only queue dashboard for workspace-aware ship. (gstack)

Biznomad/agent-skills

Building promotion cases, brag documents, tracking wins, and self-advocacy for career advancement. Use when preparing for promotions, documenting accomplishments, or building your case for advancement.

Biznomad/agent-skills

Best practices for Remotion - Video creation in React

Biznomad/agent-skills

Translate an existing Remotion (React-based) video composition into a HyperFrames HTML composition. Use ONLY when the user explicitly asks to port, convert, migrate, translate, or rewrite a Remotion composition as HyperFrames (e.g. "port my Remotion project to HyperFrames"). Do NOT use when (a) authoring a NEW HyperFrames composition (even if A/B-testing a Remotion video); (b) Remotion is mentioned in passing; (c) Remotion code is shared as reference, not for translation; (d) the user wants "the same video as my Remotion one" without explicitly asking to migrate the source — treat as a fresh HyperFrames build. When in doubt, default to the `hyperframes` skill. Detects unsupported patterns (useState, useEffect side effects, async calculateMetadata, third-party React component libraries, `@remotion/lambda`) and recommends the runtime interop escape hatch instead of a lossy translation.

Biznomad/agent-skills

Produce programmable videos with Remotion using scene planning, asset orchestration, and validation gates for automated, brand-consistent video content.

Biznomad/agent-skills

Reviews animation and motion code against a high craft bar derived from Emil Kowalski's design engineering philosophy. Default to flagging; approval is earned.

関連スキル