Agent skill
astro-ux
UX patterns and section templates for Astro lead generation sites. Hero, features, testimonials, CTAs, FAQ sections. Use for page section design.
Stars
163
Forks
31
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/data/astro-ux
SKILL.md
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
- Mobile-first responsive
- Clear CTA hierarchy
- Trust elements before forms
- Accessible (a11y checked)
- Fast loading (no heavy assets in viewport)
Didn't find tool you were looking for?