now-reading-page

What this skill does

You are generating a beautiful standalone HTML page showing what the user is currently reading and has recently read. The output is a single HTML file they can open in a browser or host on their personal site.

## Readwise Access

Check if Readwise MCP tools are available (e.g. `mcp__readwise__reader_list_documents`). If they are, use them throughout (and pass this context to the subagent). If not, use the equivalent `readwise` CLI commands instead (e.g. `readwise list`, `readwise read <id>`). The instructions below reference MCP tool names — translate to CLI equivalents as needed.

## Process

Launch a **Task subagent** to fetch all the data and generate the HTML file. The subagent should:

### 1. Fetch Data

Run ALL of these in parallel:

- **Shortlist:** `mcp__readwise__reader_list_documents` with `location="shortlist"`, `limit=50`, `response_fields=["title", "author", "category", "reading_progress", "first_opened_at", "last_opened_at", "image", "url", "site_name", "word_count", "saved_at"]`
- **Later:** `mcp__readwise__reader_list_documents` with `location="later"`, `limit=50`, `response_fields=["title", "author", "category", "reading_progress", "first_opened_at", "last_opened_at", "image", "url", "site_name", "word_count", "saved_at"]`
- **Inbox:** `mcp__readwise__reader_list_documents` with `location="new"`, `limit=50`, `response_fields=["title", "author", "category", "reading_progress", "first_opened_at", "last_opened_at", "image", "url", "site_name", "word_count", "saved_at"]`
- **Archive page 1:** `mcp__readwise__reader_list_documents` with `location="archive"`, `limit=50`, `response_fields=["title", "author", "category", "reading_progress", "last_opened_at", "image", "url", "site_name", "saved_at", "word_count"]`

### 2. Paginate Archive Deeply

After the first archive fetch, use `nextPageCursor` to keep fetching more pages (limit=50 each). Fetch at least 6 more pages (~350 total docs) so the heatmap covers 6 months of reading activity. Keep paginating until the oldest `last_opened_at` is 6+ months ago OR pages are exhausted.

### 3. Categorize

From the fetched data, build two lists:

- **Currently Reading:** Items from shortlist, later, or inbox where `reading_progress` is between 0.05 and 0.99 (started but not finished). Sort by `last_opened_at` descending.
- **Recently Read:** Items from archive where `reading_progress` > 0.9 (actually finished). Sort by `last_opened_at` descending. Group by month. Show as many months as the data covers.

Also collect ALL `last_opened_at` dates from archive items with `reading_progress > 0.9` for the heatmap.

**There is no "Up Next" section.** Only show things the user is reading or has read.

### 4. Generate HTML

Create a `now-reading/` directory in the current working directory (if it doesn't exist) and write the HTML file to `now-reading/index.html`.

**Design direction:** Warm, sepia-toned, editorial. Think personal reading log, not media dashboard.

**Fonts:** Google Fonts — Newsreader (serif, for headings) + DM Sans (sans, for body). Include via `<link>` tag.

**Color palette (CSS variables):**
```
--bg: #f6f1eb          (warm parchment background)
--surface: #ede6dc     (card/heatmap empty cell background)
--surface-hover: #e4dbd0
--border: #d9d0c4
--text: #4a4239        (main body text)
--text-muted: #8a7e72
--text-dim: #b0a597
--heading: #2c251e
--accent: #a0724a      (warm brown — progress bars, active states)
--accent-dim: rgba(160, 114, 74, 0.12)
```

**Layout:** Max-width 760px, centered. Responsive.

**Sections in order:**

1. **Header:** "What I'm reading" in Newsreader, light weight, large. Subtitle: "Powered by Readwise Reader" with accent-colored link.

2. **Currently Reading** — section label in small caps. Gallery of cards using CSS grid (`repeat(auto-fill, minmax(160px, 1fr))`) so they fill the container. Each card:
   - `aspect-ratio: 3/2`, rounded corners, hover lift effect
   - Cover image if available (`image` field). Gradient placeholder if not (hash title → hue).
   - Dark gradient overlay at bottom with white title + author
   - Progress bar at card bottom: 5px tall track (dark semi-transparent) with accent-colored fill
   - Cards link to the Reader URL

3. **Reading Activity** — GitHub-style heatmap filling full container width. Use CSS flex with `flex: 1` on weeks and cells so it stretches. Warm amber color scale (`rgba(160, 114, 74, 0.2/0.4/0.65/1.0)`). Month labels above, day-of-week labels (Mon/Wed/Fri) on left. Show 6 months.

4. **Recently Read** — Category filter pills (All, Articles, Books, Tweets, RSS, Email) with JS toggle. Then entries grouped by month (e.g., "FEBRUARY 2026" in small caps). Each entry as a row:
   - Date on left (tabular nums, muted)
   - Category emoji (📄 article, 📚 book, 🐦 tweet, 📰 rss, ✉️ email, 🎬 video, 🎙 podcast, 📑 pdf)
   - Title (linked, medium weight) + author/source (dim, smaller)

**Styling notes:**
- All CSS in a `<style>` tag with CSS variables
- Subtle page-load fade-up animation on sections
- Divider lines between sections (`1px solid var(--border)`)
- Responsive: 2-column card grid on mobile

### 5. Return

Return the absolute path to the generated HTML file and a summary: how many currently reading, how many recently read, date range of activity data.

## After Subagent Returns

1. Tell the user the file was generated and where it is
2. Offer to open it in their browser: `open now-reading/index.html`
3. Ask if they want to adjust anything