Plan Archive

An interactive archive of 52 planning, productivity and cognitive-bias laws. Every law is explained in plain language, illustrated with a diagram, and turned into a short checklist you can actually run today.

Live: https://plan-archive.vercel.app · Stack: React 18 · TypeScript · Vite

---

What's in it

• 52 laws across 5 categories — time & scheduling, goals & priorities, execution & habits, systems & projects, bias & organisations.
• Try it, don't just read it. Each law ships with 3–4 concrete checklist items. Progress is stored in localStorage, per law and in aggregate.
• 18 hand-built SVG diagrams. No raster images: the illustrations scale to any size, take the category accent at render time, and cost about as much bandwidth as a single JPEG for all 52 cards.
• 17 languages in the UI, detected from the browser and overridable from the picker in the top-right. Arabic renders right-to-left.
• One layout, two shapes. Desktop gets a rail / canvas / inspector split; below 900px the rail becomes a chip strip and the inspector becomes a sheet.

Running it locally

npm install
npm run dev      # http://localhost:5173
npm run build    # type-check, then build to dist/
npm run preview  # serve the production build

Node 18 or newer.

Deploying to Vercel

The repository is zero-config for Vercel — vercel.json pins the framework preset and adds the SPA rewrite plus immutable caching on hashed assets.

1. Push to GitHub.
2. In Vercel, Add New → Project and import the repository.
3. Accept the detected settings (vite · build npm run build · output dist).
4. Deploy.

Or from the CLI:

npx vercel --prod

How it's put together

src/
├─ data/
│  ├─ laws.ts              # language-neutral: id, category, diagram, attribution
│  └─ content/
│     ├─ en.ts             # translatable: title, summary, body, checklist
│     ├─ ko.ts
│     └─ index.ts          # locale resolution + English fallback
├─ i18n/
│  ├─ ui.ts                # UI strings for 17 locales
│  └─ index.tsx            # browser detection, persistence, <html lang/dir>
├─ components/
│  ├─ Visual.tsx           # the 18 SVG diagrams
│  ├─ LawCard.tsx          # a card on the canvas
│  ├─ Inspector.tsx        # detail panel + checklist
│  ├─ Sidebar.tsx
│  └─ LanguageMenu.tsx
└─ App.tsx

The split between laws.ts and content/ is the important part: adding a language never touches the catalogue, so a translation can never reorder, duplicate or drop a law.

Locale resolution

detectLocale() checks, in order: the ?lang= query parameter, the stored choice, then navigator.languages. Matching runs most-specific first, so zh-Hant-TW lands on zh-TW, pt-BR degrades to pt, and anything unknown falls through to English.

Content resolution is separate and per-law: a locale bundle may be partial, and any law it is missing renders in English with a notice in the inspector. That means a translation can be merged as soon as it starts being useful.

Adding a language

UI only — add a LocaleMeta entry and a UiStrings block in src/i18n/ui.ts. That's the whole change; law text falls back to English.

Full translation — add src/data/content/<locale>.ts exporting a LocaleContent, then register it in BUNDLES in src/data/content/index.ts.

To bootstrap a draft:

ANTHROPIC_API_KEY=sk-... npm run translate -- ja

The script batches the English source through the Anthropic API and writes the file for you. Treat the output as a first draft — these laws have established names in most languages, and a wrong one is worse than leaving it in English.

Adding a law

1. Append an entry to LAWS in src/data/laws.ts with a category and one of the 18 VisualId values.
2. Add the matching entry to src/data/content/en.ts, and to any other bundle you can write.

Nothing else needs to change — counts, filters and progress are all derived.

Accessibility

Keyboard-navigable throughout with visible focus rings, aria-selected on the language list, a labelled progress bar in the checklist, Escape to close the inspector, and prefers-reduced-motion respected. Colour is never the only carrier of meaning — category accents are always paired with a text label.

Credits

Law summaries are original write-ups. Attribution for each law (author and year, where one is agreed) appears in the inspector.

Licence

MIT. See LICENSE.

---

한국어 요약

기획·생산성·인지 편향과 관련된 52가지 법칙을 설명과 다이어그램, 그리고 바로 실행해 볼 수 있는 체크리스트로 정리한 사이트입니다. 브라우저 언어를 감지해 17개 언어 UI를 제공하며, 우측 상단에서 직접 바꿀 수도 있습니다. 진행률은 브라우저의 localStorage에만 저장됩니다.

npm install && npm run dev

번역을 추가하려면 src/i18n/ui.ts에 UI 문자열을, src/data/content/에 본문 번역을 넣으면 됩니다. 본문은 로케일별로 부분 번역이 가능하며, 빠진 항목은 영어로 대체됩니다.