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.
Install this agent skill to your Project
npx add-skill https://github.com/Soborbo/claudeskills/tree/main/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)
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
Soborbo/claudeskills
astro-images
Width-based responsive image patterns for Astro. Aspect ratio independent.
Soborbo/claudeskills
llm-optimization
Optimize websites for AI assistant recommendations. ChatGPT, Gemini, Perplexity, Claude. Get cited in AI answers.
Soborbo/claudeskills
astro-blog-technical
Phase 4 - Technical implementation (frontmatter, schema, performance)
Soborbo/claudeskills
page-structure
Generates section list for a page. Deterministic mapping. Does not write content.
Soborbo/claudeskills
internal-linking
Plans internal link structure using content silos. Outputs link map with SEO priority. Does not create links.
Soborbo/claudeskills
astro-components
UI component library for Astro lead generation sites. Buttons, forms, cards, badges. Requires design-tokens skill.
Didn't find tool you were looking for?