Astro UX Skill

astro-ux

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

majiayu000/claude-skill-registry·0installs663starsSales & marketing

SKILL.md

Full skill instructions

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 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)

Install skill

Copy and run in your terminal

npx -y skills add https://github.com/majiayu000/claude-skill-registry --skill astro-ux

View on GitHub

skills/data/astro-ux/SKILL.md

More Sales & marketing skills

View all

Sales & marketing

revops

Design and optimize systems connecting marketing, sales, and customer success into a unified revenue engine.

53.3K 104.9K

View

Sales & marketing

lead-magnets

Strategic planning and optimization for email capture offers and gated content.

53.3K 103.4K

View

Sales & marketing

directory-submissions

Directory submissions: the foundation layer of distribution that passes backlinks and discovery surface area into your marketing pages.

53.3K 76.3K

View

Sales & marketing

gsap-timeline

Sequence and choreograph multi-step animations with precise timing control and nested timelines.

15.9K 58.4K

View

Sales & marketing

launch-strategy

Structured framework for planning product launches, feature announcements, and go-to-market strategies.

53.3K 56.8K

View

Sales & marketing

gws-drive-upload

Upload files to Google Drive with automatic MIME type detection and metadata.

31.2K 47.2K

View

Sales & marketing

Automates CI/CD pipeline setup. Use when setting up or modifying build and deployment pipelines. Use when you need to automate quality gates, configure test runners in CI, or establish deployment strategies.

101.4K 43.2K

View