Contenu du pack

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

Overlapping Testimonial Hold

When to use

• A landing page testimonial section where five similar quotes in a row all blur together and none of them gets read
• A product or service page that needs one strong customer voice to anchor the section, with supporting voices visible but quiet
• A homepage social-proof block where the goal is "read this one" rather than "skim many"
• A case-study or pricing page where a testimonial must sit close to the call to action without pushing it down the page
• A portfolio or agency site where testimonials should feel like a curated stack, not a wall of praise

Workflow

1. Pick the hold testimonial (input: your testimonial pool → output: one lead quote)
   Choose exactly one testimonial to hold in focus: the one with the most specific outcome, the most recognisable customer, or the sentence a sceptic would find hardest to dismiss. Specificity wins over enthusiasm — "Cut our onboarding from three weeks to four days" beats "Amazing team, highly recommend!" The lead quote should be 25–45 words; longer than that and visitors will not finish it, shorter and it has nothing to hold on to. The remaining testimonials become the supporting stack: 3–5 short quotes (10–20 words each), chosen for variety of role, company size, or use case.
2. Design the stack (input: lead + supporting quotes → output: stacked layout)
   Lay the cards out with a deliberate overlap: each card offset from the one beneath by 16–32 px horizontally and 8–16 px vertically, so every card's top edge and left edge stays visible. The lead card sits on top, full opacity, full size; the supporting cards peek out from behind it like a fanned deck. On desktop the stack reads left-to-right with the lead card front-center; on mobile the stack compresses to a vertical fan with the same offsets scaled down. Use one card style for all testimonials — same border, same radius, same padding — so the overlap, not decoration, creates the hierarchy. The lead card earns exactly one extra distinction: a slightly larger quote font or a small accent bar, never both.
3. Write the card contents (input: quotes → output: finished card copy)
   Each card carries the same four elements in the same order: quote, name, role + company, and one credibility marker (star rating, metric, or company logo). Attribution must be real and complete — first name plus last name or full company name, never "J. S., Marketing" — because anonymous praise reads as invented praise. If a testimonial cannot be fully attributed, it does not go in the stack; it goes nowhere. Keep the lead card's metric in the quote itself ("four days") rather than as a separate badge, so the number lands while the sentence is being read.
4. Build the hold interaction (input: layout → output: interaction spec)
   The "hold" is the section's signature behaviour: the lead card stays pinned in focus while the supporting cards sit behind it, and the visitor can bring any supporting card forward. Implement it as click-to-bring-forward (or tap on mobile): clicking a peeking card animates it to the front over 0.35–0.45 s with ease-out-cubic, while the previous lead recedes into the stack. Add keyboard support — arrow keys cycle the stack, focus outlines visible — and an optional auto-rotate that advances every 6 s but stops permanently on the first manual interaction. Never auto-rotate without a pause control: a moving testimonial that cannot be stopped is a dark pattern and an accessibility failure.
5. Handle motion and reduced motion (input: interaction spec → output: accessible animation)
   The bring-forward animation moves one card at a time; the rest of the stack shifts by at most the offset distance. Respect prefers-reduced-motion: when it is set, the card swap becomes instant (no slide, no scale) and auto-rotate is off by default. Every card must remain readable in every stack position — test by cycling to the back card and confirming its peeking edge still shows its name and first line. Colour contrast on all card text must meet WCAG AA against the card background, including the dimmed supporting cards: if dimming drops contrast below the bar, dim with a border or scale change instead of text opacity.
6. Place, measure, and ship (input: finished section → output: live section)
   Place the section directly after the claim it supports — after the pricing, after the feature list, never stranded at the page bottom under a footer. On desktop the section should fit in roughly one viewport height; if the stack plus heading exceeds that, trim quote lengths before shrinking type. Add a static fallback: with JavaScript disabled, the lead card shows fully and the supporting cards render as a plain list below it. Before shipping, check the section on a narrow phone (320 px): cards must not overflow horizontally, the overlap must not hide attribution, and tapping a peeking card must bring it forward on the first tap.

Aperçu du modèle

Overlapping Testimonial Hold — Starter Template

One voice in focus, the rest fanned behind it. Pick the lead testimonial first.

The testimonials

Lead testimonial (25–45 words, specific outcome):

> {quote}

Attribution: {Full name}, {Role}, {Company} Credibility marker: {star rating / metric / logo}

Supporting stack (3–5 quotes, 10–20 words each)

Attribution check: every card has a full name + company? ☐ (If not, it does not go in the stack.)

Layout

• Offset: {16–32 px} horizontal / {8–16 px} vertical between cards
• Lead card distinction (pick ONE): larger quote font ☐ / accent bar ☐
• Section heading: {heading}

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