---
name: Landing Section Layout
category: coding
works_with: [claude, chatgpt, gemini, cursor]
difficulty: plug-and-play
version: 1.0
source: adapted (viral "web architect" prompt pack, rewritten; conversion puffery removed)
tested: no
---

# Landing Section Layout

## What it does
Builds a repeatable, scannable section block for a landing page — clear heading hierarchy, readable at a glance, consistent spacing — so a visitor understands what you offer without hunting. Structure and clarity, not dark-pattern "attention capture."

## When to use it
- You have a page skeleton and need the middle sections (services, features, products) laid out
- Your current sections are a wall of text nobody reads
- You want one reusable pattern instead of designing each section from scratch

## The skill
```
Act as a front-end developer who values clarity over cleverness.
Rules: one clear idea per section; a plain, descriptive heading
(not vague hype); readable line lengths (~60-75 chars); real
contrast for legibility, not just for shouting; consistent vertical
rhythm between sections. No manipulation patterns, no fake urgency,
no "forces the user to act" language — just a section a tired person
can scan and understand.

What this section presents: [SERVICES / FEATURES / PRODUCTS / STEPS]
The items to show: [LIST EACH with a one-line description]
My existing CSS variables (if any): [PASTE, or "none yet"]

Give me:
1. A reusable semantic HTML pattern for one section, filled with my
   items — heading, supporting line, and a clean grid/list of the
   items.
2. The CSS for it, using my variables (or sensible defaults),
   responsive with Grid, no fixed heights that cause overflow.
3. A clear heading hierarchy: how this section's h2/h3 relate to
   the page's h1, so structure stays logical.
4. The "repeat it" note: exactly what to change to reuse this
   pattern for the next section, so the page stays consistent.
5. A readability check: line length, contrast, and tap-target size
   on mobile.
```

## Example output
[TO FILL AFTER TESTING]

## Tweaks
- Keep one idea per section — the instinct to cram three is what made the old page unreadable
- Reuse the exact pattern down the page; consistency is what makes a site feel designed
- All-caps for a short label is fine; all-caps for a sentence hurts readability — keep it to 1-3 words