Skip to content
Recaply.
Sign inSubmit a tool

DirectorySkills

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

Minimal Quote Carousel

A quiet carousel: one centred serif quote at a time, the name in small capitals, dot buttons and a pause control.

$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 a minimal testimonial carousel into your own project: a single centred italic serif quote on plain ivory, the name in small capitals under it, a row of small dots to choose a quote, and a pause control; it moves on every 7 seconds unless paused or with reduced motion. 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 premium, editorial or minimalist site wants testimonials that barely interrupt, or someone asks for a simple, minimal or elegant quote carousel.

By RecaplyUpdated 12 Nov

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

New to skills? How to install a skill

Similar skills

All 735 skills

Who Minimal Quote Carousel is for

What you get

  • One HTML file with its CSS inside: no build step, no framework
  • A minimal testimonial carousel
  • Checked at phone and desktop widths

Good fit

  • When a premium, editorial or minimalist site wants testimonials that barely interrupt

Not for

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

About this skill

You say

Add a simple, elegant rotating quote section to our boutique hotel site. Quotes in brief.md.

It said back

I've added the rotating quote section. The check passes, and the 390px and 1440px screenshots look right. I didn't look at the 768px one.

There was no existing site in the folder, so I built a small standalone page: a header with the hotel name, the quote section, and a footer. If you have a real site, the section drops into its page. Copy the markup from index.html, plus style.css and script.js.

Show more

