| 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
Related Skills
section-skeleton — Component structurepage-structure — Section orderingastro-components — UI components
Definition of Done
