Routine — Daily Self-Care Tracker Live

Routine — Daily Self-Care Tracker

Live (in Ukrainian): https://routine-tan.vercel.app

A mobile-first PWA for tracking daily self-care rituals — the small things that get lost when work takes over.

Built with Vite and Vanilla JS, no frameworks. Data lives in localStorage, so it's fully private and works offline. Installs to your phone home screen as a PWA.

Three views:

Today — tasks grouped by category (Body, Mind, Skin, Anti-habits) with a live progress bar

Stats — weekly heatmap, current streak, and honest insights into what you always do vs. always skip

Rituals — edit, reorder, and recategorize your habits

What makes it interesting technically: the entire design was prototyped in Claude Design (Anthropic's new tool, launched April 2026) in a single prompt — three screens, correct color palette, component structure. The HTML export became the design reference handed to Claude Code for implementation. Zero Figma, zero manual mockups.

Share feature: generates a 1080×1080 canvas card of your daily progress, exports via Web Share API on mobile.

Stack: Vite · Vanilla JS · CSS Variables · localStorage · PWA · Canvas API · Web Share API

Design workflow: Claude Design → standalone HTML export → Claude Code implementation Working time - 2 hours