# Elite Frontend UX Above The Fold Essentials

> Sub-skill of elite-frontend-ux: Above-the-Fold Essentials (+4).

- Skill: `vamseeachanta/elite-frontend-ux-above-the-fold-essentials` (Agent Skill)
- Install (CLI): `npx skillmds@latest add vamseeachanta/elite-frontend-ux-above-the-fold-essentials`
- Raw SKILL.md: https://api.skillmd.com/api/skills/vamseeachanta/elite-frontend-ux-above-the-fold-essentials/raw
- Safety review: PASS (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: vamseeachanta (https://skillmd.com/u/vamseeachanta)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/vamseeachanta/elite-frontend-ux-above-the-fold-essentials

---


# Above-the-Fold Essentials (+4)

## Above-the-Fold Essentials

Must fit within one viewport:
1. Headline (5–10 words)
2. Supporting subheadline (value proposition)
3. Single primary CTA
4. Hero visual


## Section Flow

```
1. Hero (headline + CTA + visual)
2. Social proof (logos, snippet)
3. Problem / Solution
4. Features / Benefits (3–4 max)
5. Testimonials
6. Pricing (if applicable)
7. FAQ
8. Final CTA
9. Footer
```


## CTA Design

- Height: min 44px; padding: 2× font size
- Copy: action verbs, first-person ("Get my free trial" > "Sign up")
- Length: 2–5 words max
- One primary CTA per viewport


## Pricing Tables

- 3–4 tiers max (more causes paralysis)
- Highlight recommended tier
- Annual/monthly toggle showing savings
- CTA button on every tier


## Form Optimization

- Single column (120% fewer errors vs multi-column)
- Minimize fields (4 vs 11 fields = 120% more conversions)
- Never ask for phone unless essential (58% abandon)
- Labels above inputs; validate on blur, not while typing

---