Contenu du pack

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

Portrait Switcher Testimonials

When to use

• Your landing page has six great testimonials but a wall of quotes makes visitors read none of them
• You want one featured story to carry the section, with the other voices one click away
• Your testimonials come with real portrait photos and you want the faces to do the inviting
• The section needs to work for keyboard and screen-reader users, not just mouse clicks
• You want an optional auto-advance that pauses the moment a visitor interacts

Workflow

1. Pick the lineup (input: your testimonial pool → output: 4–8 chosen testimonials)
   Choose four to eight testimonials that cover different buyer types, objections, or outcomes — not eight versions of "great product." One per persona is the rule: the skeptic, the switcher, the power user, the budget buyer. Fewer than four feels empty; more than eight and nobody clicks past the fifth. Rank them so the strongest objection-killer goes first — it is the default featured quote.
2. Shape each story (input: raw quotes → output: trimmed quote cards)
   Trim every quote to two or three sentences that keep the speaker's own words and one concrete detail: a number, a time frame, a before-and-after. Cut generic praise ("amazing service!") and keep the sentence that only this customer could have written. Pair each quote with the speaker's full name, role, and company — anonymous quotes don't convert — and a portrait photo at least 400px square, cropped to the face, consistent lighting and background treatment across the set.
3. Build the switcher (input: quote cards → output: working switcher section)
   Layout: one large featured panel (big quote, portrait, name, role, company) above or beside a horizontal row of portrait buttons. Clicking a portrait swaps the featured quote with a short crossfade; the active portrait gets a visible ring or underline so visitors always know which story they're reading. The switcher is a set of real buttons, not divs with click handlers — keyboard users tab through portraits and press Enter to switch, and screen readers announce the new quote via a live region. Auto-advance, if used, runs on a 6–8 second timer, pauses on hover, focus, or any click, and never restarts after a manual selection.
4. Write the transitions (input: working switcher → output: polished motion)
   Keep motion honest: a 200–300ms fade-and-rise on the quote, no spinning, no sliding the whole panel off-screen. Motion must respect reduced-motion preferences — with prefers-reduced-motion: reduce, swaps happen instantly. Portrait thumbnails get a subtle scale or ring on hover, never a layout-shifting jump. If the section sits below the fold, make sure the first paint shows the default quote fully rendered, not an empty panel waiting on JavaScript.
5. Check the proof (input: polished section → output: verified section)
   Verify every quote against its source: wording, name spelling, job title, company, and that you have permission to publish it. Test with JavaScript disabled — the default featured quote must still display. Test on a narrow phone screen: portraits must stay tappable (at least 44px targets) and the featured panel must not overflow. Finally, read the section as a skeptic: does each quote answer a real doubt, or does it just cheer?

Aperçu du modèle

Portrait Switcher Testimonials — Build Template

One featured quote at a time, portraits do the inviting. Fill in the lineup, then build.

The lineup (4–8 testimonials, one per buyer type)

Default featured (strongest objection-killer): #{n}

Portrait checklist (per speaker)

• [ ] Portrait ≥400px square, face crop, consistent treatment with the set
• [ ] Full name spelled correctly, role and company verified
• [ ] Written permission for quote + name + title + photo on file

Featured panel

• Quote typography: {large, e.g. 28–32px, high contrast}
• Attribution line: {Name} — {Role}, {Company}
• Portrait: {full-size portrait shown beside/above the quote}

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