Skip to content
Recaply.
Sign inSubmit a tool

DirectorySkills

Fanned quote deck: 1440, made in this run
Run 1Fanned quote deck“Make a fanned card deck of reviews for our board game cafe. Reviews in brief.md.”
Runs in
  • Claude Code
  • Codex
  • Cursor
  • Gemini CLI
  • GitHub Copilot
  • OpenCode
Generates with
Your agent's model
Tested with
Claude Code 2.1.322Claude Sonnet 5.51 real run, 12 Nov
Needs
Node 20+Chrome
Licence
Recaply licence

Fanned Quote Deck

Quote cards fanned out like a hand of playing cards; Next sends the front card to the back of the fan.

$9.99once, yours to keep

Every premium skill and prompt, one plan$19.99 a month. Cancel any time. What you get when you buy

Payments are non-refundable. See our Terms of service.

Builds testimonials as a fanned deck of cards into your own project: five quote cards fanned like a hand of cards on a tomato-red band, the front card readable with the quote, portrait and name, the others peeking out at angles; Next and Previous rotate the fan. Plain HTML, CSS and JavaScript, or matched to React, Next.js, Vue, Svelte, Astro or Tailwind when the project uses them. Comes with a working reference and a check that screenshots it at phone, tablet and desktop widths and flags sideways overflow, text under 12px, missing alt text and names, low contrast, no focus styles, motion that ignores reduced motion, leftover sample words and emoji icons. Use when a playful brand, app, game, event or creative studio wants an interactive testimonial deck, or someone asks for fanned, stacked or card-deck testimonials.

By RecaplyUpdated 12 Nov

Install Fanned Quote Deck

After the download, ask your agent to add it, or run the line yourself.

Read https://recaply.co/skills/fanned-quote-deck/install.md and follow it to install the fanned-quote-deck skill from fanned-quote-deck.zip.

Paste it into your agent. It reads our install steps, finds the ZIP you downloaded and adds the skill for you.

New to skills? How to install a skill

Similar skills

All 735 skills

Who Fanned Quote Deck is for

What you get

  • One HTML file with its CSS inside: no build step, no framework
  • Testimonials as a fanned deck of cards
  • Checked at phone and desktop widths

Good fit

  • When a playful brand, app, game, event or creative studio wants an interactive testimonial deck

Not for

  • An app with a backend, sign-in or a database
  • Copying another company's site

About this skill

You say

Make a fanned card deck of reviews for our board game cafe. Reviews in brief.md.

It said back

The fanned review deck is built in plain HTML, CSS and JavaScript, and the check passes. I viewed the screenshots at 1440px and 390px. I didn't open the 768px one.

The page has five cards fanned on a deep teal background, with mustard as the accent. The front card is upright and the others sit at ±7° and ±14°. Previous and Next rotate the fan. Keyboard use, screen readers, 320px width and reduced motion are handled as the skill requires.

Show more

