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 Opus 5.51 real run, 9 Nov
Needs
Node 20+Chrome
Licence
Recaply licence

Before and After Carousel

Each change as a before slide then an after slide, as PNGs and a LinkedIn PDF, in four looks.

$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.

Makes before and after carousels: each change shown as a "Before" slide followed by its "After" slide, with their own screenshots or photos where they have them. Saves every slide as a PNG (1080x1350 or 1080x1080) for Instagram, Threads and LinkedIn, and joins them into one PDF for a LinkedIn document post. Comes with 4 looks (minimal, aurora, papercut, magazine), a slide counter, a swipe cue and their handle on every slide. Good for redesigns, makeovers, rewrites, renovations, process changes and product updates. Every word is set in real type and checked to fit; no picture model, no key and no cost. Use when someone wants a before and after carousel, a redesign or makeover post, a "what changed" swipe post, or wants to show an improvement as slides.

By RecaplyUpdated 11 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 Before and After Carousel is for

What you get

  • Every slide as a PNG, plus one PDF for a LinkedIn document post
  • Slide numbers, your handle and a swipe cue on each slide
  • Words checked to fit, slide by slide

Good fit

  • A before and after carousel
  • A redesign or makeover post
  • A "what changed" swipe post

Not for

  • Photos or drawn illustrations
  • Making slides look like another brand

About this skill

You say

Make a before and after carousel showing our app redesign. The old and new screenshots are in the folder.

It said back

I made a 6-slide Tasklark carousel from your two screenshots. I looked at every slide: all the text fits and the script gave no warnings. On the first render the cover headline ended in a double full stop ("1 tap.."), so I fixed that and re-rendered the cover.

  • PDF for LinkedIn: carousel/carousel.pdf
  • PNGs for Instagram or Threads: carousel/slides/01.png to 06.png (1080×1350, 4:5, saved at 2× resolution)
  • Settings file: carousel/carousel.json, if you want to change any wording
Show more

What it did in run 1

  1. before-after-carousel
  2. ls -laR | grep -v node_modules | head -50; node .claude/skills/before-after-carousel/scripts/check.mjs
  3. ./notes.md
  4. ./old.png
  5. ./new.png
  6. image|cover|contain
  7. mkdir carousel && cp old.png new.png carousel/ && cat > carousel/carousel.json <<'EOF' { "look": "minimal", "size": "4:5", "name": "Tasklark", "handle": "@tasklark", "slides": [ { "layout": "cover", "label": "Before and after", "title": "We redesigned Tasklark. Adding a task is now 1 tap.", "body": "From a desktop dashboard to phone-first. Swipe to see it." }, { "layout": "image", "label": "Before", "title": "A desktop home screen", "body": "Sidebar, stat cards and every task at once.", "image": "old.png" }, { "layout": "image", "label": "After", "title": "A phone-first home screen", "body": "Just what's on today, sized for your thumb.", "image": "new.png" }, { "layout": "stat", "label": "Before", "value": "3 taps", "title": "to add a task, about 9 seconds on average", "source": "Tests with 30 users, Oct 2026" }, { "layout": "stat", "label": "After", "value": "1 tap", "title": "to add a task, about 4 seconds on average", "source": "Tests with 30 users, Oct 2026" }, { "layout": "end", "label": "Next", "title": "Try the new Tasklark on your phone", "body": "Follow @tasklark for more updates" } ] } EOF cd carousel && node ../.claude/skills/before-after-carousel/scripts/carousel.mjs carousel.json
  8. ./carousel/carousel.json
  9. cp old.png new.png carousel/ && cd carousel && node ../.claude/skills/before-after-carousel/scripts/carousel.mjs carousel.json
  10. W=.; cp $W/old.png $W/new.png $W/carousel/ && node $W/.claude/skills/before-after-carousel/scripts/carousel.mjs $W/carousel/carousel.json
  11. cp ./old.png ./new.png ./carousel/ && node ./.claude/skills/before-after-carousel/scripts/carousel.mjs ./carousel/carousel.json
  12. ./carousel/slides/01.png
  13. ./carousel/slides/02.png
  14. ./carousel/slides/03.png
  15. ./carousel/slides/04.png
  16. ./carousel/slides/05.png
  17. ./carousel/slides/06.png
  18. ./carousel/carousel.json
  19. node ./.claude/skills/before-after-carousel/scripts/carousel.mjs ./carousel/carousel.json --only 1
  20. ./carousel/slides/01.png
  21. Done

9 Nov 2026 · Claude Code 2.1.322 with Claude Opus 5.5 · 1 min 3 s · $0.59 of API use

Questions

Is Before and After Carousel free?

No. Before and After 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 Before and After Carousel?

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

What do I get when I buy Before and After Carousel?

A ZIP of the whole skill folder (29 KB): the SKILL.md your agent follows and its 8 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 Before and After 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 ./before-after-carousel with your agent's flag.

What do I get from Before and After Carousel?

Every slide as a PNG, plus one PDF for a LinkedIn document post. Slide numbers, your handle and a swipe cue on each slide. Words checked to fit, slide by slide.

What does Before and After Carousel need?

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

How big is Before and After Carousel?

9 files, about 16,648 tokens in all. The SKILL.md is about 2,159 tokens, and your agent reads it only when the job fits.

What does a run cost?

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

Do I have to name Before and After Carousel to use it?

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