Fun Personal Workbench

Problem

Personal tools often scatter across notes, to-dos, habit check-ins, and ledgers. Existing apps can have fixed fields, rigid styling, or require a backend account. This skill targets a local workbench: it generates a front-end page for desktop, mobile, or both, stores data in localStorage, and keeps a JSON export and import path.

How It Works

It first routes by device signals: mobile hints become app, desktop hints become desktop, and both requests ship two files. Core blocks include CONFIG, five module types, theme tokens, and desktop/mobile differences. Module types follow the code: todo, checkin, progress, finance, and note; the home dashboard is generated by the template and should not be handwritten. Visual style is centralized in :root tokens, so re-skinning changes variables without touching component CSS or JS.

Boundary Notes

Default storage is per device and browser, so users should export backups regularly. Dual-device sharing depends on the same storageKey; real multi-device sync is optional and requires a self-hosted lightweight backend. The skill should not hard-code backend URLs or tokens for users. Wrong type names can break module rendering, and both templates should keep CONFIG aligned.