openclaudia/openclaudia-skills/write-landing

Name: write-landing
Author: openclaudia

Claude Code and agent skill by openclaudia/openclaudia-skills

Trust tier 3

community

Source check pending

Checking that the SKILL.md file is still in the repository.

Create high-converting landing page copy and structure. Use when the user says "landing page", "sales page", "create a landing page", "landing page copy", "conversion page", "lead gen page", "signup page", "product page copy", "hero section", "write landing page", or asks for marketing page copy with conversion goals.

Install

npx vskill@latest install openclaudia/openclaudia-skills/write-landing

SKILL.md

Write Landing Page Skill

You are an expert conversion copywriter and landing page strategist. Create complete landing page copy with wireframe structure, optimized for both conversions and SEO. Output is ready to implement in Next.js/React with Tailwind CSS.

Landing Page Process

Step 1: Gather the Brief

Before writing, understand:

Question	Why it matters
Product/Service: What are you selling?	Core messaging foundation
Target audience: Who is the ideal customer?	Voice, pain points, language
Primary goal: What action should visitors take?	CTA optimization
Traffic source: How will people arrive? (Ads, organic, email)	Message match
Price point: How much does it cost?	Objection handling depth
Key differentiator: Why you over competitors?	USP positioning
Proof points: Testimonials, case studies, metrics?	Social proof section
Existing brand voice: Formal, casual, technical?	Tone consistency

If the user doesn't provide all of these, ask for the critical ones (product, audience, goal) and make reasonable assumptions for the rest.

Step 2: Choose the Page Structure

Select the right framework based on the product type and traffic temperature:

Framework A: PAS (Problem-Agitation-Solution)

Best for: Cold traffic, awareness stage, complex problems

Hero (Problem statement)
  -> Agitate (Consequences of not solving)
  -> Solution (Your product)
  -> Features/Benefits
  -> Social Proof
  -> CTA

Framework B: AIDA (Attention-Interest-Desire-Action)

Best for: Warm traffic, known product category

Hero (Attention-grabbing headline)
  -> Interest (Key features and hook)
  -> Desire (Benefits, social proof, FOMO)
  -> Action (CTA with urgency)

Framework C: Before-After-Bridge

Best for: Transformation products (SaaS, courses, coaching)

Hero (Before: current painful state)
  -> After (Vision of success)
  -> Bridge (Your product is the bridge)
  -> How it works
  -> Proof
  -> CTA

Framework D: Feature-Benefit Grid

Best for: Technical products, SaaS, feature-rich tools

Hero (Bold promise)
  -> Feature-benefit grid
  -> How it works (3 steps)
  -> Integrations/Compatibility
  -> Pricing
  -> FAQ
  -> CTA

Step 3: Write Each Section

Section 1: Hero

The hero section has 5 seconds to hook the visitor. Every word must earn its place.

Headline formula (H1):

Formula	When to use	Example
`{End result} without {Pain point}`	When eliminating a known pain	"Build your website without writing code"
`{Action verb} your {metric} by {amount}`	When you have proven results	"Double your email open rates in 30 days"
`The {adjective} way to {desired outcome}`	When the method is the differentiator	"The fastest way to deploy full-stack apps"
`{Desired outcome} for {audience}`	When audience-specific	"Enterprise-grade security for startups"
`Stop {pain}. Start {benefit}.`	When the problem is acute	"Stop losing leads. Start closing deals."
`{Number} {people} use {product} to {outcome}`	When you have social proof scale	"50,000 marketers use Buffer to grow on social"

Headline rules:

Max 10 words (6-8 is ideal)
Specific > vague ("50% faster" > "blazing fast")
Benefit > feature ("Save 10 hours/week" > "AI-powered automation")
Include the audience or their goal

Subheadline (H2): Expand on the headline with specifics. Formula:

{Product} helps {audience} {achieve outcome} by {mechanism/method}. {Proof point or time frame}.

Example: "Acme helps SaaS teams automate their deployment pipeline with one-click CI/CD. Ship 10x faster from day one."

CTA Button:

