🦀 clawd-emotes-skill

Tiny pixel-crab emotes, built as pure SVG + CSS keyframe animations — no sprite sheets, no GIF frames, no canvas. Just <rect>s and @keyframes.

Meet Clawd, a little pixel crab. Give it a prop, a hat, and one good motion, and it comes to life — sipping coffee, strumming a guitar, celebrating a holiday. Every emote is a single inline <svg> animated entirely in CSS, so it's tiny, razor-sharp at any zoom, themeable, and editable as plain text.

This repo is also a packaged agent skill (for Claude Code / the Claude Agent SDK): drop it into your skills folder and your agent can design, fix, and export new Clawd emotes on its own, following the placement rules distilled here.

Gallery

All 24 below are original SVG+CSS animations, exported to transparent looping GIFs.

🎉 Festivals

☕ Daily life

🎨 Hobbies

Why SVG + CSS instead of GIFs?

• Tiny & sharp. A whole emote is a few hundred bytes of markup and stays crisp at any size (image-rendering keeps the pixels hard).
• Themeable. Each card reads CSS variables (--bg, --tagfg, …), so recoloring a scene never touches the art.
• Editable. It's plain text — tweak a coordinate, not a 2000×2000 sprite atlas.
• Exports anywhere. When you do need a GIF (or a transparent one), the scripts step the animation deterministically for a clean, seamless loop.

The trade-off: the crab is a fixed pixel grid, so placement is everything. Almost every "bug" is just an element at the wrong coordinate or in the wrong group — which is exactly what the skill's rules prevent.

The five rules (learned the hard way)

1. Feet live inside the animated body group — otherwise the body bobs away and the feet "detach."
2. A hat's brim must sit on the torso top (y≈6), or it floats in the air.
3. A prop held by a moving arm goes inside that arm's group — or the hand moves and the prop stays behind.
4. Long props need gentle rotation — a far-from-pivot prop on a big swing flings off-screen.
5. Every inline SVG needs a unique class/keyframe prefix — shared cards collide in the global CSS namespace.

Full reasoning and ready-to-paste geometry live in references/anatomy.md and references/prop-recipes.md.

Repository layout

SKILL.md                  # the agent skill (workflow + rules)
references/
  anatomy.md              # base crab geometry, transform-origins, idle animations
  prop-recipes.md         # catalog of props & hats by technique
scripts/
  check.py                # validate SVGs + headless-Chrome render for visual review
  export_gif.js           # one looping GIF per card (deterministic frame stepping)
  export_transparent.js   # same, with a transparent background
assets/
  card-template.html      # the shared scaffold + one fully-built example card
examples/
  clawd-festivals.html    # 10 festival emotes
  clawd-daily.html        # 8 daily-life emotes
  clawd-hobbies.html      # 6 hobby emotes
gallery/                  # all 24 emotes as transparent GIFs

Use it as an agent skill

Clone into your skills directory so your agent picks it up:

git clone https://github.com/xixicc186/clawd-emotes-skill.git ~/.claude/skills/clawd-emotes

Then just ask: "add a Clawd emote for stargazing" or "the hat on the sleeping crab floats — fix it." The skill knows the anatomy, the rules, and how to verify the render.

Build & export yourself

# open any catalog page in a browser to see the live animations
open examples/clawd-hobbies.html

# validate markup + render each card to /tmp/clawd-check for visual review
python3 scripts/check.py examples/clawd-hobbies.html

# export looping GIFs (needs Node + puppeteer-core + ffmpeg)
npm i puppeteer-core
node scripts/export_gif.js examples/clawd-festivals.html out/
node scripts/export_transparent.js examples/clawd-festivals.html out/   # transparent bg

Credits

The pixel-crab character is affectionately inspired by the desk-pet project clawd-on-desk. All emotes in this repo are original SVG + CSS artwork — none of the upstream assets are redistributed here.

License

MIT — do whatever you like, attribution appreciated. 🦀