Contenu du pack

Un fichier SKILL.md (le guide pratique) + un modèle de départ. Aperçu :

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.
4. Make it work on every screen (input: hero layout → output: responsive hero)
   Adapt the hero for phone, tablet, and desktop: on a phone the frame crops to its strongest part (never squashed), the text stacks below or over a darkened band, and the button stays thumb-reachable. Set the frame to load first and fast — a compressed image sized for its display width, with width and height declared so the page does not jump while it loads. Test on a real phone over a real connection, not just a resized desktop window: if the headline, the frame, and the button are not all visible without scrolling, simplify.
5. Verify the first five seconds (input: responsive hero → output: verified hero)
   Load the page fresh and watch the first five seconds: the frame appears quickly, the headline reads instantly, the button is obvious, and nothing moves, pops, or autoplays. Ask one person who has never seen the page what it offers and what they would click — if they hesitate, the hero is not done. Check that the hero still works with images blocked or slow: the headline and button must make sense on their own, because for some visitors the frame will arrive late or not at all.

Aperçu du modèle

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)

Le pack de compétence lui-même (SKILL.md + modèle) est rédigé en anglais.

Acheter le pack complet — $4.99 Pro — les 511 compétences