This Claude skill provides a comprehensive framework for designing high-converting Astro lead generation sites. It offers mobile-first UX patterns and reusable section templates—including heroes, testimonials, and CTAs—to streamline the creation of professional, accessible, and trust-focused landing pages while ensuring a clear visual hierarchy and optimized conversion flow.
Use Cases
Designing a high-converting hero section for a SaaS product using Astro with a focus on mobile-first responsiveness.
Structuring a logical page flow that strategically places trust signals like logos and testimonials before lead capture forms to increase conversion rates.
Implementing accessible and thumb-friendly navigation patterns for mobile marketing pages to reduce friction.
Creating comprehensive FAQ and 'How It Works' sections to handle user objections and build credibility during the page design process.
name
astro-ux
description
UX patterns and section templates for Astro lead generation sites. Hero, features, testimonials, CTAs, FAQ sections. Use for page section design.
Astro UX Skill
Purpose
Provides UX patterns and section templates for lead generation pages.
Core Rules
Mobile-first design — 375px base, scale up
Clear visual hierarchy — One primary CTA per viewport
Trust before ask — Social proof before form
Minimal friction — Short forms, clear labels
Accessible — Keyboard nav, focus states, contrast
Section Types
Conversion Sections
Section
Purpose
Key Elements
Hero
First impression + CTA
Headline, subhead, CTA, trust badge
CTA Banner
Mid-page conversion
Headline, button, urgency
Form Section
Lead capture
Form, benefits, trust
Final CTA
Last chance
Summary, strong CTA
Trust Sections
Section
Purpose
Key Elements
Testimonials
Social proof
Quote, name, photo, stars
Logos
Authority
Client/partner logos
Stats
Credibility
Numbers, context
Reviews
Third-party proof
Google/Trustpilot reviews
Content Sections
Section
Purpose
Key Elements
Features
Benefits
Icon, title, description
How It Works
Process
Numbered steps
FAQ
Objection handling
Questions, answers
About
Trust building
Story, team, values
Mobile Patterns
Sticky mobile CTA bar
Thumb-friendly buttons (44px min)
Collapsible navigation
Touch-friendly form inputs
Page Flow
Hero (with CTA)
↓
Trust Signal (logos/stats)
↓
Features/Benefits
↓
Social Proof (testimonials)
↓
How It Works
↓
CTA Banner
↓
FAQ
↓
Final CTA
↓
Footer
