astro-ux

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

Safety Notice

This listing is imported from skills.sh public index metadata. Review upstream SKILL.md and repository scripts before running.

Copy this and send it to your AI assistant to learn

Install skill "astro-ux" with this command: npx skills add soborbo/claudeskills/soborbo-claudeskills-astro-ux

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

SectionPurposeKey Elements
HeroFirst impression + CTAHeadline, subhead, CTA, trust badge
CTA BannerMid-page conversionHeadline, button, urgency
Form SectionLead captureForm, benefits, trust
Final CTALast chanceSummary, strong CTA

Trust Sections

SectionPurposeKey Elements
TestimonialsSocial proofQuote, name, photo, stars
LogosAuthorityClient/partner logos
StatsCredibilityNumbers, context
ReviewsThird-party proofGoogle/Trustpilot reviews

Content Sections

SectionPurposeKey Elements
FeaturesBenefitsIcon, title, description
How It WorksProcessNumbered steps
FAQObjection handlingQuestions, answers
AboutTrust buildingStory, 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)

Source Transparency

This detail page is rendered from real SKILL.md content. Trust labels are metadata-based hints, not a safety guarantee.

Open in GitHubOpen in ClawHub

Related Skills

Related by shared tags or category signals.

General

astro-seo

No summary provided by upstream source.

Repository SourceNeeds Review
-18
soborbo
General

astro-architecture

No summary provided by upstream source.

Repository SourceNeeds Review
-9
soborbo
General

astro-a11y

No summary provided by upstream source.

Repository SourceNeeds Review
-9
soborbo