Was ist enthalten

Eine SKILL.md (die Anleitung) + eine Startvorlage. Eine Vorschau:

Rated Testimonial Row

When to use

• Your landing page has customer quotes but they're buried in a wall of text nobody reads
• You have genuine customer ratings and want to show them next to the words, not as a disconnected badge
• A product page needs social proof near the pricing or buy button, where a doubting visitor decides
• You're rebuilding a testimonials section that currently shows anonymous quotes ("— Happy Customer") nobody believes
• You need a testimonials row that works in a narrow slot — under a hero, above a footer — without taking over the page

Workflow

1. Collect real testimonials (input: customer feedback → output: approved quote set)
   Gather quotes you have permission to publish — from reviews, support emails, survey responses, or direct asks. For each one, record the exact quote, the person's real name, their role and company, and the rating they actually gave, if any. Never invent a quote, a name, or a rating; never upgrade a 4-star review to 5 stars for symmetry. Three honest testimonials beat six suspicious ones. If you only have two, show two — a row of two real voices is stronger than a row padded with fiction.
2. Design the row layout (input: approved quote set → output: row structure)
   Lay out three cards in a horizontal row on desktop, collapsing to a vertical stack on mobile. Each card holds the same four elements in the same order: star rating (if the customer gave one), quote, attribution, and one line of context (what they use the product for, or their outcome). Equal card heights, equal type sizes, no "featured" card blown up to twice the size — the row reads as a chorus, not a solo with backup singers. If a quote is much longer than the others, trim it with an ellipsis and keep the full version on a linked detail page, never by shrinking the type.
3. Render the star ratings (input: real ratings → output: star display)
   Stars display the rating the customer actually gave: five stars for a 5-out-of-5, four filled plus one empty for a 4, and so on. Half-stars only when the source rating genuinely has a half. Keep one star style across the row (same size, same color, same spacing) and put the numeric rating next to the stars only if the source used numbers ("4.5 out of 5"). Never show an aggregate ("4.9 average") unless you computed it from the real set and can say how many ratings went into it. Stars are a display of facts, not decoration — a row where every card shows five perfect stars reads as staged; real rows have variety.
4. Add attribution and context (input: quote set → output: finished cards)
   Attribution is a real name, a real role, and a real company — or the name and role the person agreed to be shown under. Add one context line that makes the quote checkable: what they use the product for, how long they've used it, or the specific result they got. Link the name or company to a public profile or case study when one exists. If a customer asked to be shown by first name only, honor exactly that. Anonymous quotes ("— Verified Buyer") go in a different pattern — a review feed — not in a testimonial row that promises real people.
5. Make it responsive and accessible (input: finished row → output: verified section)
   On mobile the row stacks vertically in the same order; nothing reflows into a carousel unless you deliberately choose one, and if you do, the controls must be keyboard-operable and the auto-advance must pause on focus. Stars need text alternatives: screen readers should hear "Rated 4 out of 5 stars", not "image, image, image". Verify contrast on the star color against the card background, and check that the section still makes sense with images disabled — the words carry the proof, not the stars.

Vorschau der Startvorlage

Rated Testimonial Row — Build Template

Real quotes, real names, real ratings. Fill this in before designing.

Quote set (permissioned only)

Card 1

• Quote (exact words): "{quote}"
• Rating they actually gave: {★ out of 5 — or "none given"}
• Name: {real name}
• Role / company: {role, company}
• Context line: {what they use the product for / how long / specific result}
• Permission: {source + date permission confirmed} | Link: {public profile / case study, if any}

Card 2

• Quote (exact words): "{quote}"
• Rating they actually gave: {★ out of 5 — or "none given"}
• Name: {real name}
• Role / company: {role, company}

Das Skill-Paket selbst (SKILL.md + Vorlage) ist auf Englisch verfasst.

Das komplette Skill-Paket kaufen — $4.99 Pro — alle 511 Skills