What’s inside

One SKILL.md (the playbook) + one starter template. A preview:

Angled Gallery Hero

When to use

• Your homepage hero is a single centered headline over one image and it looks like every other site in your category
• You have strong photography — a portfolio, a product range, a place, a team — and one hero image cannot carry it
• You want the first screen to feel editorial and dynamic, like a magazine spread, without sacrificing the headline or the call to action
• You are redesigning a hero for a creative, travel, product, or agency site where visual energy is part of the pitch
• Your current hero tries to show many images and ends up a cluttered grid with no focal point

Workflow

1. Pick the story (input: brand + images → output: one hero message)
   Choose the single message the hero must land: what you do, for whom, and the one action to take. Then pick 3–5 images that prove it — different subjects, complementary tones, no two near-duplicates. If the images do not share a rough color or light family, the diagonal will look like a collage of strangers; a quick consistent treatment (same crop ratio family, similar warmth) unifies them before any angle is applied.
2. Set the angle (input: hero message + images → output: diagonal geometry)
   Choose one diagonal direction and one angle, and use it everywhere: typically 8–15 degrees off horizontal for the gallery strip, with cards rotated to match or counter-rotate slightly for energy. The diagonal should sweep the eye toward the headline and the call to action, not away from them. Sketch the geometry before building: where the strip enters and exits the viewport, where cards overlap, and — critically — where flat, unrotated space is reserved for the headline and button. The angle is the frame; the flat space is where the message lives.
3. Layer the cards (input: geometry → output: overlapping composition)
   Arrange the images as overlapping cards along the diagonal: larger cards for the strongest images, smaller ones for support, with consistent overlap depth and a shared card style (border, radius, shadow). Overlap creates depth only when it is deliberate — every card should be at least 70% visible, and no card should cover another card's subject. Put the most important image where it is least covered. If a card exists only to fill space, remove it; three strong cards beat five forgettable ones.

Template preview

Angled Gallery Hero — Build Template

One hero, one angle, one message. Fill in before building.

Site: {name} | Hero message (one sentence): {what you do, for whom, one action}

Primary call to action: {button label} → {destination}

Diagonal geometry

Angle: {e.g. 12°} | Direction: {e.g. rising left → right} | Sweep: toward the headline + CTA, not away

Flat space reserved for headline + CTA: {e.g. solid panel, left third}

Gallery cards (3–5, in stacking order — top of list = on top)

Card style: border {…} · radius {…} · shadow {…} — same for all cards

Rule: every card ≥70% visible; no card covers another card's subject.

Headline block

Buy the full skill pack — $4.99 Pro — all 471 skills