AI Services Market
AI Services Market › Fábrica de habilidades › Web › Profile Card Testimonial Reel
$4.99 · Sin registrov1.0.0– vistas

Profile Card Testimonial Reel

Prueba deslizable: primero las personas, la cita como recompensa.

Convierte tu IA en creadora de secciones de testimonios con el patrón de carrusel de tarjetas de perfil: un carrusel horizontal de tarjetas compactas, cada una un miniperfil con foto, nombre, cargo y cita, que los visitantes recorren deslizando como un feed de historias.

Vista previa de Profile Card Testimonial Reel
Ideal para
Profesionales de marketing, fundadores y desarrolladores front-end que crean prueba social pensada para móvil
Tiempo necesario
~35 min para una primera sección
Nivel
Intermedio

Instálala en 3 pasos

Sin registro. Sin herramientas CLI. Elige tu IA, copia una línea y pégala.

Pro — las 511 habilidades

¿Prefieres hacerlo tú mismo? Compra la habilidad ($4.99), descarga el ZIP desde la confirmación de compra, descomprímelo en el directorio que se muestra arriba y reinicia tu sesión de IA — el mismo resultado. ¿Ya la compraste? Tu asistente de IA puede descargarla por ti.

Qué incluye

Un SKILL.md (la guía paso a paso) + una plantilla inicial. Una vista previa:

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.

Vista previa de la plantilla

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

El paquete de la habilidad (SKILL.md + plantilla) está escrito en inglés.

Pro — las 511 habilidades

También te puede interesar