Skip to content
Skillpedia
General coding280k · #301

token-card

Helps your agent create a visual card showing coding token usage. Useful for displaying progress in a README or sharing coding activity.

What it does

Creates a visual card (SVG image) showing how much you've used AI tools for coding, its equivalent cost, and your recent progress. This card is saved directly into your code files.

When to use it

  • ✓When you want to display your AI coding assistance usage in your project.
  • ✓When you want an easily shareable summary of your AI coding activity.
  • ✓When you want to see an AI usage summary without relying on an online service.

Example of what to ask your AI

“Generate a token usage card for my project.”

Want more? Open the sections below.

How to use

The easiest way: copy the message below and paste it into Claude, ChatGPT, Cursor or any AI. It reads the skill and follows the instructions.

Skill link

https://github.com/affaan-m/ECC/blob/main/skills/token-card/SKILL.md

Ready-to-paste message

Use this skill to help me: https://github.com/affaan-m/ECC/blob/main/skills/token-card/SKILL.md Read the SKILL.md file at that link and follow its instructions for my task.
How it works

The tool checks the usage logs of your AI programs (like Claude Code, Gemini, etc.) on your computer. It then generates an image (SVG) with this information and saves it in a folder within your project.

Installation

Easiest way: copy the skill link and paste it into Claude, ChatGPT or Cursor asking it to follow the instructions.

In the terminal (Claude Code, Codex, Cursor), in your project folder:

npx skills add affaan-m/ECC --skill token-card

Or download just the file:

curl -L https://raw.githubusercontent.com/affaan-m/ECC/main/skills/token-card/SKILL.md -o SKILL.md
Technical content (original SKILL.md)

Original text by the author, straight from GitHub.

Token Card

Produce an SVG card summarising this machine's AI coding agent usage — total tokens, equivalent API cost, current streak, and the split across agents — and write it into the working tree as a file the README can reference.

The card is a committed artifact rather than a hosted image, so it renders from the repository itself and does not depend on a third-party endpoint staying up.

When to Activate

  • Someone wants a usage figure visible in a README or docs page.
  • Someone asks for a shareable summary of their agent activity across tools.

Use /cost-report instead when the question is "what did I spend this week". The two read different sources and produce different things:

/cost-report Token Card
Source ~/.claude/metrics/costs.jsonl, written by ECC's stop:cost-tracker hook The agents' own session logs
Agents Claude Code Claude Code, Codex, Gemini CLI, OpenCode
Output Terminal summary, optional CSV An SVG file committed to the repo

The tool this runs

@tokenchit/cli, MIT licensed: https://github.com/iyashjayesh/tokenchit

Pinned to an exact version, deliberately. @latest resolves to whatever the registry currently serves, and this tool reads local session logs — so a compromised future release would be executed with access to them before anyone had reviewed it. Pin, and raise the pin knowingly:

TOKENCHIT_VERSION=0.10.0

To check the pinned artifact before running it the first time:

npm view @tokenchit/cli@0.10.0 dist.integrity dist.tarball

Workflow

  1. Ask before the first download. npx fetches the package from the npm registry and executes it. That is a remote download of code that will read local logs, so get explicit confirmation from the user before the first run on a machine. If they decline, stop here and say what would have run.

  2. Configure, unless this is a dry run. If .tokenchit.json is absent, run:

    npx -y @tokenchit/cli@0.10.0 init
    

    It detects which agents have logs on this machine and records them. The file is meant to be committed and never contains a credential.

    Skip this entirely when the user passed --dry-run, and report that .tokenchit.json would be created. A preview that writes a config file is not a preview.

  3. Render the card. The bare command writes to the configured output — tokenchit.svg unless .tokenchit.json names another path:

    npx -y @tokenchit/cli@0.10.0 sync
    

    Append only the flags the user actually asked for, each spelled exactly as below. Do not copy a placeholder into the command — sync ignores an unrecognised positional argument rather than refusing it, so a bracketed [--dry-run] reaches the CLI as junk and the card is written anyway, which is the opposite of what was asked.

    Flag Effect
    --out <path> Write somewhere other than the configured output
    --theme auto | light | dark Card theme; auto adapts to the reader's system
    --dry-run Print what would be written and touch nothing

    sync reads local files and sends nothing: no prompts, no code, no file contents leave the machine, and it transmits nothing to any server. The npx invocation around it is a registry download — that is the network access in this workflow, and step 1 is where it is agreed.

  4. Report and offer. Print the figures it produced — tokens, equivalent cost, streak, per-agent split — and the path written. If the repository has a README that does not yet reference the card, offer to add:

    ![tokenchit](./tokenchit.svg)
    

    sync prints the path relative to the repository root. A Markdown image resolves relative to the file it sits in, so rewrite it for the README being edited: a card at docs/usage.svg is ./docs/usage.svg from the root README but ../usage.svg from docs/zh-CN/README.md. Pasting the printed path into a nested README points at docs/zh-CN/docs/usage.svg and renders broken.

    Do not edit the README without being asked.

Stop after step 4. Publishing to the public leaderboard is a separate publish command that requires explicit opt-in, and is not part of this workflow — run it only if the user asks for it by name. unpublish removes the row and the account again.

Output

…

FAQ

What information appears on the card?

The total number of tokens used, the approximate cost in money, your current usage streak, and the breakdown of usage across different AI tools.

Do I need to install anything?

The tool uses `npx`, which downloads the necessary program on the fly without permanently installing anything on your computer. You only need to have Node.js installed.

Does this tool send my data anywhere?

No. It only reads local logs on your computer and generates the image. Nothing is sent to the internet, except for the initial download of the program.

Details

Original description by the author

Render a token-usage stat card from local Claude Code, Codex, Gemini CLI, and OpenCode session logs and commit it into the repository as a file. Use when someone wants a current usage figure in a README, or asks for a shareable card of their coding-agent activity.

repo: affaan-m/ECC

Popularity

GitHub stars
280k
Ranking position
#301
License
MIT
Updated
10/15/2026

Is this skill useful?

0

Sign in to vote.

Comments

  • …

More skills from this repository

Similar skills