AI Services Market
AI Services Market › Fabbrica delle skill › Web › Profile Card Testimonial Reel
$4.99 · Nessun login necessariov1.0.0– visualizzazioni

Profile Card Testimonial Reel

Prove scorrevoli — prima le persone, la citazione come ricompensa.

Trasforma la tua IA in un creatore di sezioni di testimonianze con il pattern profile-card reel — una striscia a scorrimento orizzontale di schede profilo compatte, ognuna un mini-profilo con foto, nome, ruolo e citazione, che i visitatori scorrono come un feed di storie.

Anteprima di Profile Card Testimonial Reel
Ideale per
Marketer, founder e sviluppatori front-end che creano prova sociale mobile-first
Tempo necessario
~35 min per una prima sezione
Livello
Intermedio

Installala in 3 passaggi

Nessuna registrazione. Nessuno strumento da riga di comando. Scegli la tua AI, copia una riga e incollala.

Pro — tutte le 511 skill

Preferisci fare da te? Acquista la skill ($4.99), scarica lo ZIP dalla conferma d'acquisto, decomprimilo nella cartella mostrata sopra e riavvia la sessione della tua AI — stesso risultato. L'hai già acquistata? Il tuo assistente AI può scaricarla per te.

Cosa contiene

Un file SKILL.md (la guida operativa) + un modello di partenza. Un'anteprima:

Profile Card Testimonial Reel

When to use

  • Your testimonials read best as people first — photo, name, role — with the quote as the payoff
  • You want a social-proof section that feels like a feed: swipeable, skimmable, alive
  • Most of your traffic is mobile, where horizontal swipe is the most natural gesture available
  • You have 8–20 testimonials and want them all reachable without a long vertical scroll
  • You want the section to show motion and abundance without hiding any testimonial behind a click

Workflow

  1. Build the cards (input: your testimonial pool → output: 8–20 profile cards)
    Each card is a mini-profile, not just a quote: portrait photo (at least 400px square), full name, role and company, one short quote (1–2 sentences), and one verifiable detail — a result, a time frame, a before-and-after. Cards are uniform: same width, same height, same internal layout. If a quote runs long, trim it to the sentence that only this customer could have written; the reel's rhythm depends on cards being interchangeable in size. Order the reel so the first three visible cards cover three different objections.
  2. Lay out the reel (input: cards → output: horizontal scroll reel)
    The reel is a horizontal scroll container with scroll-snap: each swipe lands cleanly on a card, never halfway between two. Show a peek of the next card at the right edge — that half-visible card is the affordance that says "there's more, keep swiping." On desktop, add previous/next arrow buttons and a visible scrollbar or progress indicator; on touch, native swipe does the work. Cards never wrap to a second row — one row, horizontal only. The reel must be usable with JavaScript disabled: native scroll still works, arrows are enhancement.
  3. Handle autoplay (input: reel → output: autoplay that knows when to stop)
    Autoplay, if used, advances one card every 5–7 seconds and stops permanently on the first sign of human intent: a swipe, a scroll, an arrow click, a hover, a focus. It never restarts on its own — a reel that keeps moving after the visitor grabbed it feels broken. Autoplay pauses when the section is off-screen and when the tab is hidden, so it doesn't burn through testimonials nobody is watching. Reduced-motion users get no autoplay at all. When in doubt, ship without autoplay: a reel that waits for the visitor beats one that races them.
  4. Make it keyboard- and reader-friendly (input: reel → output: accessible reel)
    The scroll container is keyboard-operable: arrow keys move between cards when the reel has focus, Tab reaches each card's interactive elements in order, and focus is always visible. Screen readers get each card as a self-contained unit — name, role, quote announced together — not a jumble of fragments. Every card's interactive elements (links, expand controls) are real controls, not click handlers on divs. Test the whole reel with a keyboard alone: if you can't reach a card, neither can a keyboard user.
  5. Check the reel (input: finished reel → output: verified reel)
    Verify every card against its source: quote wording, name spelling, title, company, permission to publish. Test on a real phone: swipe with a thumb, confirm snap lands cleanly, confirm the peek of the next card is visible. Check that no card's text overflows its fixed height at any breakpoint. Read the first three cards as a skeptic: do they answer real doubts, or just cheer? A reel full of generic praise is a slot machine of nothing.

Anteprima del modello

Profile Card Testimonial Reel — Build Template

One row, horizontal only, swipeable like a feed. Fill in the cards, then build.

The cards (8–20, uniform size)

Total cards: {8–20} — First three cards cover: {objection 1} / {objection 2} / {objection 3}

Card checklist (per speaker)

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

Reel layout

  • Container: horizontal scroll, one row, cards never wrap
  • Snap: scroll-snap lands cleanly on one card, never halfway between two

Il pacchetto della skill (SKILL.md + modello) è scritto in inglese.

Pro — tutte le 511 skill

Potrebbe piacerti anche