skills.rest
superbuilders
superbuildersOFFICIAL
Explore all skills by this author →
GitHub

timeback-client

Track browser activity heartbeats, visibility pauses, and completion metrics via the Timeback SDK.

2|Updated Mar 6, 2026
Search Tags:#typescript#learning#heartbeat#xp#client-sdk#timeback#activity-tracking
One-click install
npx skills add https://github.com/superbuilders/timeback-sdk-skills --skill timeback-client
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: timeback-client
Source: https://github.com/superbuilders/timeback-sdk-skills/tree/main/skills/timeback/timeback-client
Command: npx skills add https://github.com/superbuilders/timeback-sdk-skills --skill timeback-client

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Browser applications need consistent, reliable activity telemetry for learning experiences but implementing heartbeat time tracking, visibility-aware pausing, exit delivery, and completion metrics across frameworks is error-prone and inconsistent. This Skill standardizes client-side instrumentation so teams can capture time spent, completion events, and XP in a predictable, framework-agnostic way.

Core Features & Use Cases

  • Cross-framework TypeScript client: Adapters and patterns for React/Next.js, Vue/Nuxt, Svelte/SvelteKit, Solid/SolidStart, and a framework-agnostic createClient option.
  • Full activity lifecycle: Start activities, automatic heartbeat time tracking, pause/resume on visibility changes, sendBeacon on exit, and end with completion metrics (xpEarned, questions, pctComplete).
  • Production-ready guidance: Enforces one-activity-at-a-time, recommends onError handlers, and describes integration with the server adapter mounted at /api/timeback/*.
  • Use case: Instrument quizzes, lessons, reading sessions, and dashboards to record time-on-task and award XP where scoring data exists.

Quick Start

Wrap your app with TimebackProvider or call initTimeback for Svelte, start approved activities with Activity.start including course metadata, and call Activity.end with xpEarned and available metrics when the user completes the activity.

Frequently Asked Questions about timeback-client

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I track time spent on learning activities in a TypeScript browser app?▼

Track time spent on learning activities by using the Timeback SDK Activity class to schedule heartbeats, pause on visibility changes, and send completion events with metrics like xpEarned and pctComplete to a server adapter.

Can I use browser activity tracking with React, Next.js, Vue, or Svelte?▼

Yes, browser activity tracking works with React, Next.js, Vue, Nuxt, Svelte, Solid, and framework-agnostic setups by providing specific adapters and patterns for each environment to instrument learning activities.

How do I record XP and quiz completion metrics in a web application?▼

Record XP and quiz completion metrics by calling Activity.end with xpEarned, totalQuestions, correctQuestions, and pctComplete parameters to capture final scoring data for learning activities.

What is the best way to handle time tracking when a user leaves a page?▼

Handle time tracking on page exit by using the sendBeacon API to deliver pending activity data, ensuring time-on-task records are preserved even if the user closes the tab or navigates away abruptly.

Does activity tracking support pausing when a browser tab loses focus?▼

Yes, activity tracking supports visibility-aware pausing and resuming, automatically stopping heartbeat time tracking when the browser tab becomes hidden and continuing when the user returns to the learning activity.

Why should I enforce one active learning activity at a time?▼

Enforcing one active learning activity at a time prevents overlapping heartbeats and conflicting telemetry, ensuring accurate time-on-task measurement and clean completion metrics across browser sessions.

Related Skills

Explore More Software Engineering Skills→
spencerpaulyspencerpauly
672

adding-analytics

Add PostHog analytics to web apps with framework detection and SDK setup.

Community
Intermediate
superbuilderssuperbuilders
2

timeback-integrate

Automate end-to-end Timeback integration by discovering app domain, language, and architecture.

Official
Advanced
ZouZouZouZou

Dashboard & Analytics Skill

Create analytics dashboards for admin, instructor, and student roles.

Community
Advanced
vishalsachdevvishalsachdev
1

install-skill-tracker

Install and configure a Claude Code skill tracking system with hook scripts and JSONL logs.

Community
Advanced