Contenu du pack

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

Masonry Testimonial Wall

When to use

• A landing page, homepage, or pricing page needs social proof and a single row of three identical quote cards looks staged and forgettable
• You have 8–40 real customer quotes of very different lengths — one-liners and three-sentence stories — and a uniform grid either wastes space or truncates them
• A testimonials page, "wall of love" page, or case-study index needs to feel like a living collection, not a corporate press release
• An existing testimonial section looks broken on mobile (cards overlapping, giant gaps) or fails basic accessibility (tiny gray text, no semantic markup)
• You are rebuilding a testimonial section after collecting new reviews and want the layout, moderation rules, and code to come as one package

Workflow

1. Audit the quotes (input: raw testimonials → output: curated, verified set)
   Collect the raw quotes and filter: keep only testimonials from real, identifiable customers with permission to publish (name, role, company, and a verifiable source — review platform, email, or interview). Cut quotes that are vague ("Great product!"), unverifiable, or edited into claims the customer never made. Sort the survivors into short (≤20 words), medium (21–50), and long (51–100). Cap long quotes at ~100 words — longer ones belong on a case-study page, not the wall. Note the spread: the masonry layout depends on genuinely mixed lengths.
2. Design the wall (input: curated set → output: layout spec)
   Specify the masonry behavior: columns (3–4 on desktop, 2 on tablet, 1 on mobile), cards flowing top-to-bottom within columns with natural height per quote, gap consistent (16–24px), and the tallest cards distributed so no column runs dramatically longer than the others. Decide the card anatomy: quote text first (largest type on the card), then attribution (name, role, company), then optional extras — avatar or initials, star rating only if the rating is real and sourced, and a "read the story" link only for quotes tied to a real case study. Decide the featured treatment: 1–3 strongest quotes get a subtle accent (a tinted background or a slightly larger quote size) — never a fake "featured" badge on every card.
3. Build it accessibly (input: layout spec → output: working code)
   Build with semantic HTML: the wall is a list (
   /
   • ) or a set of

     /

     /

   • Add honest interactions (input: working wall → output: filter/sort/load behavior)
     Add only interactions that serve the content: filter by use case, product, or industry (when you have ≥15 quotes and real categories); "load more" or infinite scroll that preserves position and doesn't re-shuffle the wall; and a "submit your testimonial" link that goes to a real form. No auto-rotating carousels inside the wall, no fake live counters ("2,418 people loved this today"), no randomized reshuffling on every page load that makes quotes impossible to find twice.
   • Verify and ship (input: finished wall → output: verified page)
     Verify four ways: responsive (320px phone through 1440px desktop, no overlaps or orphaned single-column gaps), content (every quote traced to its source, names spelled as the customer spells them, no silently edited claims), performance (images lazy-loaded, no layout shift as cards load), and accessibility (screen-reader pass: quote + attribution read as one unit; keyboard pass: every interactive element reachable). Ship with a short maintenance note: how to add a quote, how to retire one, and the rule that no quote ships without source + permission.

Aperçu du modèle

Masonry Testimonial Wall — Build Template

One file of quote data, one wall. No quote ships without source + permission.

Quote audit

Sources collected from: {review platform / emails / interviews} Total collected: {n} · Kept: {n} · Cut (vague / unverifiable / unpermitted): {n}

Length spread: short {n} · medium {n} · long {n} (masonry needs genuinely mixed lengths) Featured quotes (1–3 strongest, subtle accent only): {numbers}

Layout spec

Columns: desktop {3–4} · tablet {2} · mobile {1} · Gap: {16–24px} Card anatomy: quote (largest type) → attribution (name, role, company) → avatar/initials [ ] → sourced star rating [ ] → case-study link [ ]

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