Activity Heatmap Calendarv1.0.1
Use this Skill to make an infographic.
A heatmap calendar skill for Claude Fable 5: a year of daily counts as week columns of shaded squares, delivered as React source styled by your theme tokens.
Picked most often by
Updated Nov 6, 2026
Preview gallery
Similar Skills
View all
What you get
- Activity Heatmap Calendar as editable source: the calendar component plus a usage example that renders a sample year, ready to paste and adapt.
- The visual contract in references/theme.md: palette, type, radius, icon stroke and motion timings as tokens you set once.
- scripts/check-blocks.mjs, which flags symbol icons, off-palette blues and violets, and any file loaded from another host.
Good fit
- Habit, practice or fitness apps that want to show a year of streaks at a glance.
- Developer or content dashboards that track commits, posts or orders per day.
- Projects that would rather own a small, readable component than add a charting dependency for one grid.
Not for
- Products that already follow a design system of their own; this block's palette and type scale would compete with it.
- Anyone wanting a versioned package from npm; you receive source code and keep it up to date yourself.
- Data that is not counted per day; the grid needs one count for each date.
About this Skill
A data visualization skill for Claude Fable 5 that puts a full year of daily activity on your page as one calendar grid. Give the agent one count per day, such as practice sessions, commits, orders or visits. It draws 53 week columns running Sunday to Saturday, weekday names down the left, month names across the top and a Low to High legend of five squares below. Busier days take deeper fills, sand through to deep teal, and days still ahead in the current week stay empty. Hover any square to read its count and full date. It runs on plain React state, styled by your page's tokens.
How it works
- Say which page gets the block; the agent studies package.json and the framework config, then writes it in the project's own idiom.
- Swap in your own titles and labels; the theme tokens keep sizes and spacing in place.
- Set the accent once among the theme tokens; every part of the block follows.
- Run scripts/check-blocks.mjs, then view the page at phone width before it goes live.
Checked before delivery
- Every day of the range sits under the right weekday and month, and days still to come show as empty squares
- Each square's fill follows its count, and hovering it names the count and the full date
- scripts/check-blocks.mjs reports no symbol icons, no off-palette blue or violet and no remote files
What you need before you start
- You bring
- One count per day as { date, count } rows, for example sessions, commits, orders or visits · Optional: the last day to show, how many weeks to draw, five fill colours and the words for one count and for the legend ends
- Dependencies
- React 18+ · Tailwind CSS
- Outside costs
- None
- Last tested
- v1.0.1 — Claude Code / Cursor
User reviews
Loading reviews…
FAQ
What data does the calendar need, and must my site use React?
One { date, count } row per day; with no data the agent asks for it rather than inventing a year. The source is React, and in a project built on another framework the agent rebuilds the calendar there instead of adding React for one section.
Does the block fetch anything online?
No. Fonts, icons and pictures stay as local files, and scripts/check-blocks.mjs flags any src, href or url() pointing at another host.
Can it take on my brand's look?
Yes. references/theme.md lists the colors, corner radius and fonts as tokens; edit them once and the whole block follows.