Coding Wrapped

Your coding agents remember more than you think.

Coding Wrapped turns local Claude Code and Codex history into a private,
pixel-art dashboard about how you work with AI: when you code, how you prompt,
how the agent responds, and what kind of builder you are becoming.

中文说明

What it makes

• A local dashboard with active days, sessions, projects, model mix, tool use,
  prompt rhythm, and longest focused run.
• A two-sentence Coding Overview built from two or three representative
  facts and the working pattern they reveal.
• Playful illustrated insights organized as You did / Agent did / Your
  style, plus one practical suggestion matched against a curated library of
  40 official and practitioner-backed practices, with its sources attached.
• Four persistent insights per generation, each with a different composition
  but the same reference-conditioned pixel-art language.
• A portable local export you can archive or share intentionally.

It is not a transcript viewer, productivity score, employee-monitoring
tool, or cloud analytics service.

See the complete experience

Every screenshot below uses deterministic synthetic data. The dashboard text is
native HTML, while the pixel-art illustration is generated and stored locally.

One insight, end to end

An insight is more than its illustration. Each card includes the behavior that
triggered it, how the agent responded, the working style it suggests, and one
practical next step.

Customizable coding behavior

The factual section can show up to eight modules. People choose which modules
remain visible; the responsive grid reflows around that selection.

Four distinct visual stories

Install

Claude Code and Codex — one command

npx skills add senlindesign/coding-wrapped \
  --skill coding-wrapped \
  --agent claude-code \
  --agent codex \
  --global

The open Agent Skills package is the same on both platforms. No separate
Claude and Codex logic is maintained.

Claude Code plugin marketplace

/plugin marketplace add https://github.com/senlindesign/coding-wrapped
/plugin install coding-wrapped@coding-wrapped

Manual install

Clone the repository, then copy skills/coding-wrapped to one or both folders:

~/.claude/skills/coding-wrapped
~/.agents/skills/coding-wrapped

Use

Start a fresh agent conversation and say:

Build my Coding Wrapped from my local coding history.

Chinese works too:

读取我本地的 Claude Code 和 Codex 记录，生成我的 Coding Wrapped。

The Skill infers the interface language from that prompt. On a normal first
run it asks at most for a short display name and scan permission when permission
was not already explicit.

It then:

1. scans standard local Claude Code and Codex session folders;
2. stores only safe aggregate metrics;
3. writes a Coding Overview and four insights;
4. opens the dashboard on http://127.0.0.1:4173/;
5. gives a short built-in manual.

Later you can ask:

Refresh the facts without changing my insights.
Generate four new insights for this month.
Export my Coding Wrapped.

What stays local

The scanner reads standard session directories on your machine, but generated
state excludes raw transcripts, source code, project names, file paths, email
addresses, URLs, and secrets. The dashboard binds to loopback only. See
PRIVACY.md for the exact boundary.

How the repository is organized

There is one canonical Skill folder. Platform manifests are thin adapters, so
Claude Code and Codex cannot drift into different products.

Validate and package

Python 3.9+ is the only runtime requirement.

make validate
make package

make validate checks both platform manifests, compiles every Python file,
runs the Skill evaluator, and verifies the release layout. make package
creates dist/coding-wrapped.skill.

Node.js is required only for contributors changing the Dashboard UI. Rebuild
the hashed offline bundle from its checked-in source with:

npm --prefix skills/coding-wrapped/assets/frontend-source ci
make frontend

Design principles

1. Local first. The most personal coding data should not require an account
   or hosted analytics service.
2. Facts before stories. Every playful claim must be traceable to an
   aggregate metric.
3. Fun before judgment. The point is recognition, not a score.
4. Show, do not interrogate. Build a useful first version before asking the
   user to configure themes and metrics.
5. One map, details on demand. The main Skill stays short; fragile rules and
   reusable assets live in the files that need them.
6. One visual contract. Every generated illustration is conditioned on one
   of four canonical references and checked against the same pixel scale,
   character language, canvas, and composition rules.

Contributing

Read CONTRIBUTING.md, then run make validate before opening
a pull request.

Landing page

The public product demo lives in landing/. It is a static,
backend-free Vite app built entirely from synthetic data. Its four insight
illustrations are optimized copies of the approved fallback references; no real
session aggregate is included.

npm --prefix landing install
npm --prefix landing run dev
make landing-test

The production site is deployed as Cloudflare Workers Static Assets. From the
landing/ directory, npm run deploy:check validates the release without
publishing and npm run deploy publishes the previously built site. Cloudflare
Workers Builds should use landing/ as its root directory, npm run build as
the build command, and npm run deploy as the deploy command.

External destinations are configured in landing/src/content.js. The support
button links to the verified Buy Me a Coffee page, https://buymeacoffee.com/senlin.

License

MIT. Bundled font licenses are listed in
THIRD_PARTY_NOTICES.md.