A local study workspace for Anki, built for Senior Design Engineer / UX Engineer interview prep. It is a SynapsePro-style suite (planner, stats, coverage, and study tooling) rebuilt as a small add-on you fully own and can audit. No third-party add-ons are required, and it makes no network calls.
- Anki stays the spaced-repetition engine.
- The workspace is a React + TypeScript single-page app rendered inside an
Anki webview, talking to the collection through a typed
pycmdbridge. - The content pipeline generates your study deck from a curated card list.
While the workspace panels are still being built, you study today in Anki using the generated deck (optionally alongside the third-party SynapsePro add-on).
Last worked: 2026-06-23. Branch main, pushed to origin (private).
Working now
- Phase 1 skeleton: the add-on loads in Anki (
Tools > MyFlashCards) and shows a live card count over the pycmd bridge. - React UI builds and runs, both as a browser preview and inside Anki.
- 50-card starter deck at
decks/Senior Design Engineer Interview.apkg. - SynapsePro (third-party) is installed separately so you can study today.
Not built yet
- Phase 2+ panels: deck stats, topic coverage, planner, Pomodoro.
- Deck expansion from 50 toward 200-300 cards.
Resume in 60 seconds
cd ~/Development/MyFlashCards
cd ui && npm install && npm run dev # preview the UI at the printed localhost URL
# to study instead: double-click decks/Senior Design Engineer Interview.apkg
# to load inside Anki: ./scripts/build.sh && ./scripts/dev-link.sh, then restart AnkiPick up here next (choose one)
- Expand the deck toward 200-300 cards in
content/build_deck.py. - Phase 2: wire real deck stats / topic coverage into the UI over the bridge.
- Make the repo public as a portfolio piece (a deliberate, separate decision).
Anki (installed app)
└─ addons21/myflashcards ── symlink ──▶ MyFlashCards/addon/
├─ __init__.py thin Python shell: Tools menu item + webview + pycmd bridge
└─ web/ Vite build output (the React SPA), served by Anki's media server
MyFlashCards/ui React + TS source, builds into ../addon/web
MyFlashCards/content genanki content pipeline -> decks/*.apkg
The Python shell is the entire trust surface: it only reads mw.col and answers
typed messages from the UI. Verified against the Anki 26.05 source.
| Path | What it is |
|---|---|
addon/__init__.py |
Python add-on shell: Tools menu item, webview, pycmd bridge |
addon/manifest.json |
Anki add-on manifest |
addon/web/ |
Vite build output (generated; gitignored) |
ui/ |
React + TS + Vite source for the workspace UI |
ui/src/bridge.ts |
Typed, discriminated-union pycmd contract (React <-> Python) |
ui/src/styles/tokens.css |
Semantic design tokens (hex), focus + reduced-motion |
content/build_deck.py |
genanki generator for the study deck |
decks/*.apkg |
Generated, importable Anki deck |
scripts/build.sh |
Build the UI into addon/web |
scripts/dev-link.sh |
Symlink the add-on into Anki's addons21/ |
- Anki desktop (26.x), launched at least once.
- Node.js 18+ and npm.
- Python 3.9+ with
genanki(python3 -m pip install --user genanki) for the content pipeline.
cd ui && npm install && cd .. # install UI dependencies
./scripts/build.sh # build React UI into addon/web
./scripts/dev-link.sh # symlink the add-on into Anki
# Restart Anki fully (Cmd+Q), then: Tools > MyFlashCardsGenerate / regenerate the study deck:
python3 content/build_deck.py # writes decks/Senior Design Engineer Interview.apkg
# Double-click the .apkg to import into Anki.Preview the UI in a browser (the bridge falls back to a "browser preview" state):
cd ui && npm run dev # http://localhost:5173 (or next free port)Anki does not care how you answer; the four-card method drives interview recall.
Cards are tagged type::quick | explain | scenario | story.
- Quick facts (
type::quick) use the type-in note type: type the answer, then Anki shows a diff. - Explain / scenario / story use self-grade: read the prompt, answer out loud for 30-60 seconds as if in the interview, reveal, then grade Again / Hard / Good / Easy.
- Story cards are behavioural templates (STAR / component-ownership). Fill them with your own real experience.
Tags map to topics so you can study a slice (e.g. browse tag:accessibility) or
build filtered decks. SynapsePro (a separate, third-party MIT add-on installed in
Anki) can be used for its planner/Pomodoro/stats while the MyFlashCards panels are
under construction.
content/build_deck.py compiles a curated card list into a single deck,
Senior Design Engineer Interview, with two note types (self-grade and
type-in), stable IDs (re-import updates rather than duplicates), tagged by topic
and card-type.
Starter coverage is weighted to where these interviews are won:
| Area | Target weight |
|---|---|
| Design Systems | 35% |
| Accessibility | 25% |
| React | 20% |
| TypeScript | 10% |
| Lit / Web Components | 5% |
| Behavioural stories | 5% |
Target as the deck grows: 200-300 high-quality cards across React, TypeScript, Accessibility, Design Systems, Storybook, Web Components, Lit, Product Thinking, UX Engineering, and Behavioural stories. Cards are authored in original wording grounded in the free authoritative sources below; GreatFrontend is used for topic inspiration only (its written content is proprietary and is not copied).
| Command | Purpose |
|---|---|
cd ui && npm run dev |
Vite dev server (browser preview) |
cd ui && npm run build |
Type-check + build into addon/web |
cd ui && npm run typecheck |
Type-check only |
./scripts/build.sh |
Build the UI from the repo root |
./scripts/dev-link.sh |
Symlink the add-on into addons21/ |
python3 content/build_deck.py |
Generate the study deck |
- Edit React in
ui/src(or cards incontent/build_deck.py). ./scripts/build.sh(UI) orpython3 content/build_deck.py(deck).- Restart Anki (it reloads add-ons and webview content on launch).
- Walking skeleton — Tools menu item, webview, ping/pong bridge, live card count. Done.
- Typed bridge — deck stats, due counts from
mw.col. Next. - Panels — deadline countdown, planner, stats dashboard, Pomodoro, notes, gamification (token-driven, a11y-gated, tested).
- Content pipeline — genanki deck from curated, source-grounded cards. Started (50-card starter deck shipped; expanding toward 200-300).
- Blank window — run
./scripts/build.sh; confirmaddon/web/index.htmlexists (the webview loads from there). - No Tools menu item — confirm the symlink resolves:
ls -l "$HOME/Library/Application Support/Anki2/addons21/myflashcards". - "Connecting…" never resolves — the pycmd bridge is not answering; check the Anki debug console for errors from the shell.
Cards are grounded in these free, authoritative references (original wording):
- React — https://react.dev
- TypeScript Handbook — https://www.typescriptlang.org/docs/
- WAI-ARIA Authoring Practices Guide — https://www.w3.org/WAI/ARIA/apg/
- WCAG 2.2 Quick Reference — https://www.w3.org/WAI/WCAG22/quickref/
- MDN Accessibility — https://developer.mozilla.org/en-US/docs/Web/Accessibility
- Storybook — https://storybook.js.org/docs
- Material Design 3 — https://m3.material.io
- Design Tokens Community Group — https://design-tokens.github.io/community-group/
- MDN Web Components — https://developer.mozilla.org/en-US/docs/Web/Web_Components
- Lit — https://lit.dev
- Nielsen Norman Group — https://www.nngroup.com
- GreatFrontend (topic inspiration only) — https://www.greatfrontend.com