What’s inside

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

Portrait Overlay Testimonials

When to use

• Your website's testimonial section is a gray wall of text quotes nobody reads, and you want faces to make it believable
• You have great customer quotes and portrait photos, but layering text over faces keeps turning into unreadable mush
• You are redesigning a landing page, a services page, or a homepage and the testimonial block is the part that has to earn trust
• You need a testimonial section that works on mobile (where overlays collapse) as well as on desktop
• You have permission to use people's photos and quotes and want to handle that permission properly, not as an afterthought

Workflow

1. Pick the quotes that earn trust (input: raw testimonials → output: 3–6 edited quotes)
   Choose quotes that are specific, not superlative: "Onboarding took one afternoon and our team actually uses it" beats "Amazing product, highly recommend!" Cut each quote to one or two sentences — the length a visitor will actually read — keeping the customer's own words and cutting only filler. For each quote, record the person's name, role, and company, and confirm you have their permission to publish the quote with their photo. If a quote cannot be attributed to a real person, do not use it: anonymous praise in a testimonial section reads as invented, because often it is.
2. Choose and prepare the portraits (input: photos + permissions → output: prepared portrait set)
   Pick portraits that are consistent: same crop (head and shoulders), same orientation, similar lighting and background tone, eyes toward the camera. Crop each to the same aspect ratio and check that faces stay clear of the overlay zone — the area where the quote card will sit. Confirm written permission for each photo (a message saying "yes, use my photo" counts if you save it; a verbal yes you cannot prove does not). Never crop a photo in a way that misrepresents the person, and never use a stock face next to a real customer's words.
3. Design the overlay (input: quotes + portraits → output: overlay spec)
   Specify the layout: portrait full-bleed with the quote card overlapping one corner or the lower third, a solid or semi-opaque card (never raw text straight onto a busy photo), and a contrast check — the card background must keep the text readable against every portrait, not just the lightest one. Set the type rules: quote at 20–24px minimum, attribution smaller but never below 14px, line length capped so the card never covers the face. Define the desktop layout and the mobile fallback (card slides below the photo, or the photo shrinks to a circular avatar) — the overlay must degrade gracefully, not just shrink.

Template preview

Portrait Overlay Testimonials — Build Sheet

One section, real people, real permission. Fill this in before building.

Quotes (3–6, specific over superlative)

Quote {1}

> "{edited quote — 1–2 sentences, customer's own words, filler cut only}"

• Name / role / company: {…}
• Original wording kept on file at: {path}
• Permission to publish quote + photo: [ ] confirmed, saved at {path / message date}

*(Repeat for each quote.)*

Portraits

Consistency check: same crop, same orientation, similar tone — [ ] Never: stock faces, another person's photo, AI faces next to real words.

Overlay spec

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