Communitygithub.com

Biznomad/claude-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.

What is claude-skills?

claude-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.

Works with✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/Biznomad/claude-skills/tree/HEAD/landing-page-optimization

Ask in your favorite AI

Open a new chat with this agent skill pre-loaded.

Documentation

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 17 individual skills — each has its own dedicated page.

Biznomad/claude-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/claude-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/claude-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/claude-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/claude-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/claude-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/claude-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/claude-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/claude-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/claude-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/claude-skills

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

Biznomad/claude-skills

Generate cinematic film-style video prompts for Seedance 2.0 on Higgsfield. Use whenever the user wants cinematic, film-like, movie-quality, Hollywood-style, dramatic, or professional film-quality AI video. Triggers on: cinematic, film look, movie scene, dramatic lighting, depth of field, lens flare, anamorphic, letterbox, noir, epic, Steadicam, dolly, crane shot, or any cinematic video generation request. Always use this skill even if the user doesn't explicitly say "cinematic" but describes a film-like aesthetic.

Biznomad/claude-skills

为 Seedance 2.0(Higgsfield)生成电影级胶片风格视频提示词。在用户想要电影级、胶片感、电影质量、好莱坞风格、戏剧性或专业胶片质量的AI视频时使用。触发词:电影级、胶片感、电影场景、戏剧性打光、景深、镜头光晕、变形、信箱式、黑色电影、史诗、稳定摄像机、推车镜头、吊臂镜头或任何电影级视频生成请求。即使用户没有明确说"电影级"但描述了胶片美学,也要使用此技能。

Biznomad/claude-skills

Convert comic book panels, manga pages, webtoons, and illustrated storyboards into animated video using Seedance 2.0 on Higgsfield. Use whenever the user wants to animate comics, bring illustrations to life, convert manga to video, animate storyboards, or create motion from static sequential art. Triggers on: comic to video, manga animation, panel animation, storyboard to video, webtoon animation, comic book motion, sequential art, graphic novel animation, or any illustrate-to-animate request. Use even when user says "make this drawing move" or "animate this page.

Biznomad/claude-skills

Generate music video and beat-synced visual content prompts for Seedance 2.0 on Higgsfield. Use whenever the user wants to create a music video, lyric video, beat-synced visuals, performance video, concert visual, album art animation, or music-driven visual content. Triggers on: music video, lyric video, beat sync, music visualization, performance video, concert visual, album visual, song video, music clip, beat drop visual, rhythm sync, or any music-driven video request. Use even for "make visuals for my song" or "video for this track.

Biznomad/claude-skills

Build, redesign, and deploy websites across any stack — static HTML, Next.js, Astro, or Shopify Liquid themes. Handles design systems, brand-aware layouts, component architecture, and deployment pipelines (Netlify, Vercel, Shopify API). Use when asked to build a website, redesign a site, create a landing page, build a web app, create Shopify sections/templates, or deploy web projects. Triggers on requests like "build me a website", "redesign this page", "create a landing page", "build a Shopify theme", "deploy to Netlify".

Biznomad/claude-skills

Capture a website and create a HyperFrames video from it. Use when: (1) a user provides a URL and wants a video, (2) someone says "capture this site", "turn this into a video", "make a promo from my site", (3) the user wants a social ad, product tour, or any video based on an existing website, (4) the user shares a link and asks for any kind of video content. Even if the user just pastes a URL — this is the skill to use.

Related Skills