Habit Tracker Widget

ReactUXDashboardUpdated 2026-08-11

When to use: Building habit-tracking features for productivity apps, wellness platforms, or personal dashboard projects.

Install
npx skills add habit-tracker-widget
Git Clone
git clone https://github.com/skillhub-community/habit-tracker-widget.git

Description

Provides a habit tracking toolkit: year-view contribution heatmap (GitHub-style) with color intensity by completion rate, current streak counter with 'longest streak' record badge, daily check-in cards with toggle completion (with satisfying check animation), and radial progress rings for goal targets (e.g. 'read 20 books this year').

Habits are configurable: name, icon/emoji, color, target frequency (daily/weekly/monthly), and reminder time. Data persisted via API with optimistic updates. Includes a weekly recap card showing 'perfect days' count and completion percentage.

AI Hub

Need a model endpoint?

AI Hub is an OpenAI-compatible endpoint for Cursor, Claude Code, and Agent workflows.

Open AI Hub

Metadata

Author@prod_jenny
LicenseMIT
Version1.0.0
Dependencies0