Masonry Testimonial Wall
Real quotes, honestly laid out.
Turns your AI into a front-end builder for testimonial walls — designs a masonry layout that fits real quotes of uneven length, keeps attribution honest, and ships as clean, accessible, responsive code.
Install it in 3 steps
No sign-up. No CLI tools. Pick your AI, copy one line, paste it over.
Prefer doing it yourself? Buy the skill ($4.99), download the ZIP from your checkout confirmation, unzip it into the directory shown above, restart your AI session — same result. Already bought it? Your AI assistant can download it for you.
What’s inside
One SKILL.md (the playbook) + one starter template. A preview:
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
- 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. - 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.
Template preview
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 [ ]
