astro-ux

majiayu000's avatarfrom majiayu000

UX patterns and section templates for Astro lead generation sites. Hero, features, testimonials, CTAs, FAQ sections. Use for page section design.

⭐5stars🔀1forks📁View on GitHub🕐Updated Jan 11, 2026
[Ads and Landing Pages]

When & Why to Use This Skill

This Claude skill provides high-conversion UX patterns and section templates specifically optimized for Astro-based lead generation websites. It streamlines the design process by offering pre-defined structures for Hero sections, social proof, and conversion-focused CTAs, all while adhering to mobile-first and accessibility best practices to maximize user engagement and lead capture.

Use Cases

  • Designing high-converting landing pages for SaaS or service-based businesses using the Astro framework to ensure fast loading and SEO performance.
  • Building mobile-responsive lead capture sites with optimized touch-friendly inputs, sticky CTA bars, and clear visual hierarchies.
  • Structuring page flows that strategically place trust signals like testimonials and partner logos before lead generation forms to reduce friction.
  • Rapidly prototyping accessible UI components such as feature grids, FAQ sections, and multi-step conversion banners that follow modern UX standards.
nameastro-ux
descriptionUX 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

  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)