What’s inside

One SKILL.md (the playbook) + one starter template. A preview:

Testimonial Columns

When to use

• Your homepage, pricing page, or landing page needs social proof and one big quote is not enough
• You have six or more good testimonials and they are different lengths — some two lines, some six
• A wall of identical same-height cards would look like a template, but a chaotic free-for-all would look unedited
• You want visitors to browse proof at their own pace instead of watching quotes auto-rotate past them
• A sales page needs proof grouped by theme (results, ease of use, support) without building three separate sections

Workflow

1. Collect the raw quotes (input: reviews, emails, survey answers, call notes → output: quote bank)
   Gather every usable quote into one list: review-site comments, post-purchase survey answers, support emails where a customer praised you, and notes from calls. Keep each quote attached to the real person's name, role, and company — a quote without attribution is a rumor. Aim for at least nine quotes so each column has enough material to balance; if you have fewer than six, a masonry grid will look sparse and a single featured quote will serve you better. Do not invent or polish quotes into words the customer never said — trimming is editing, rewriting is fabrication.
2. Trim every quote to its sharpest lines (input: quote bank → output: trimmed quotes)
   Cut each quote to one to three sentences that carry the proof: the result, the feeling, or the specific detail that makes it believable. Keep the customer's own words and their most concrete detail ("cut onboarding from three weeks to four days" survives; "great product, highly recommend" does not). If a quote is still longer than three sentences after trimming, it is two quotes — split it, or save the rest for a case study. Aim for a mix of lengths across the bank: short punches, medium stories, and one or two longer ones give the masonry its varied rhythm.
3. Assign quotes to columns by weight, not by order (input: trimmed quotes → output: column assignment)
   Sort the trimmed quotes into three columns so that each column ends up roughly the same total height — that balance is what makes a masonry grid look intentional instead of lopsided. Start by placing the longest quote in column one, the second-longest in column two, the third-longest in column three, then keep dealing the next-longest quote to whichever column is currently shortest. Do not sort by theme down each column unless you are deliberately building themed columns; a reader's eye travels down one column at a time, so each column should feel like a varied conversation, not a single topic repeated. If you do theme the columns, label each column's theme in a small heading so the grouping reads as a choice.

Template preview

Testimonial Columns — Build Template

One page = one grid. Fill this in before laying out any columns.

Section

Heading: {e.g. What customers say / Loved by teams who ship} Subheading (optional): {one line, plain words} Columns: 3 desktop / 2 tablet / 1 mobile

Quote bank (9+ quotes, real attribution)

Cut list: {quotes rejected as too generic, with reason}

Trim check (every kept quote)

[ ] 1–3 sentences, customer's own words [ ] Keeps its most concrete detail (number, timeframe, or specific outcome) [ ] No invented or "improved" claims

Column assignment (deal longest-first to the currently shortest column)

Buy the full skill pack — $4.99 Pro — all 471 skills