Skip to content
Recaply.
Sign inSubmit a tool

DirectorySkills

Editorial quote spread: 1440, made in this run
Run 1Editorial quote spread“Turn our best client story into a magazine-style testimonial section. Details in brief.md, photos in photos/.”
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

Editorial Quote Spread

A magazine-style spread: a huge serif pull quote, a captioned portrait, a short story with a drop cap and two smaller quotes.

$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 an editorial, magazine-style testimonial spread into your own project: a two-column spread on paper white: a huge serif pull quote with a hanging quotation mark on the left; a captioned portrait, a short story with a drop cap and a byline on the right; two smaller quotes under a rule. 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 service, studio, publisher or brand wants a testimonial that reads like a feature article, or someone asks for an editorial or magazine-style testimonial.

By RecaplyUpdated 12 Nov

Install Editorial Quote Spread

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

Read https://recaply.co/skills/editorial-quote-spread/install.md and follow it to install the editorial-quote-spread skill from editorial-quote-spread.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 Editorial Quote Spread is for

What you get

  • One HTML file with its CSS inside: no build step, no framework
  • An editorial, magazine-style testimonial spread
  • Checked at phone and desktop widths

Good fit

  • When a premium service, studio, publisher or brand wants a testimonial that reads like a feature article

Not for

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

About this skill

You say

Turn our best client story into a magazine-style testimonial section. Details in brief.md, photos in photos/.

It said back

The testimonial section is built and passes the automated check at 390, 768 and 1440 px. That check covers overflow, small text, alt text, names, contrast, focus styles, motion, script errors, leftover sample text and icons. I also looked at the 390 and 1440 screenshots. I didn't open the 768 screenshot.

Files (in the project folder)

  • index.html
  • style.css
  • script.js
  • check/390.png, check/768.png and check/1440.png are the screenshots.
Show more

What it did in run 1

  1. editorial-quote-spread
  2. ls -la . photos && cat brief.md
  3. cd ./.claude/skills/editorial-quote-spread && ls -R . | head -30; cat reference/index.html reference/style.css reference/script.js; node scripts/check.mjs --ready
  4. ./photos/ruth-in-the-kitchen.jpg
  5. ./photos/kitchen-detail.jpg
  6. cd . && R=.claude/skills/editorial-quote-spread/reference && cp $R/style.css style.css && cp $R/script.js script.js && cat >> style.css <<'EOF' /* Fenwick additions: photo crops */ .es-pic img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:52% 50%;border-radius:0} .es-more figure.has-pic{display:grid;grid-template-columns:clamp(96px,14vw,140px) 1fr;gap:1.2rem;align-items:start} .es-more figure.has-pic img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:60% 50%} @media (max-width:380px){.es-more figure.has-pic{grid-template-columns:1fr}.es-more figure.has-pic img{max-width:160px}} EOF 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>Ruth and Dev's kitchen in Bath | Fenwick Joinery</title> <meta name="description" content="Sage-green tulipwood cabinets, a single-board oak worktop and a window bench, made in our Frome workshop and fitted in eleven days in a Victorian terrace in Bath."> <meta property="og:title" content="Ruth and Dev's kitchen in Bath | Fenwick Joinery"> <meta property="og:description" content="&ldquo;It feels like it was always meant to be there.&rdquo; A bespoke kitchen for a Victorian terrace in Bath."> <meta property="og:image" content="photos/ruth-in-the-kitchen.jpg"> <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=Playfair+Display:ital,wght@0,500;0,700;1,500&family=Source+Sans+3:wght@400;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" id="feature" aria-labelledby="feature-h"> <div class="sec-head"> <p class="label">Fenwick Joinery · Client story</p> <h2 id="feature-h">A kitchen in <em>Bath</em></h2> </div> <div class="wrap es"> <figure class="es-pull reveal"> <span class="es-mark" aria-hidden="true">“</span> <blockquote><p>It feels like it was always meant to be there.</p></blockquote> </figure> <div class="es-side reveal"> <figure class="es-pic"> <img src="photos/ruth-in-the-kitchen.jpg" width="1216" height="832" alt="Ruth leaning on the oak worktop with a mug, beside the original sash window and sage-green cabinets"> <figcaption>Ruth in her kitchen in Bath, beside the original sash window.</figcaption> </figure> <div class="es-story"> <p class="es-drop">Ruth and Dev bought a Victorian terrace with the kitchen squeezed into the old scullery. They wanted room for six at the table without losing the original sash window or the alcove where the range once stood.</p> <p>We built a run of sage-green cabinets in tulipwood, an oak worktop cut from a single board, and a bench under the window with drawers for the children’s school things. Everything was made in our workshop in Frome and fitted in eleven days.</p> <p class="es-by">Ruth and Dev Shah, Bath</p> </div> </div> <div class="es-more reveal"> <figure class="has-pic"> <img src="photos/kitchen-detail.jpg" width="832" height="1216" alt="An open drawer with dovetail joints in oak, in a sage-green painted front with a brass knob"> <div> <blockquote><p>“Every drawer closes with the same soft thud. Ten years on, it still does.”</p></blockquote> <figcaption>Margaret Hale, Wells</figcaption> </div> </figure> <figure> <blockquote><p>“They worked around a 200-year-old wall that wasn’t straight anywhere.”</p></blockquote> <figcaption>Tom and Jess Avery, Bradford-on-Avon</figcaption> </figure> </div> </div> </section> </main> <script src="script.js" defer></script> </body> </html> EOF node .claude/skills/editorial-quote-spread/scripts/check.mjs index.html --out check 2>&1 | tail -40
  7. cd . && ls; node .claude/skills/editorial-quote-spread/scripts/check.mjs index.html --out check 2>&1 | tail -40
  8. R=.claude/skills/editorial-quote-spread/reference && cp $R/style.css style.css && cp $R/script.js script.js && ls
  9. ./index.html
  10. ./style.css
  11. ./script.js
  12. node .claude/skills/editorial-quote-spread/scripts/check.mjs index.html --out check 2>&1 | tail -40
  13. ./check/1440.png
  14. ./check/390.png
  15. ./style.css
  16. node .claude/skills/editorial-quote-spread/scripts/check.mjs index.html --out check 2>&1 | tail
  17. ./check/1440.png
  18. ./check/390.png
  19. Done

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

Questions

Is Editorial Quote Spread free?

No. Editorial Quote Spread 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 Editorial Quote Spread?

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

What do I get when I buy Editorial Quote Spread?

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 Editorial Quote Spread?

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

What do I get from Editorial Quote Spread?

One HTML file with its CSS inside: no build step, no framework. An editorial, magazine-style testimonial spread. Checked at phone and desktop widths.

What does Editorial Quote Spread need?

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

How big is Editorial Quote Spread?

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

What does a run cost?

Our 1 runs took 1 min 32 s to 1 min 32 s and $0.28 to $0.28 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 Editorial Quote Spread to use it?

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