What it did in run 1

  1. fanned-quote-deck
  2. ./brief.md
  3. cd .; ls -a; S=.claude/skills/fanned-quote-deck; ls $S/reference; cat $S/reference/index.html $S/reference/style.css $S/reference/script.js; node $S/scripts/check.mjs --ready
  4. cd .; ls -a; ls .claude/skills/fanned-quote-deck/reference; cat .claude/skills/fanned-quote-deck/reference/index.html .claude/skills/fanned-quote-deck/reference/style.css .claude/skills/fanned-quote-deck/reference/script.js; node .claude/skills/fanned-quote-deck/scripts/check.mjs --ready
  5. cd .; R=.claude/skills/fanned-quote-deck/reference; cp $R/script.js script.js; cp $R/style.css style.css sed -i '' -e 's/--bg:#B0301E/--bg:#0E4F55/;s/--ink:#FFF6F0/--ink:#FFF8EC/;s/--muted:#FFE1D8/--muted:#CFE9E3/;s/--line:#E8705F/--line:#3F8D8D/;s/--accent:#1F1410/--accent:#10201F/;s/--on-accent:#FFF6F0/--on-accent:#FFF8EC/;s/--em:#FFE17A/--em:#F2B632/;s/--card-ink:#1F1410/--card-ink:#10201F/;s/--card-muted:#5C4A42/--card-muted:#4A4A3F/;s/border:2px solid #1F1410/border:2px solid #10201F/' style.css cat >> style.css <<'EOF' /* Meeple Mug additions */ .face.initial{display:grid;place-items:center;background:var(--accent);color:var(--em);font-family:var(--font-display);font-weight:800;font-size:1.3rem;line-height:1} .fd-c blockquote p{font-size:1.05rem;line-height:1.55} .fd-ctl .ctrl:hover{border-color:var(--ink)} .fd-ctl .ctrl:focus-visible,.fd-c:focus-visible{outline-color:var(--ink)} .ctrl:focus-visible{outline:3px solid var(--ink)} EOF node -e ' const q=[["Came for one game, stayed six hours. The cheese toastie at hour four saved us.","Rhys","#FFF8EC"],["The staff taught us a new game in five minutes. We bought it on the way out.","Priya","#FFE29A"],["Perfect first date spot. Nothing breaks the ice like losing a word game together.","Callum","#C9F0DC"],["They still knew which of the 600 games my kids would love. We’re back every half term.","Siobhán","#CFE6FF"],["Quiet on weekday afternoons, buzzing on Fridays. Both are great.","Tomasz","#F6D5C3"]]; const cards=q.map(([t,n,c],i)=><figure class="fd-c" style="--c:${c}" data-pos="${i}"><blockquote><p>${t}</p></blockquote><figcaption class="who"><span class="face initial" aria-hidden="true">${n[0]}</span><span><b>${n}</b></span></figcaption></figure>).join(""); const ic=d=><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="${d}" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>; const html=<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Reviews | Meeple Mug board game café, Cardiff</title> <meta name="description" content="What our regulars say about Meeple Mug, the Cardiff board game café with over 600 games and a £6 table fee."> <meta property="og:title" content="Reviews | Meeple Mug board game café, Cardiff"> <meta property="og:description" content="Over 600 games, a £6 table fee, and reviews from the people who stayed too long."> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,800&family=Inter:wght@400;500;600&display=swap"> <link rel="stylesheet" href="style.css"> </head> <body> <a class="skip" href="#main">Skip to content</a> <main id="main"> <section class="t-sec fan-sec" id="deck" aria-labelledby="deck-h"><div class="sec-head"><h2 id="deck-h">A good <em>hand</em> of reviews</h2></div><div class="wrap fd-in"><div class="fd-words"><p class="sub">Meeple Mug, Cardiff: over 600 games, £6 table fee. Here is what our regulars say.</p><div class="fd-ctl"><button class="ctrl" type="button" data-fd="-1">${ic("M15 5l-7 7 7 7")}<span class="sr-only">Previous review</span></button><button class="ctrl" type="button" data-fd="1">${ic("M9 5l7 7-7 7")}<span class="sr-only">Next review</span></button></div></div><div class="fd" aria-live="polite">${cards}</div></div></section> </main> <script src="script.js" defer></script> </body> </html> ; require("fs").writeFileSync("index.html",html)' node .claude/skills/fanned-quote-deck/scripts/check.mjs index.html --out check 2>&1 | tail -40
  6. cd .; cp .claude/skills/fanned-quote-deck/reference/script.js script.js; cp .claude/skills/fanned-quote-deck/reference/style.css style.css sed -i '' -e 's/--bg:#B0301E/--bg:#0E4F55/;s/--ink:#FFF6F0/--ink:#FFF8EC/;s/--muted:#FFE1D8/--muted:#CFE9E3/;s/--line:#E8705F/--line:#3F8D8D/;s/--accent:#1F1410/--accent:#10201F/;s/--on-accent:#FFF6F0/--on-accent:#FFF8EC/;s/--em:#FFE17A/--em:#F2B632/;s/--card-ink:#1F1410/--card-ink:#10201F/;s/--card-muted:#5C4A42/--card-muted:#4A4A3F/;s/border:2px solid #1F1410/border:2px solid #10201F/' style.css cat >> style.css <<'EOF' /* Meeple Mug additions */ .face.initial{display:grid;place-items:center;background:var(--accent);color:var(--em);font-family:var(--font-display);font-weight:800;font-size:1.3rem;line-height:1} .fd-c blockquote p{font-size:1.05rem;line-height:1.55} .ctrl:focus-visible{outline:3px solid var(--ink)} .fd-ctl .ctrl:hover{border-color:var(--ink)} EOF cat > /tmp/gen.mjs <<'EOF' import fs from "node:fs"; const q=[["Came for one game, stayed six hours. The cheese toastie at hour four saved us.","Rhys","#FFF8EC"],["The staff taught us a new game in five minutes. We bought it on the way out.","Priya","#FFE29A"],["Perfect first date spot. Nothing breaks the ice like losing a word game together.","Callum","#C9F0DC"],["They still knew which of the 600 games my kids would love. We’re back every half term.","Siobhán","#CFE6FF"],["Quiet on weekday afternoons, buzzing on Fridays. Both are great.","Tomasz","#F6D5C3"]]; const cards=q.map(([t,n,c],i)=><figure class="fd-c" style="--c:${c}" data-pos="${i}"><blockquote><p>${t}</p></blockquote><figcaption class="who"><span class="face initial" aria-hidden="true">${n[0]}</span><span><b>${n}</b></span></figcaption></figure>).join(""); const ic=d=><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="${d}" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>; fs.writeFileSync("index.html",<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Reviews | Meeple Mug board game café, Cardiff</title> <meta name="description" content="What our regulars say about Meeple Mug, the Cardiff board game café with over 600 games and a £6 table fee."> <meta property="og:title" content="Reviews | Meeple Mug board game café, Cardiff"> <meta property="og:description" content="Over 600 games, a £6 table fee, and reviews from the people who stayed too long."> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,800&family=Inter:wght@400;500;600&display=swap"> <link rel="stylesheet" href="style.css"> </head> <body> <a class="skip" href="#main">Skip to content</a> <main id="main"> <section class="t-sec fan-sec" id="deck" aria-labelledby="deck-h"><div class="sec-head"><h2 id="deck-h">A good <em>hand</em> of reviews</h2></div><div class="wrap fd-in"><div class="fd-words"><p class="sub">Meeple Mug, Cardiff: over 600 games, £6 table fee. Here is what our regulars say.</p><div class="fd-ctl"><button class="ctrl" type="button" data-fd="-1">${ic("M15 5l-7 7 7 7")}<span class="sr-only">Previous review</span></button><button class="ctrl" type="button" data-fd="1">${ic("M9 5l7 7-7 7")}<span class="sr-only">Next review</span></button></div></div><div class="fd" aria-live="polite">${cards}</div></div></section> </main> <script src="script.js" defer></script> </body> </html> ); EOF node /tmp/gen.mjs && node .claude/skills/fanned-quote-deck/scripts/check.mjs index.html --out check 2>&1 | tail -40
  7. cp .claude/skills/fanned-quote-deck/reference/script.js script.js && cp .claude/skills/fanned-quote-deck/reference/style.css style.css && sed -i '' -e 's/--bg:#B0301E/--bg:#0E4F55/;s/--ink:#FFF6F0/--ink:#FFF8EC/;s/--muted:#FFE1D8/--muted:#CFE9E3/;s/--line:#E8705F/--line:#3F8D8D/;s/--accent:#1F1410/--accent:#10201F/;s/--on-accent:#FFF6F0/--on-accent:#FFF8EC/;s/--em:#FFE17A/--em:#F2B632/;s/--card-ink:#1F1410/--card-ink:#10201F/;s/--card-muted:#5C4A42/--card-muted:#4A4A3F/;s/border:2px solid #1F1410/border:2px solid #10201F/' style.css && head -c 400 style.css
  8. ./index.html
  9. ./style.css
  10. ./script.js
  11. node .claude/skills/fanned-quote-deck/scripts/check.mjs index.html --out check
  12. ./check/1440.png
  13. ./check/390.png
  14. Done

12 Nov 2026 · Claude Code 2.1.322 with Claude Sonnet 5.5 · 1 min 17 s · $0.26 of API use

Questions

Is Fanned Quote Deck free?

No. Fanned Quote Deck costs $9.99 once and stays in your Recaply account, or it comes with the Recaply plan ($19.99 a month), which opens every premium skill and prompt.

Which agents can use Fanned Quote Deck?

Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot and OpenCode.

What do I get when I buy Fanned Quote Deck?

A ZIP of the whole skill folder (32 KB): the SKILL.md your agent follows and its 6 other files, the references, templates and scripts it uses. You download it from this page whenever you need it, and install it in Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot and OpenCode. The Recaply plan opens it too, with every other premium skill and prompt.

How do I install Fanned Quote Deck?

Buy it, then download the ZIP from this page. For Claude Code, unzip it into .claude/skills/ in your project. For Codex, Cursor and Gemini CLI, unzip it and run npx skills add ./fanned-quote-deck with your agent's flag.

What do I get from Fanned Quote Deck?

One HTML file with its CSS inside: no build step, no framework. Testimonials as a fanned deck of cards. Checked at phone and desktop widths.

What does Fanned Quote Deck need?

Node 20+ and Chrome, and no API key. Each use costs nothing beyond your agent.

How big is Fanned Quote Deck?

7 files, about 21,076 tokens in all. The SKILL.md is about 2,199 tokens, and your agent reads it only when the job fits.

What does a run cost?

Our 1 runs took 1 min 17 s to 1 min 17 s and $0.26 to $0.26 of API use each, in Claude Code with claude-sonnet-5-5. On a Claude plan, a run counts toward your usage instead.

Do I have to name Fanned Quote Deck to use it?

Type /fanned-quote-deck first to make sure it loads. Without it, Claude Code may judge a small job simple enough to do without the skill.