Zotero Web Clone

# Zotero Clone Build Prompt (AI/ML Literature Library)

> Execution order: **build the UI first, load data second**. Two phases.

```text
[TASK] Build a pure front-end clone of the Zotero 7 desktop reference manager
(dark theme), with a pixel-accurate three-pane layout. Fill it with a REAL
literature library for an AI/Machine-Learning research group, organized into
collections by research direction.
[EXECUTION ORDER: build the UI first, then load the data. Two phases.]

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
PHASE 1 — Build the UI first (no network this phase; drive it with seed data)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
First lock down the data schema, then create 12-15 seed sample records that match
the schema and put them in data.json. The whole UI renders from data.json. Goal of
this phase: layout, colors, and ALL interactions are correct and testable. Only
after the UI is finalized move to Phase 2 — Phase 2 touches data.json only and
must not change the interface code.

Data schema (fields per paper, none may be missing):
  id / type (journal-article | conference-paper | preprint) / title / full author list /
  year / venue (journal or conference) / volume·issue·pages / DOI or arXiv ID / URL /
  abstract (full) / tags[] / collection(s) (can be multiple) / dateAdded

UI fidelity (match Zotero 7 dark theme — this is a CLONE, not "inspired by"):
  Overall macOS-style sans-serif font, dark charcoal window background (#1e1e1e), tuned for comfortable night reading,
  #252526 dark panels with 1px #3c3c3c dividers, compact row height, selected row in
  Zotero blue (focused #4b7fd5 / unfocused gray); a top toolbar + a bottom status bar.
  Three panes (draggable splitters to resize):
  [LEFT — collection tree] Top "My Library" (library icon), then the 5 collections
     (folder icon + item count): LLM Alignment / Diffusion & Generative Models /
     Graph Neural Networks / Multimodal Learning / Efficient Inference & Quantization;
     below them: My Publications, Duplicate Items, Unfiled Items, Trash;
     bottom of the left pane = the TAG SELECTOR: a colored tag cloud; clicking a tag
     filters the middle pane.
  [MIDDLE — item list] A table with columns: type icon | Title | Creator (first author
     et al.) | Year | attachment dot; clickable column headers sort (asc/desc triangle);
     selected row highlighted blue; journal/conference/preprint shown with distinct item
     icons; switching collection → middle pane shows only that direction, and the bottom
     status bar updates to "X items in this view".
  [RIGHT — item details] Tabs: Info | Abstract | Tags | Related;
     Info lists row by row: Item Type, Title, Author (multi-line), Publication, Volume,
     Issue, Pages, Date, Language, DOI (clickable), URL, Date Added, Date Modified; the
     Abstract tab holds the full abstract. Field labels gray and right-aligned, values
     black and left-aligned, exactly like Zotero.
  Top toolbar: left = New Collection / New Item (+); right = search box
     (placeholder "All Fields & Tags").

Interactions (all native Zotero behaviors — no games / flashy animation):
  click a collection to filter the middle pane; click My Library to show all
  (deduplicated); click an item → right pane fills in real time, DOI/URL clickable;
  search box live-filters title/author/abstract/tags (debounced); click tags to filter
  (multi-select); click headers to sort; splitters draggable.

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
PHASE 2 — Load REAL data (after UI is final; edit data.json only)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
1. Fill all 5 collections via REAL web search. Never fabricate titles, authors, DOIs,
   or abstracts from memory. Sources, in priority order:
   arXiv API → Semantic Scholar API → OpenReview → DBLP → Google Scholar.
2. 50-200 real papers per collection (store as many as you actually find; close enough
   is fine). Target counts:
   LLM Alignment ~142 / Diffusion & Generative ~98 / Graph Neural Networks ~76 /
   Multimodal ~120 / Efficient Inference & Quantization ~64.
   Abstracts MUST be the paper's original abstract (full, not a generated summary);
   DOI/arXiv IDs MUST be real and resolvable; pull 3-6 real keywords from the
   title/abstract as tags; dateAdded = a simulated random date within the past year.
3. Let some papers genuinely span multiple directions (one paper in multiple
   collections) to demonstrate multi-classification.
4. [SINGLE SOURCE OF TRUTH] Every paper lives in data.json ONLY. Never hard-code any
   paper into the HTML.

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
DEFENSIVE CONSTRAINTS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
- Pure front-end single page, no backend; data is read from a local data.json.
- Phase 2 touches data.json only — do not alter any working UI module; make
  incremental edits and preserve existing elements.
- If you cannot see the existing data.json / interface files, STOP and say so; do NOT
  rewrite the whole project from memory.

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
PRE-DELIVERY SELF-CHECK (verify each item; don't claim done if any fails)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
[ ] Phase 1: three-pane layout / colors / selection highlight / font match Zotero 7 with
    no obvious deviation; all 6 interactions individually tested and working.
[ ] Phase 2: each of the 5 collections has 50-200 papers, ~500 total; the left-pane
    counts equal the actual rendered counts.
[ ] Random-sample 5 papers: DOI/arXiv ID real and resolvable, abstract is the original
    text, author/year/venue correct; no fabricated entries anywhere in the library.
```

# Zotero Clone Build Prompt (AI/ML Literature Library)

