Astro UX Skill

Purpose

Provides UX patterns and section templates for lead generation pages.

Core Rules

1. Mobile-first design — 375px base, scale up
2. Clear visual hierarchy — One primary CTA per viewport
3. Trust before ask — Social proof before form
4. Minimal friction — Short forms, clear labels
5. 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

Related Skills

• section-skeleton — Component structure
• page-structure — Section ordering
• astro-components — UI components

Definition of Done

• Mobile-first responsive
• Clear CTA hierarchy
• Trust elements before forms
• Accessible (a11y checked)
• Fast loading (no heavy assets in viewport)