❄ Cone of Cold
coneofcold.vercel.app
A personal collection of standalone web apps built with Claude. Most are React + Vite;
a few are self-contained static HTML pages. Either way they run entirely in your browser.
Apps
The "legacy" rows are older, design-locked apps kept live but not actively developed —
see LEGACY.md. All ten are registered in one place:
src/apps-registry.js, which feeds both index.html's card
grid and The Cabinet — a dashboard at
coneofcold.vercel.app/cabinet.html
that lists all ten apps — trying to hand off to each of the six React+Vite apps'
installed PWA, and a plain "Open" link for the four legacy static apps.
Structure
/
├── index.html ← landing page with search + tag filter, reads src/apps-registry.js
├── cabinet.html ← The Cabinet dashboard entry (src/cabinet/)
├── ds-showcase.html ← live design-system component workbench (src/ds/)
├── <app>-react.html ← one Vite entry per React+Vite app (src/<app>/)
├── src/
│ ├── apps-registry.js ← single source of truth for every app's card/tile data
│ ├── ds/ ← shared design system (tokens + components) — new apps only
│ ├── shared/ ← cross-app logic (e.g. notify/) any app may import
│ ├── sol-odyssey/, tempo/, law-of-the-day/, cabinet/ ← new apps, build on src/ds/
│ └── touch-grass/, journal/, kettlebell/ ← legacy apps, design-locked, own styling
├── public/
│ ├── touch-grass.html, touch-grass-vio.html, touch-grass-nora.html, kcd2-codex-v3.html
│ │ ← hand-authored legacy static apps, served at the site root
│ └── <app>.webmanifest, <app>-sw.js, <app>-icon-*.png ← per-app PWA assets
└── vite.config.js ← registers every React+Vite entry under build.rollupOptions.input
Design system
New apps build on the design system in src/ds/ — tokens + a growing set of
components (Button, Field, Modal, NumberStepper, Card, SegmentedControl, IconButton…).
Live workbench: /ds-showcase.html. The older apps and static resources are
design-locked and out of scope for it — see LEGACY.md for the boundary.
The one-way rule (legacy apps never import src/ds/) is enforced by
src/ds/boundary.test.js in npm test.
Adding a new app
The full process — decisions to make up front, scaffolding, the design system, and the
verification checklist — lives in CLAUDE.md (enforced, in-repo) and the
Notion page Dev — Building an App (human-readable narrative). In short:
- Register the app's entry in
vite.config.js → build.rollupOptions.input (React+Vite
apps) or drop a hand-authored .html file in public/ (static apps).
- Add its entry to the
APPS array in src/apps-registry.js —
this single file feeds both index.html's card grid and The Cabinet.
See that file's own header comment for the current field shape (kind, manifest,
deployed, tags, …) and CABINET.md for the full checklist.
- Add the analytics tag — every page on this site must include it (see
Analytics).
npm test && npm run typecheck, then push. Vercel deploys automatically.
Analytics
Traffic is tracked with Vercel Web Analytics (privacy-friendly, cookieless). The
dashboard is private to the Vercel project owner — Project → Analytics on
vercel.com. It breaks down views, visitors, referrers, and
countries per path, so the homepage (/) and each app (e.g. /touch-grass.html)
show up as separate rows.
Rule: every HTML page on this site includes the analytics tag — no exceptions, so
per-app access patterns stay complete. Add it to the <head> of any new page:
<script defer src="/_vercel/insights/script.js"></script>
Vercel serves that script automatically once Web Analytics is enabled for the project;
no npm package is needed. (This is separate from Speed Insights, which measures load
performance rather than traffic.)
Deploy
Hosted on Vercel via the jormania/app-playground GitHub repo. Every push to main triggers a new deployment.
