Das bekommst du
- Eine React-Heatmap-Komponente ohne Abhängigkeiten, mit typisierten Props
- Derselbe Kalender als eine HTML-Datei mit JSON-Datenblock
- Ein Skript, das git log, CSV oder JSON zu Tageswerten zusammenfasst
- Summen, Serien, Tastaturnavigation und eine Live-Anzeige
- Optionale Header- oder Share-Card-Grafik von PopNow, vorher beziffert
Gut für
- Commit-, Schreib- oder Lernverlauf auf einer Profilseite
- Gewohnheits-, Workout- und Serien-Tracker
- Tägliche Verkäufe, Anmeldungen oder Ticketvolumen in einem Bericht
Nicht für
- Mehrere Datenreihen in einem Diagramm vergleichen
- Muster nach Tageszeit oder sehr kurze Zeiträume
- Exakte Werte nachschlagen, dafür ist eine Tabelle besser
So nutzt du ihn
In Claude oder ChatGPT
Nutze den PopNow-Skill „Kalender-Heatmap“ (activity-heatmap-calendar) dafür: Zeig meine Commits aus diesem Repo im letzten Jahr auf der Über-mich-Seite meines Portfolios.
In einem Coding-Agent
/popnow-activity-heatmap-calendar Zeig meine Commits aus diesem Repo im letzten Jahr auf der Über-mich-Seite meines Portfolios.
Dann probier
Verwende feste Stufen: 1, 3 und 6 Commits.
Erstelle einen Share-Card-Hintergrund für diesen Abschnitt und nenn mir vorher die Credits.
Das solltest du bereithalten
- Deine Daten oder den Befehl, der sie exportiert
- Was eine Einheit bedeutet, etwa ein Commit oder eine Bestellung
- Den Zeitraum und ob die Woche am Montag beginnt
Ähnliche Skills
Alle ansehen →3D-Avatar-Maker
+3Baue im Browser eine niedliche 3D-Figur im Plüschtier-Look und speichere sie als transparentes PNG oder 3D-Seite.
KI-SaaS-Landingpage
+3Warmes Sandpapier und feine Linien um ein lebendiges Kanban-Board, auf dem ein Assistent Aufgaben plant.
Animierte Hero-Section
+3Ein Landingpage-Hero mit sanft wechselndem Schlagwort, zwei Buttons und einem breiten Bildrahmen.
Shader-Hero-Website für Agenturen
+3Orange-Shader hinter großer Aussage, Pillen-Navigation und versetztem Raster mit Fallstudien.
Dunkle SaaS-Landingpage
+3Eine dunkle, bewegungsreiche Marketingseite für ein Softwareprodukt, geliefert als eine eigenständige HTML-Datei.
Designer-Portfolio-Website
+3Sechs geneigte Karten um eine verblassende Überschrift auf ruhigem Grau, eine rote Porträtkarte, Fallstudien.
Entwickler-Portfolio-Website
+3Eine dunkle persönliche Website für Entwickler mit Fallstudien, Artikeln, Vorträgen, Lebenslauf und Kontaktformular.
Redaktionelle SaaS-Website
+3Marineblauer geteilter Hero, Serifen-Überschrift neben einem Dokumentarbild, schräge Bänder, ein Kobaltakzent.
Glassmorphism-Website-Vorlage
+3Mattglas-Pillen auf Fastschwarz, große Serifen-Überschrift mit einem kursiven Wort und E-Mail-Anmeldung.
Website für Hardware-Produkte
+3Riesige haarlinige Modellnamen auf Silber-Studioaufnahmen, Datenkarten und eine maßstabsgetreue Reihe.
Interaktives Architekturdiagramm
+3Ein offline nutzbares, klickbares Systemdiagramm aus einem geprüften JSON-Modell, mit den Belegen zu jedem Kasten.
Interaktiver Raster-Hero
+3Dunkles Raster feiner Fäden, das sich zum Cursor neigt und bei jedem Klick einen Ring ausrollt.
Knowledge-Graph-Explorer
+3Mach aus Projektnotizen einen durchsuchbaren Offline-Graphen, in dem jede Aussage auf ihre Quellzeile verweist.
KPI-Dashboard-Vorlage
+3Vier KPI-Kacheln mit Veränderungs-Chips über einem leuchtenden Liniendiagramm, Aufschlüsselung und Zielbalken.
Landingpage aus KI-Mockups
+3Drei Entwürfe ganzer Seiten ansehen, einen wählen, dann baut dein Agent ihn als sauberen Code.
Magazin-Website-Vorlage
+3Eine Magazin-Website in Printqualität mit Artikeln, Themen, kleinem Shop und Abos, als eine HTML-Datei.
Partikel-Animations-Hero
+3Text auf warmem Papier neben einer drehenden Kugel aus Tinten- und Türkispunkten, die sich je Idee formt.
Persönliche Marken-Website
+3Ein Porträt, das in warmes Papier übergeht, darüber eine feine Klammer, daneben kurze und fette Aussagen.
Kinoreife Produkt-Launch-Seite
+3Fastschwarze Filmseite: Serifen-Titelkarte über gleitendem Licht, Letterbox-Nachtszene, Reservierungsformular.
Admin-Dashboard-Vorlage
+3Eine funktionierende Backoffice-Konsole mit Diagrammen, Tabellen, Kanban und Kalender, als eine Offline-HTML-Datei.
SaaS-Landingpage-Vorlage
+3Eine ruhige, helle Marketingseite für ein Softwareprodukt mit funktionierender Produktkonsole, Preisen und Registrierung.
Portfolio-Website im Scrapbook-Stil
+3Ein mehrseitiger Online-Lebenslauf aus Papierobjekten, mit Fallstudien und druckbarem Lebenslauf.
Sneaker-Shop-Website-Vorlage
+3Ein kompletter Schuh- oder Modeshop mit Katalog, Produktseiten, Warenkorb und Demo-Checkout in einer HTML-Datei.
Landingpage für Workflow-Automatisierung
+3Graphit-Seite mit kleiner Überschrift und einem lebenden Knotengraphen, der läuft und Logs streamt.
Fragen
Woher kommen die Daten?
Aus allem, was pro Eintrag ein Datum hat. Das mitgelieferte Skript liest die Ausgabe von git log, CSV-Dateien mit Datumsspalte, JSON-Arrays oder einfache Listen von Zeitstempeln und schreibt einen Wert pro Tag.
Braucht es eine Diagrammbibliothek?
Nein. Die React-Version braucht nur React, die HTML-Version gar nichts. Beide zeichnen das Raster mit einfachen Elementen und funktionieren im hellen und dunklen Modus.
Wie werden die Farbstufen festgelegt?
Standardmäßig aus den Quartilen deiner Tage mit Aktivität, sodass auch ein ruhiges Jahr die ganze Farbskala nutzt. Du kannst feste Schwellen setzen, wenn die Zahlen eine feste Bedeutung haben.
Warum zeichnet nicht das Bildmodell meine Statistik?
Bildmodelle können Zahlen falsch darstellen. Der Skill erzeugt mit PopNow einen Hintergrund ohne Text und legt deine echten Summen und Serien in HTML darüber.