Focus Mode Dashboard

ReactUXDashboardUpdated 2026-08-09

When to use: Building deep-work tools, focus timers, or productivity dashboards with distraction-blocking features.

Install
npx skills add focus-mode-dashboard
Git Clone
git clone https://github.com/skillhub-community/focus-mode-dashboard.git

Description

Implements a full-screen focus environment: large countdown timer with visual ring animation and customizable duration presets (25/45/90 min), ambient soundscape player (rain, forest, café, white noise, lo-fi) with volume control and auto-fade at session end, task selector pulling from the task board to declare 'I'm working on X', and a session history log showing completed focus sessions with duration, task, and timestamp.

Includes a 'Focus Score' metric calculated from session consistency. Respects the Page Visibility API — timer pauses if the tab loses focus (configurable). Optional integration with website blocker APIs to block distracting sites during active sessions.

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