Agent-Skills.md

Agent Skills: Astro UX Skill

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

UncategorizedID: Soborbo/claudeskills/astro-ux

Repository

Soborbo/claudeskills
Soborbo
2

Install this agent skill to your local

pnpm dlx add-skill https://github.com/Soborbo/claudeskills/tree/HEAD/astro-ux

Skill Files

Browse the full folder contents for astro-ux.

Download Skill

Loading file tree…

astro-ux/SKILL.md

Skill Metadata

Name
astro-ux
Description
UX 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)