numman-ali

Cc Wrapped — Design skill for Claude Code

Design community

Generate a personalized Spotify Wrapped-style summary of your Claude Code usage.

How to install Cc Wrapped

This entry records only its repository, not the path inside it, so there is no exact command to give. Open numman-ali/cc-wrapped and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Cc Wrapped does

Generate a personalized Spotify Wrapped-style summary of your Claude Code usage.

Alternatives in Design

  • Brand Guidelines — Apply Anthropic's official brand colors and typography to artifacts 94.1k ★
  • Planning With Files — Claude Code skill implementing Manus-style persistent markdown planning — the workflow pattern behind the $2B 17.4k ★
  • Explanatory Output Style — Educational output mode with insights about implementation choices 14k ★

README

cc-wrapped

**Your year in code, beautifully visualized.**

Credit: Built on top of opencode-wrapped by moddi3 (@moddi3io).

Found this useful? Follow @nummanali for more AI tooling!

Generate a personalized "Spotify Wrapped"-style summary of your [Claude Code](https://claude.ai) usage.

[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE) [![Bun](https://img.shields.io/badge/Bun-%23000000.svg?logo=bun&logoColor=white)](https://bun.sh)

Claude Code Wrapped Example

Installation

Quick Start

Run directly without installing:

npx cc-wrapped # or bunx, or yarn/pnpm dlx

Global Install

npm install -g cc-wrapped # or bun/yarn/pnpm

Then run anywhere:

cc-wrapped

Usage Options

Option Description
--year, -y Generate wrapped for a specific year
--help, -h Show help message
--version, -v Show version number

Features

  • Sessions, messages, tokens, projects, and streaks
  • GitHub-style activity heatmap
  • Top models and providers breakdown
  • Usage cost (when available)
  • Shareable PNG image
  • Inline image display (Ghostty, Kitty, iTerm2, WezTerm, Konsole)
  • Auto-copy to clipboard

Terminal Support

The wrapped image displays natively in terminals that support inline images:

Terminal Protocol Status
Ghostty Kitty Graphics Full support
[Kitty](

Related Skills

Daily Prep — Design skill for Claude Code

Daily Prep

Read today's lectures from Google Calendar, download each session's pre-read material from Moodle, and produce

Design community
Shalva Inbox Agent — Design skill for Claude Code

Shalva Inbox Agent

Shalva – a personal inbox assistant that learns how you write and file email, then gets your inbox down to ope

Design community
Figure Bake — Design skill for Claude Code

Figure Bake

Drive one figure from design brief to manuscript-ready PDF + outline PNG. Three-agent loop (@figure-descriptor

Design community
Claude Powerline — Design skill for Claude Code

Claude Powerline

by Owloops - A vim-style powerline statusline for Claude Code with real-time usage tracking, git integration,

Design community
Cship — Design skill for Claude Code

Cship

⚡ A beautiful, fully customizable statusline for Claude Code - Starship-style TOML config, themeable colours,

Design community
Component Docs — Design skill for Claude Code

Component Docs

Auto-generate component documentation from Figma — props, variants, usage guidelines, spacing specs, and code

Design community

Related Agents

Adaptive Mentor — Development agent for Claude Code

Adaptive Mentor

Dynamic learning style optimization with real-time pedagogical adaptation. Provides personalized mentoring tha

Development community
Style Inspector — Development agent for Claude Code

Style Inspector

Development standards auditor. Enforces /dev quality standards: no hardcoding, naming conventions, venv usage,

Development community
Mckinsey Slide Agent — Design agent for Claude Code

Mckinsey Slide Agent

McKinsey-style slide deck composer. Use proactively when the user asks to build, draft, design, or "make a dec

Design community