Use first-person: "Start my free trial" > "Start your free trial"
Action-oriented: "Get started free" > "Submit" > "Sign up"
Add micro-copy below: "No credit card required. Free for 14 days."
Button color should contrast with background (high contrast = more clicks)

Supporting element (choose one):

Product screenshot or demo video
Key metric ("Trusted by 10,000+ companies")
Logo bar of notable customers
Short demo GIF

tsx

{/* Hero Section */}
<section className="relative bg-white pt-20 pb-16 sm:pt-24 sm:pb-20 lg:pt-32 lg:pb-28">
  <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <div className="mx-auto max-w-2xl text-center lg:max-w-4xl">
      {/* Eyebrow / Social proof badge */}
      <p className="text-sm font-semibold text-indigo-600">
        Trusted by 10,000+ teams
      </p>
      {/* H1 Headline */}
      <h1 className="mt-4 text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl lg:text-6xl">
        {headline}
      </h1>
      {/* Subheadline */}
      <p className="mt-6 text-lg leading-8 text-gray-600 sm:text-xl">
        {subheadline}
      </p>
      {/* CTA Group */}
      <div className="mt-10 flex flex-col items-center gap-4 sm:flex-row sm:justify-center">
        <a href="#" className="rounded-lg bg-indigo-600 px-8 py-4 text-base font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
          {primaryCTA}
        </a>
        <a href="#" className="text-base font-semibold text-gray-900 hover:text-gray-700">
          {secondaryCTA} <span aria-hidden="true">&rarr;</span>
        </a>
      </div>
      {/* Micro-copy */}
      <p className="mt-4 text-sm text-gray-500">
        No credit card required. Free 14-day trial.
      </p>
    </div>
    {/* Hero Image/Video */}
    <div className="mt-16 sm:mt-20">
      <div className="rounded-xl bg-gray-900/5 p-2 ring-1 ring-gray-900/10 lg:rounded-2xl">
        {/* Product screenshot or demo */}
      </div>
    </div>
  </div>
</section>

Section 2: Problem / Pain Points

Make the reader feel understood. Describe their current situation precisely.

Writing technique: Use the reader's own language. Mirror the words they use in reviews, support tickets, and forums.

tsx

<section className="bg-gray-50 py-16 sm:py-24">
  <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <div className="mx-auto max-w-2xl text-center">
      <h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
        {problem_headline}
      </h2>
      <p className="mt-4 text-lg text-gray-600">
        {problem_description}
      </p>
    </div>
    <div className="mt-12 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
      {/* Pain point cards */}
      {painPoints.map((pain) => (
        <div className="rounded-lg border border-red-100 bg-white p-6">
          <div className="text-red-500 text-2xl mb-3">{pain.icon}</div>
          <h3 className="text-lg font-semibold text-gray-900">{pain.title}</h3>
          <p className="mt-2 text-gray-600">{pain.description}</p>
        </div>
      ))}
    </div>
  </div>
</section>

Pain point formula:

Title: "{Frustrating situation}"
Description: "You {specific scenario}. But {consequence}. And {escalation}."

Example:

Title: "Deployment takes hours, not minutes"
Description: "You push code and wait. Build fails. Fix it. Wait again. By the time it's live, the bug report queue has doubled. And your weekend is gone."

Section 3: Solution / How It Works

Transition from pain to solution. Show the product as the bridge.

"How It Works" in 3 steps (always 3 - humans love triads):

tsx

<section className="bg-white py-16 sm:py-24">
  <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <div className="mx-auto max-w-2xl text-center">
      <h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
        How it works
      </h2>
      <p className="mt-4 text-lg text-gray-600">
        Get started in minutes, not months.
      </p>
    </div>
    <div className="mt-16 grid grid-cols-1 gap-12 lg:grid-cols-3">
      {steps.map((step, i) => (
        <div className="text-center">
          <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-indigo-100 text-indigo-600 font-bold text-xl">
            {i + 1}
          </div>
          <h3 className="mt-6 text-xl font-semibold text-gray-900">{step.title}</h3>
          <p className="mt-4 text-gray-600">{step.description}</p>
        </div>
      ))}
    </div>
  </div>
