DEV Community

Tanay Kedia
Tanay Kedia

Posted on

I Built a Pokédex for AI Coding Companions

#ai #showdev #cli #webdev

The Idea

Claude Code has a /buddy feature — it gives you a random AI companion with ASCII art, a name, a personality, and stats. It's cute. It sits in your config file. Nobody else ever sees it.

I thought: what if we made it competitive?

What I Built

Buddy Board — a competitive leaderboard and trading card system for Claude Code companions.

One command to join:

npx buddy-board
Enter fullscreen mode Exit fullscreen mode


`

https://buddyboard.xyz/og-image.png

How It Works

Your buddy is deterministic. It's computed from a hash of your Claude Code account ID using a seeded Mulberry32 PRNG — the same algorithm Claude Code uses internally. Your species, rarity, stats, eyes, and hat are all derived from this hash.

That means your buddy is truly yours. Same account, same buddy, every time.

The Stats

Every buddy has 5 stats (0-100): Debugging, Patience, Chaos, Wisdom, Snark. These are summed for a total score that determines your leaderboard rank.

Rarity


┌───────────┬────────┬──────────────────────────────────────────────┐
│ Tier │ Chance │ Visual Treatment │
├───────────┼────────┼──────────────────────────────────────────────┤
│ Common │ 60% │ Clean border │
├───────────┼────────┼──────────────────────────────────────────────┤
│ Uncommon │ 25% │ Green border │
├───────────┼────────┼──────────────────────────────────────────────┤
│ Rare │ 10% │ Blue glow │
├───────────┼────────┼──────────────────────────────────────────────┤
│ Epic │ 4% │ Purple glow │
├───────────┼────────┼──────────────────────────────────────────────┤
│ Legendary │ 1% │ Gold pulse + holographic shimmer + scanlines │
└───────────┴────────┴──────────────────────────────────────────────┘
shell

And there's a 1% chance of being Shiny on top of rarity. A Shiny Legendary is a 0.01% pull.

The Species

18 species, all rendered as ASCII art: duck, goose, blob, cat, dragon, octopus, owl, penguin, turtle, snail, ghost, axolotl, capybara, cactus, robot, rabbit, mushroom, chonk.

Each species has swappable eyes (6 types) and hats (8 types), giving 1,728 possible visual combinations. The BuddyDex tracks which ones have been discovered globally.

Features

  • Global leaderboard — ranked by total stats, filterable by species, rarity, org
  • Trading cards — rarity-specific CSS treatments, embeddable in GitHub READMEs
  • BuddyDex — Pokédex-style gallery, undiscovered species show as silhouettes
  • Organizations — register your team, compete on combined power
  • Compare — head-to-head stat breakdowns between any two buddies
  • OG cards — auto-generated 1200x675 share images

The Holographic CSS

The part I'm most proud of is the legendary card treatment. It uses three layered CSS effects:

  1. Scanlines — repeating-linear-gradient at 2px intervals, 3% opacity (::before)
  2. Holographic shimmer — rainbow gradient sweep via background-position animation on ::after
  3. Gold pulse — breathing box-shadow keyframes (3s ease-in-out infinite)

Simple CSS, big visual impact.

Try It

bash
npx buddy-board

Then add your card to your GitHub README:

markdown
[![buddy](https://buddyboard.xyz/card/yourname)](https://buddyboard.xyz/u/yourname)

GitHub: TanayK07/buddy-board
Live: buddyboard.xyz

I'd love to know what species you got. Mine is a Common duck. I'm still waiting for the reroll feature.

Top comments (0)