What’s inside

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

Single Frame Hero

When to use

• Your homepage hero is a carousel nobody watches past the first slide, or an autoplaying video that slows the page down
• You have one strong image — a product shot, a photo, an illustration — that says more than a slideshow ever could
• Visitors bounce because the hero takes too long to load or too long to understand
• You need a hero that works as well on a phone as on a desktop, with no motion that distracts from the message
• You are launching a page and want the fastest possible route from "landed" to "understood"

Workflow

1. Pick the one frame (input: candidate images → output: chosen frame)
   Gather your candidate images and judge them against one test: does a stranger understand what this page is about from this image alone, in three seconds? The winning frame has a clear subject, space for text (a calmer area on one side or a clean background), and enough resolution to look sharp at full width. Reject frames with busy detail where text would sit, faces or products cut off at the edge, or watermarks. One frame means the choice has to be good — a mediocre frame cannot hide behind a carousel.
2. Write the one headline (input: page goal + audience → output: headline and subline)
   Write one headline that states what the page offers and who it is for, in plain words a stranger would understand. Add one supporting line with the single most important fact — a price, a result, a date. Cut every other word: no tagline, no slogan, no second headline competing for the eye. Read the headline aloud over the chosen frame; if it needs explaining, it is not the headline yet. The hero carries one message; the rest of the page carries the rest.
3. Place the frame, headline, and call to action (input: frame + headline → output: hero layout)
   Place the three elements in one of three arrangements and commit: full-bleed frame with text over a calmed area, frame on one side with text on a solid panel on the other, or centered frame above centered text. One call to action, one button, labeled with what happens next ("See the collection", "Start free", "Book a demo") — never two equal buttons side by side. Make sure the text sits on a calm part of the frame or on a solid panel with real contrast; text over busy detail is the most common way a single-frame hero fails.

Template preview

Single Frame Hero — Hero Template

One page = one filled-in copy of this template. One frame, one headline, one button.

The one frame

Chosen frame file: {filename} What a stranger understands from it in 3 seconds: {…} Calm area for text: {left / right / bottom / clean background} Check: [ ] Clear subject · [ ] Nothing important cut off at the edge · [ ] Sharp at full width · [ ] Mine or licensed

Rejected frames (and why): {…}

The one headline

Headline (what the page offers + who it is for): {…} Supporting line (one key fact — price, result, date): {…} Cut from the hero (belongs lower on the page): {…}

Layout (pick one)

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