</section>

Step formula:

Step 1: "{Simple first action}" - Lower the barrier to entry
Step 2: "{Core value action}" - The product doing its thing
Step 3: "{Desired outcome}" - The result they care about

Example:

"Connect your repo" - Link your GitHub in one click
"Push your code" - Our AI handles builds, tests, and deployment
"Ship with confidence" - Go live in minutes with zero-downtime deploys

Section 4: Features & Benefits

Never list features alone. Always pair with the benefit (the "so what?").

Feature-Benefit formula:

Feature: {What it does}
Benefit: So you can {outcome the user cares about}

tsx

<section className="bg-white py-16 sm:py-24">
  <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <div className="mx-auto max-w-2xl text-center">
      <h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
        Everything you need to {desired outcome}
      </h2>
    </div>
    <div className="mt-16 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
      {features.map((feature) => (
        <div className="relative rounded-2xl border border-gray-200 p-8">
          <div className="text-indigo-600 mb-4">{feature.icon}</div>
          <h3 className="text-lg font-semibold text-gray-900">{feature.title}</h3>
          <p className="mt-2 text-gray-600">{feature.benefit}</p>
        </div>
      ))}
    </div>
  </div>
</section>

Arrange features by importance:

The feature that solves the #1 pain point (biggest, most prominent)
The feature that differentiates from competitors
Supporting features that round out the product
Nice-to-haves and integrations

Section 5: Social Proof

Social proof is the most persuasive element on the page. Layer multiple types:

Types of social proof (use 2-3):

Type	Impact Level	Example
Customer testimonials with photo + name + company	Highest	"Acme increased revenue 40% in 3 months" - Jane Doe, CEO at TechCo
Case study metrics	Highest	"From 2 deploys/week to 50 deploys/day"
Logo bar of customers	High	Well-known brand logos
Number of customers	High	"Join 50,000+ teams"
Star ratings / review scores	High	"4.8/5 on G2 (500+ reviews)"
Awards / certifications	Medium	"SOC 2 Certified", "G2 Leader 2025"
Media mentions	Medium	"As featured in TechCrunch, Forbes..."
Integration partners	Medium	"Works with Slack, GitHub, Jira..."

tsx

{/* Testimonial Section */}
<section className="bg-gray-50 py-16 sm:py-24">
  <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <div className="mx-auto max-w-2xl text-center">
      <h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
        Loved by teams worldwide
      </h2>
    </div>

This is the start of the file. Read the full SKILL.md on GitHub.

Security

Security scanPassed, 95 of 100Pattern checks on the skill's files.
Model reviewPassed

See the full security report

Quality evaluation

Task evaluationNot runNo evaluation yet. Run one in Skill Studio.

See evaluation results

Source

SKILL.md in the repositoryCheckingskills/write-landing/SKILL.md

Popularity

Repository stars: 426
Repository forks: 9
7-day trend score: 30

Stars and forks are for the whole GitHub repository, not this skill alone. Refreshed 24 Mar 2026, 7 months ago.

Works with

Any agent vskill installs to: 56 targets in all. These 39 have a page on this site.

Claude Code
Cursor
GitHub Copilot
Windsurf
Codex
Gemini CLI
Cline
Amp
Roo Code
Goose
Continue
Kilo Code
Junie
Trae
OpenHands
Qwen Code
AI Agent
Tabnine Chat
Sourcegraph Cody
Amazon Q
Firebase Genkit
Sweep
Devin
Phind
Mentat
Claude Desktop
Aider
GPT Pilot
Plandex
bolt.new
v0
Replit Agent
Anse
TypingMind
BetterChatGPT
LibreChat
Warp AI
Pieces
Fig AI

Embed badge

[![vskill VERIFIED](https://verified-skill.com/api/v1/skills/openclaudia/openclaudia-skills/write-landing/badge)](https://verified-skill.com/skills/openclaudia/openclaudia-skills/write-landing)

Something wrong with this skill or its page? Tell us.