Read this first. It carries the full context from the planning chat so a fresh (local) Cursor agent can continue without re-explaining anything.
- The app in
app/is a working React + Vite + Supabase PWA. It is the source of truth. - The "100x quality" work is done (staged install flow, installer-first nav, the
QC/points/costing/education flywheel, 105-term glossary, seeds). 95 tests pass;
npm run build,npm run lint,npm testare all green. - Infinity reskin (Phases 1–4 + Home day hub) is on
taylor/infinity-reskin(PR #2). Look-only chrome; Home is the mockup day composition (schedule / term / active install / KPIs / project cards; warehouse tiles under “More”). Installers land on Home; Work stays in the tab bar. - Deferred (mockup-only — do not build yet): dedicated Landing splash, Notifications bell UI, Ask Infinity chat, Weekly report digest. SignIn covers landing; Analytics ≠ weekly report; TypeBrain ≠ Ask Infinity.
Reference files are vendored into this repo under design/infinity/:
design/infinity/Infinity.dc.html— the full mockup, every screen. Open it in a browser to see the target look. (It is a Claude Design export, not runnable app code.)design/infinity/_ds/styles.css— the base "Nocturne" design system it sits on.design/infinity/manifest.webmanifest,icon-192.png,icon-512.png— app branding.
They also live on the origin/claude-version branch if you need the originals
(git show origin/claude-version:Infinity.dc.html).
Use these when restyling app/src/index.css:
Colors
- Page background:
#0C0B0A - Surfaces / cards:
#141210,#181614,#1E1B18(raised),#26211C - Text:
#F3F0EB(primary),#D8D2C9/#E8E3DB(secondary),#A39C92(muted),#5C564E(faint) - Accent orange:
#FF6A1A(primary),#FF8A4A(hover),#2A1A0E(orange-tinted bg) - Amber / warning:
#FFB020Danger / red:#FF5A48 - Success green:
#3ECF6E(on#173023) Info blue:#4A9DFF/#7FB7FF
Type
- Headings, labels, numbers, kickers: Barlow Condensed (500–700), often uppercase with letter-spacing.
- Body text: Barlow (400–600).
- Load both from Google Fonts.
Shape
- Border radius: 10–16px on cards/buttons (12, 14, 16 most common); ~11px on chips/controls.
- Dark theme, soft shadows, pill buttons, subtle pulse animations (
infPulse,infBar,infBlinkin the mockup's<style>).
Full step-by-step is in .cursor/plans/infinity-design-reskin.plan.md. Order:
- Foundation — fonts + color tokens + base styles in
app/src/index.css; app shell + bottom nav inapp/src/components/Layout.tsx;SignIn,PinGate; swap icons/manifest. - Installer path —
Home/RoleLanding,MyWork,install/OpeningSheet,Education,Points,TimeClock. - Lead path —
ProjectDetail,install/ProjectMap,Crew,install/DispatchBoard,Analytics,Qc,Costing. - Support —
Safety,Tools,Supplies,Training,MemoReview,Admin,WindowDetail,Search,Scan,Receive.
Most of the look lives in one file — app/src/index.css — so Phase 1 changes cascade everywhere.
cd app && npm run devto see the app live while you work.- Work one screen per commit. After each screen:
npm run build,npm run lint,npm test(keep 95 green). - Change look only — do not touch RPC calls, query keys, or data flow. Keep offline/PIN/toast behavior intact.
- Compare against
design/infinity/Infinity.dc.htmlopen in a browser tab.
- You never type git commands — your agent branches, commits, pushes, opens the PR and merges it once the checks are green. See
SYNC.md. - Nobody pushes to
master— a branch rule requires a PR with green checks, for everyone. .env(Supabase keys) is never committed — it's git-ignored, andapp/.env.examplealready points at the shared project.- Neither of you is ever asked for a credential or a Supabase dashboard action; the agent gets those itself and escalates to Taylor alone if it truly cannot.
- Repo:
Infinity-Windows/infinity-windows(private). Default branchmaster. - Prefer the local agent for daily work (cheap); use Slack
@Cursoronly for quick/away-from-desk tasks (cloud cost).