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