DEV Community

Cover image for I pointed my Claude skill at 3 famous repos, and it animated their READMEs 🎨
Shouvik Palit
Shouvik Palit

Posted on

I pointed my Claude skill at 3 famous repos, and it animated their READMEs 🎨

#ai #opensource #showdev #github

A README has about two seconds to tell a stranger what a project does. Most banners spend those two seconds on a logo and a gradient. 🫠

I built living-canvas to do better: it's a Claude skill that reads a repo's README, finds the one idea at its heart, and turns it into a short animated story, left to right: the problem → what the project does → the result.

To see if it holds up, I pointed it at three projects I love. 👇

🐴 Ponytail: the lazy senior dev

Ponytail by Dietrich Gebert is a skill that makes your AI coding agent think like the laziest senior dev in the room, so it writes less code.

The story comes straight from Ponytail's README. You ask for a date picker. Without Ponytail, the agent builds a whole calendar by hand: 335 lines. Ponytail first climbs its ladder of checks (does this need to exist? is it already in the codebase? the standard library? a native platform feature?) and finds that every browser already has a date picker. Result: 10 lines. 🪶

🦙 Ollama: open models on your machine

Ollama lets you run open models locally, with complete privacy.

On the left, every prompt (and your data) goes to someone else's cloud, with an API key and a meter running. In the middle, one command: ollama run gemma4. On the right, the model answers on your own machine at localhost:11434. No key, no cloud, and it works offline. 🔒

Ollama

⚡ uv: one tool, 10–100x faster

uv by Astral is an extremely fast Python package and project manager, written in Rust.

Six tools for one Python project (pip, pip-tools, pipx, poetry, pyenv, virtualenv) become one binary. uv add ruff resolves and installs in a blink, and the speed bars show uv's 10–100x lead over pip. 🏎️

uv

🧩 How it works

Every banner follows the same rules:

  • 🖼️ One self-contained SVG, around 8 KB each for these three
  • 🚫 No JavaScript, no external fonts or images, so it renders right inside a GitHub README
  • 🏷️ Every stage is labeled in plain words, so a single screenshot tells the whole story
  • 📖 Real numbers from the README, never invented ones
  • ♿ Respects reduced motion: viewers who turn animation off see all three stages at once

🚀 Try it on your repo

In Claude Code:

git clone https://github.com/shouvik12/living-canvas ~/.claude/skills/living-canvas
Enter fullscreen mode Exit fullscreen mode

Then ask:

/living-canvas https://github.com/you/your-repo
Enter fullscreen mode Exit fullscreen mode

Commit the SVG it gives you and add one line to the top of your README:

<p align="center"><img src="assets/your-banner.svg" alt="Your project" width="100%"></p>
Enter fullscreen mode Exit fullscreen mode




🔗 Links

If you maintain one of these and want the SVG for your README, it's yours. Just say the word. 🙌

Top comments (0)