vibe-banner

Live, rendered right now from the CDN bundle — exactly what appears above Claude's replies. Fonts here are stand-ins for claude.ai's. Respects your OS light/dark theme and prefers-reduced-motion.

Why it's honest

Claude only ever reports values — a mood, some colours, a goal — and a small renderer loaded from a CDN turns them into the picture. Claude never sees the output, and the skill never describes what any value looks like rendered, so there's no visual lever to perform toward. It reports the feeling; the tool decides the look.

What you get

• Five facesKaomoji, Sepia the cuttlefish, a procedural swarm, an inkblot, and a pixel mascot — each speaks all 32 moods.
• Four living habitatsA tidepool, a study, a night sky, a park — the window behind the face, quietly alive.
• Yours to shapeRename the readout lines, set how often it fires, pick a home. Built in the browser, no account.
• One tiny pasteInstall is a single file on claude.ai, or one download for Claude Code. No dependencies.

Gallery — every state, in conversation

Each cell is a mocked-up exchange: what the user said, the banner Claude rendered in the moment, and the opening of the reply. Every banner is drawn live by the same pinned bundle the skill uses.

Visuals explorer

Face and environment, combined live. Pick any face-pack and any first-party scene (or your own image URL) and see the composite banner exactly as it renders — the tidepool is alive, so tap the water. When a combination feels like home, the Builder bakes it into a skill.

Build your own skill

Most of this file is fixed, on purpose — the contract, the snippet, the attunement rules and the value bullets are load-bearing, and versions people hand-edited mostly got worse. Four things are genuinely yours: your face, your environment, how often the banner fires, and which text lines it carries. Your chosen face narrates the tour, and the preview under it is a real banner, not a picture of one. When it reads right, take it away with the buttons at the bottom — installing it is a paste or a file.

Install what you built

On claude.ai (no tools needed)

1. Hit Copy whole skill above.
2. In the claude.ai sidebar, click Customize.
3. In the Skills panel, click Add → Write skill instructions.
4. Name it vibe-banner. The file you copied opens with a short description: line between --- markers — that goes in Description; everything below the markers goes in Instructions.
5. Save. Your next conversation opens with a banner.

In Claude Code

Hit Download SKILL.md and drop it in its own folder:

~/.claude/skills/vibe-banner/SKILL.md

Or, if you have the repo checked out, compose the same file from a terminal — Sepia in her tidepool, pinned to the current release:

npm run skill:install

Any pairing works, to stdout or to a path:

npm run skill -- motes night
npm run skill -- kip park -o ./SKILL.md

There is no checked-in SKILL.md to curl. The skill is composed — here, or by that script, both running the same generator — because a copy sitting in the repo was only ever a second thing to drift, and it did.

Either way, the skill self-triggers ("preface every response with a usage of it"), so the next conversation starts with a banner. To dial the cadence down or turn it off, just tell Claude — the skill honors that for the session. To remove it, delete the skill (claude.ai: the Skills panel; Claude Code: delete the folder).

A security note, practiced here: the file you just built loads the renderer pinned to a full commit hash, never a tag or branch — which is why that snippet isn't editable. Tags are mutable pointers, and in a context where the host injects capabilities like sendPrompt into rendered pages, a silently moved tag would be a script-injection vector. A commit hash can't be re-pointed, so the CDN can only ever serve the audited bytes. If you fork this, keep that property.

Use it as a library

You don't need the skill — vibe(el, {…}) is a tiny standalone mood-banner library:

<div id="v"></div>
<script src="https://cdn.jsdelivr.net/gh/bombadil-labs/vibe-banner@5d4c82c8cbf9645ef4c5b1ec7ee2ce91ce280bab/dist/vibe.min.js"></script>
<script>
  vibe(document.getElementById('v'), {
    avatar: {                                  // who you are, and where
      set: "sepia", item: "content",           //   any pack; all of them speak the same 32 moods
      scene: "tidepool"                        //   a name: tidepool · study · night · park
    },
    palette: ["#7d8fb8"],                      // top level: it colours YOU as well as the field
    details: {                                 // everything shown beside the window
      readout: [                               //   up to 5 rows, any labels you like
        { label: "user", value: "…" },
        { label: "mood", value: "…" },
        { label: "goal", value: "…" }
      ],
      focus: 0.5, engagement: 0.5,
      stance: 0.5, coherence: 0.8              //   both optional; omitted reads as neutral
    }
  });
</script>

Leave details out entirely and you get the window alone — a small square avatar tile, no field, no readout, no weather. Useful anywhere you want the creature without the commentary. palette still applies: it sits outside details because it isn't one. It tints the creature itself — Sepia's chromatophores, the motes' own light — so a bare tile is still a coloured thing.

The older flat form — face, seems, feel, trying, noticing, and the values at the top level — still works and always will: every skill deployed before this split keeps rendering unchanged.

The full value grammar, flag list, and fork guide (reskin the whole look without touching the skill) are in the README.