What it did in run 1

  1. minimal-quote-carousel
  2. ls -la && cat brief.md
  3. cd ./.claude/skills/minimal-quote-carousel && ls -R . | head -30 && cat reference/index.html reference/style.css reference/script.js
  4. cd . && cat > index.html <<'EOF' <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>The Linden House · Boutique hotel, Marylebone</title> <meta name="description" content="The Linden House, a boutique hotel of twelve rooms in Marylebone, London. Read what our guests say."> <meta property="og:title" content="The Linden House · Boutique hotel, Marylebone"> <meta property="og:description" content="Twelve rooms in Marylebone, London. Read what our guests say."> <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=Cormorant+Garamond:ital,wght@0,500;1,500&family=Karla:wght@400;600&display=swap"> <link rel="stylesheet" href="style.css"> </head> <body> <a class="skip" href="#main">Skip to content</a> <header class="site-head"><p class="brand">The Linden House</p></header> <main id="main"> <section class="t-sec" id="guests" aria-labelledby="guests-h"> <h2 id="guests-h" class="sr-only">What our guests say</h2> <div class="wrap mc"> <div class="mc-stage" aria-live="polite"> <figure class="mc-q on"><blockquote><p>The quietest night’s sleep I have had in London.</p></blockquote><figcaption>Clara, Oslo</figcaption></figure> <figure class="mc-q" hidden><blockquote><p>Breakfast in the garden room felt like a weekend in the country.</p></blockquote><figcaption>James, Edinburgh</figcaption></figure> <figure class="mc-q" hidden><blockquote><p>They remembered how I take my tea on the second morning.</p></blockquote><figcaption>Aiko, Kyoto</figcaption></figure> <figure class="mc-q" hidden><blockquote><p>Twelve rooms, and every one of them feels like the best one.</p></blockquote><figcaption>Marc, Montreal</figcaption></figure> </div> <div class="mc-ctl"> <button class="mc-dot" type="button" aria-pressed="true" data-i="0"><span class="sr-only">Quote 1</span></button> <button class="mc-dot" type="button" aria-pressed="false" data-i="1"><span class="sr-only">Quote 2</span></button> <button class="mc-dot" type="button" aria-pressed="false" data-i="2"><span class="sr-only">Quote 3</span></button> <button class="mc-dot" type="button" aria-pressed="false" data-i="3"><span class="sr-only">Quote 4</span></button> <button class="mc-pause" type="button" aria-pressed="false" data-pause>Pause</button> </div> </div> </section> </main> <footer class="site-foot"><p>The Linden House · Marylebone, London</p></footer> <script src="script.js" defer></script> </body> </html> EOF cat > style.css <<'EOF' :root{--bg:#FAF7F0;--surface:#FFFFFF;--ink:#221F1A;--muted:#5F594F;--line:#D9D2C3;--accent:#221F1A;--on-accent:#FFFFFF;--em:#221F1A;--font-display:'Cormorant Garamond',Georgia,serif;--font-body:'Karla',system-ui,sans-serif} *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:1.0625rem;line-height:1.6;-webkit-font-smoothing:antialiased} h1,h2,h3{font-family:var(--font-display);font-weight:500;line-height:1.1;margin:0} p{margin:0} blockquote,figure{margin:0} button{font:inherit;color:inherit} :focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px} [hidden]{display:none!important} .sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} .skip{position:absolute;left:-9999px;top:12px;z-index:100;background:var(--ink);color:var(--bg);padding:.6rem 1rem;border-radius:8px;text-decoration:none} .skip:focus{left:12px} .wrap{width:min(100% - 40px,760px);margin-inline:auto} .site-head,.site-foot{text-align:center;padding:32px 20px} .brand{font-family:var(--font-display);font-size:1.6rem;letter-spacing:.02em} .site-foot{color:var(--muted);font-size:.95rem} main{min-height:60vh;display:grid;align-items:center} .t-sec{padding-block:clamp(64px,9vw,120px)} /* quote carousel */ .mc{text-align:center} .mc-stage{display:grid;min-height:14rem;align-items:center} .mc-q{grid-area:1/1} .mc-q blockquote{font-family:var(--font-display);font-style:italic;font-size:clamp(1.7rem,3.6vw,2.6rem);line-height:1.3;font-weight:500;text-wrap:balance} .mc-q figcaption{margin-top:1.4rem;font-size:.9rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)} .mc-q.on{animation:mcin .6s ease} @keyframes mcin{from{opacity:0}} .mc-ctl{display:flex;justify-content:center;align-items:center;gap:2px;margin-top:2rem} .mc-dot{width:44px;height:44px;border:0;background:none;cursor:pointer;display:grid;place-items:center} .mc-dot::before{content:"";width:10px;height:10px;border-radius:50%;border:1.5px solid var(--ink)} .mc-dot[aria-pressed=true]::before{background:var(--ink)} .mc-pause{margin-left:1rem;min-height:44px;padding:0 .9rem;border:0;background:none;font-size:.9rem;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;color:var(--muted);text-decoration:underline;text-underline-offset:.3em} @media (max-width:759px){.mc-ctl{flex-wrap:wrap}.mc-pause{margin-left:0;flex-basis:100%;margin-top:16px}} @media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}} EOF cat > script.js <<'EOF' // Rotates every 7 seconds unless paused, hovered, focused or reduced motion is on. const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)'); const mq = [...document.querySelectorAll('.mc-q')]; const dots = [...document.querySelectorAll('.mc-dot')]; const mcp = document.querySelector('[data-pause]'); const mcs = document.querySelector('.mc'); let mat = 0, stopped = reduceMotion.matches, hold = false; const mshow = (i) => { mq[mat].hidden = true; mq[mat].classList.remove('on'); mat = i; mq[i].hidden = false; mq[i].classList.add('on'); dots.forEach((d, k) => d.setAttribute('aria-pressed', String(k === i))); }; dots.forEach((d, i) => d.addEventListener('click', () => mshow(i))); mcp.hidden = stopped; mcp.addEventListener('click', () => { stopped = !stopped; mcp.setAttribute('aria-pressed', String(stopped)); mcp.textContent = stopped ? 'Play' : 'Pause'; }); mcs.addEventListener('mouseenter', () => { hold = true; }); mcs.addEventListener('mouseleave', () => { hold = false; }); mcs.addEventListener('focusin', () => { hold = true; }); mcs.addEventListener('focusout', () => { hold = false; }); setInterval(() => { if (!stopped && !hold && !document.hidden) mshow((mat + 1) % mq.length); }, 7000); EOF node .claude/skills/minimal-quote-carousel/scripts/check.mjs index.html --out check 2>&1 | tail -40
  5. ./index.html
  6. ./style.css
  7. ./script.js
  8. cd . && node .claude/skills/minimal-quote-carousel/scripts/check.mjs index.html --out check 2>&1 | tail -40
  9. ./check/390.png
  10. ./check/1440.png
  11. Done

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

Questions

Is Minimal Quote Carousel free?

No. Minimal Quote Carousel 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 Minimal Quote Carousel?

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

What do I get when I buy Minimal Quote Carousel?

A ZIP of the whole skill folder (31 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 Minimal Quote Carousel?

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 ./minimal-quote-carousel with your agent's flag.

What do I get from Minimal Quote Carousel?

One HTML file with its CSS inside: no build step, no framework. A minimal testimonial carousel. Checked at phone and desktop widths.

What does Minimal Quote Carousel need?

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

How big is Minimal Quote Carousel?

7 files, about 19,860 tokens in all. The SKILL.md is about 2,121 tokens, and your agent reads it only when the job fits.

What does a run cost?

Our 1 runs took 1 min 2 s to 1 min 2 s and $0.20 to $0.20 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 Minimal Quote Carousel to use it?

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