clawd-emotes-skill

🦀 clawd-skills

Two packaged agent skills (for Claude Code / the Claude Agent SDK) built around Clawd, a little pixel crab. Drop either one into your skills folder and your agent can bring Clawd to life:

Skill	What it does
clawd-emotes	Design animated pixel-crab emotes as pure SVG + CSS keyframes, and export them to looping (transparent) GIFs.
clawd-photo-compositor	Drop Clawd into one of your own photos — sitting on a desk, peeking over a monitor, hugging a cable — via built-in image generation.

---

🦀 clawd-emotes

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

Give Clawd 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.

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 clawd-emotes/references/anatomy.md and clawd-emotes/references/prop-recipes.md.

Build & export yourself

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

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

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

---

📸 clawd-photo-compositor

Put the canonical Clawd into a photo of your own — and keep it looking like Clawd.

Hand the skill a photograph and say what you want (“坐在显示器上” / “hang it on the screen” / “抱住这根线”), and it picks one matching pose from 16 bundled character references, then composites Clawd into your photo through built-in image generation.

Demos

Real outputs — Clawd stays a flat pixel block while the photo stays fully realistic:

_{Napping on a Mac mini (sleep-top) · hugging a power cable (hug) · peeking over a laptop screen (peek-edge).}

The hard part isn’t placement — it’s keeping Clawd Clawd. The skill locks two things on every generation:

• Identity lock — Clawd stays a flat 2D block graphic (wide rectangular body, two block hands, four short legs, fixed proportions) even though the surrounding photo is fully realistic. No 3D-ifying, no rounding, no realistic materials, no stretching.
• Proxy exclusion — each pose reference uses a gray placeholder object to show contact and occlusion only; that gray shape must never be copied into your photo. The real object in your photo replaces it.

Pose library

Bundled references, chosen automatically by what your photo and request imply:

• A-series — plain standing views (front / three-quarter / side / back) for when there’s no physical interaction.
• B-series — contact poses: sit on an edge, peek over/behind, hang, climb, hug, push, pull, stand on top, sleep on top, tiptoe-reach, lean.

Each pose entry in clawd-photo-compositor/references/pose-index.yaml carries its trigger keywords, the object types it fits, and a relation_hint for the occlusion/contact that sells the interaction.

---

Use them as agent skills

Clone whichever skill you want into your skills directory so your agent picks it up:

# emotes
git clone --depth 1 https://github.com/xixicc186/clawd-emotes-skill.git /tmp/clawd-skills
cp -R /tmp/clawd-skills/clawd-emotes           ~/.claude/skills/clawd-emotes
cp -R /tmp/clawd-skills/clawd-photo-compositor ~/.claude/skills/clawd-photo-compositor

Then just ask:

• “add a Clawd emote for stargazing” — or “the hat on the sleeping crab floats, fix it.”
• “把 Clawd 放进这张图里，让它坐在显示器边上” — or “hang Clawd on the top of the screen in this photo.”

Each skill knows the anatomy, the rules, and how to verify its own output.

Repository layout

clawd-emotes/                 # SKILL 1 — SVG+CSS emotes
  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/                   # 24 emotes across festivals / daily / hobbies
  gallery/                    # all 24 emotes as transparent GIFs

clawd-photo-compositor/       # SKILL 2 — drop Clawd into a photo
  SKILL.md                    # the agent skill (workflow + selection rules)
  references/pose-index.yaml  # pose catalog + identity-lock / proxy-exclusion prompts
  assets/poses/               # 16 bundled Clawd character-and-pose references (PNG)
  gallery/                    # example composited outputs

Credits

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

License

MIT — do whatever you like, attribution appreciated. 🦀