> Execution order: **build the UI first, load data second**. Two phases.

```text
[TASK] Build a pure front-end clone of the Zotero 7 desktop reference manager
(light theme), with a pixel-accurate four-pane layout. Fill it with a REAL
literature library for an AI/Machine-Learning research group, organized into
collections by research direction.
[EXECUTION ORDER: build the UI first, then load the data. Two phases.]

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
PHASE 1 — Build the UI first (no network this phase; drive it with seed data)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
First lock down the data schema, then create 12-15 seed sample records that match
the schema and put them in data.json. The whole UI renders from data.json. Goal of
this phase: layout, colors, and ALL interactions are correct and testable. Only
after the UI is finalized move to Phase 2 — Phase 2 touches data.json only and
must not change the interface code.

Data schema (fields per paper, none may be missing):
  id / type (journal-article | conference-paper | preprint) / title / full author list /
  year / venue (journal or conference) / volume·issue·pages / DOI or arXiv ID / URL /
  abstract (full) / tags[] / collection(s) (can be multiple) / dateAdded

UI fidelity (match Zotero 7 light theme — this is a CLONE, not "inspired by"):
  Overall macOS-style sans-serif font, light-gray window background (#f6f6f6),
  white panels, 1px light-gray dividers (#dcdcdc), compact row height, selected row in
  Zotero blue (focused #4b7fd5 / unfocused gray); a top toolbar + a bottom status bar.
  Four panes (draggable splitters to resize):
  [LEFT — collection tree] Top "My Library" (library icon), then the 5 collections
     (folder icon + item count): LLM Alignment / Diffusion & Generative Models /
     Graph Neural Networks / Multimodal Learning / Efficient Inference & Quantization;
     below them: My Publications, Duplicate Items, Unfiled Items, Trash;
     bottom of the left pane = the TAG SELECTOR: a colored tag cloud; clicking a tag
     filters the middle pane.
  [MIDDLE — item list] A table with columns: type icon | Title | Creator (first author
     et al.) | Year | attachment dot; clickable column headers sort (asc/desc triangle);
     selected row highlighted blue; journal/conference/preprint shown with distinct item
     icons; switching collection → middle pane shows only that direction, and the bottom
     status bar updates to "X items in this view".
  [RIGHT — item details] Tabs: Info | Abstract | Tags | Related;
     Info lists row by row: Item Type, Title, Author (multi-line), Publication, Volume,
     Issue, Pages, Date, Language, DOI (clickable), URL, Date Added, Date Modified; the
     Abstract tab holds the full abstract. Field labels gray and right-aligned, values
     black and left-aligned, exactly like Zotero.
  [FAR-RIGHT — citation graph] An interactive citation graph / knowledge map that visualizes how the papers cite each other; clicking a node selects that paper and highlights its citation network and most-connected neighbors.
  Top toolbar: left = New Collection / New Item (+); right = search box
     (placeholder "All Fields & Tags").

Interactions (all native Zotero behaviors — no games / flashy animation):
  click a collection to filter the middle pane; click My Library to show all
  (deduplicated); click an item → right pane fills in real time, DOI/URL clickable;
  search box live-filters title/author/abstract/tags (debounced); click tags to filter
  (multi-select); click headers to sort; splitters draggable.

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
PHASE 2 — Load REAL data (after UI is final; edit data.json only)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
1. Fill all 5 collections via REAL web search. Never fabricate titles, authors, DOIs,
   or abstracts from memory. Sources, in priority order:
   arXiv API → Semantic Scholar API → OpenReview → DBLP → Google Scholar.
2. 50-200 real papers per collection (store as many as you actually find; close enough
   is fine). Target counts:
   LLM Alignment ~142 / Diffusion & Generative ~98 / Graph Neural Networks ~76 /
   Multimodal ~120 / Efficient Inference & Quantization ~64.
   Abstracts MUST be the paper's original abstract (full, not a generated summary);
   DOI/arXiv IDs MUST be real and resolvable; pull 3-6 real keywords from the
   title/abstract as tags; dateAdded = a simulated random date within the past year.
3. Let some papers genuinely span multiple directions (one paper in multiple
   collections) to demonstrate multi-classification.
4. [SINGLE SOURCE OF TRUTH] Every paper lives in data.json ONLY. Never hard-code any
   paper into the HTML.

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
DEFENSIVE CONSTRAINTS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
- Pure front-end single page, no backend; data is read from a local data.json.
- Phase 2 touches data.json only — do not alter any working UI module; make
  incremental edits and preserve existing elements.
- If you cannot see the existing data.json / interface files, STOP and say so; do NOT
  rewrite the whole project from memory.

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
PRE-DELIVERY SELF-CHECK (verify each item; don't claim done if any fails)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
[ ] Phase 1: four-pane layout / colors / selection highlight / font match Zotero 7 with
    no obvious deviation; all 6 interactions individually tested and working.
[ ] Phase 2: each of the 5 collections has 50-200 papers, ~500 total; the left-pane
    counts equal the actual rendered counts.
[ ] Random-sample 5 papers: DOI/arXiv ID real and resolvable, abstract is the original
    text, author/year/venue correct; no fabricated entries anywhere in the library.
```