astro-ux

📁 soborbo/claudeskills 📅 Jan 29, 2026
4
总安装量
4
周安装量
#48592
全站排名
安装命令
npx skills add https://github.com/soborbo/claudeskills --skill astro-ux

Agent 安装分布

github-copilot 4
opencode 3
gemini-cli 3
antigravity 3
codex 3
kimi-cli 3

Skill 文档

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)