now-reading-page

Name: now-reading-page
Author: readwiseio

399installs7forks

How to install now-reading-page?

readwiseio/readwise-skills/now-reading-page

$npx -y skills add readwiseio/readwise-skills --skill now-reading-page

Installs into the current project.

Summary

Generate a personal "Now Reading" webpage from your Reader library

Files · 1

View on GitHub

SKILL.md

1	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.
2
3	## Readwise Access
4
5	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.
6
7	## Process
8
9	Launch a Task subagent to fetch all the data and generate the HTML file. The subagent should:
10
11	### 1. Fetch Data
12
13	Run ALL of these in parallel:
14
15	- 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"]`
16	- 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"]`
17	- 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"]`
18	- 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"]`
19
20	### 2. Paginate Archive Deeply
21
22	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.
23
24	### 3. Categorize
25
26	From the fetched data, build two lists:
27
28	- 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.
29	- 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.
30
31	Also collect ALL `last_opened_at` dates from archive items with `reading_progress > 0.9` for the heatmap.
32
33	There is no "Up Next" section. Only show things the user is reading or has read.
34
35	### 4. Generate HTML
36
37	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`.
38
39	Design direction: Warm, sepia-toned, editorial. Think personal reading log, not media dashboard.
40
41	Fonts: Google Fonts — Newsreader (serif, for headings) + DM Sans (sans, for body). Include via `<link>` tag.
42
43	Color palette (CSS variables):
44	```
45	--bg: #f6f1eb (warm parchment background)
46	--surface: #ede6dc (card/heatmap empty cell background)
47	--surface-hover: #e4dbd0
48	--border: #d9d0c4
49	--text: #4a4239 (main body text)
50	--text-muted: #8a7e72
51	--text-dim: #b0a597
52	--heading: #2c251e
53	--accent: #a0724a (warm brown — progress bars, active states)
54	--accent-dim: rgba(160, 114, 74, 0.12)
55	```
56
57	Layout: Max-width 760px, centered. Responsive.
58
59	Sections in order:
60
61	1. Header: "What I'm reading" in Newsreader, light weight, large. Subtitle: "Powered by Readwise Reader" with accent-colored link.
62
63	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:
64	- `aspect-ratio: 3/2`, rounded corners, hover lift effect
65	- Cover image if available (`image` field). Gradient placeholder if not (hash title → hue).
66	- Dark gradient overlay at bottom with white title + author
67	- Progress bar at card bottom: 5px tall track (dark semi-transparent) with accent-colored fill
68	- Cards link to the Reader URL
69
70	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.
71
72	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:
73	- Date on left (tabular nums, muted)
74	- Category emoji (📄 article, 📚 book, 🐦 tweet, 📰 rss, ✉️ email, 🎬 video, 🎙 podcast, 📑 pdf)
75	- Title (linked, medium weight) + author/source (dim, smal

People who liked this also viewed

6 picks

Type

lark-drive飞书云空间（云盘/云存储）：管理 Drive 文件和文件夹，包含上传/下载、创建文件夹、复制/移动/删除、查看元数据、评论/权限/订阅、标题、版本、飞书文档密级标签（secure labels）和本地文件导入。用户需要整理云盘目录、处理云空间资源 URL/token、判断链接类型/真实 token/标题，或导入 Word/Markdown/Excel/CSV/PPTX/.base 为 docx/sSkillsJul 2026382k16k
lark-sharedUse for lark-cli setup/auth tasks: auth login/status/logout, user vs bot identity, business-domain permissions (--domain, including all/docs/drive), missing scopes, revoking authorization, or handlingSkillsJul 2026382k16k
lark-whiteboard飞书画板：查询和编辑飞书云文档中的画板。支持导出画板为预览图片、导出原始节点结构、使用多种格式更新画板内容。当用户需要查看画板内容、导出画板图片、编辑画板时使用此 skill。不负责：飞书云文档内容编辑（lark-doc）、文档内嵌电子表格/Base（lark-sheets / lark-base）。SkillsJul 2026380k16k
lark-task飞书任务：管理任务、清单和任务智能体。创建待办任务、查看和更新任务状态、拆分子任务、组织任务清单、分配协作成员、上传任务附件、注册或注销任务智能体、更新任务智能体的主页数据、写入智能体任务记录。当用户需要创建待办事项、查看任务列表、跟踪任务进度、管理项目清单或给他人分配任务、为任务上传附件文件、注册注销任务智能体、更新智能体主页数据、写入任务记录时使用。SkillsJul 2026380k16k
lark-attendance飞书考勤打卡：查询自己的考勤打卡记录SkillsJul 2026330k16k
lark-apps妙搭（Spark/Miaoda）应用开发与托管：应用创建、本地全栈开发、云端生成迭代、创意设计（UI mockup / 可交互原型 / 线框图 / 落地页 / 仪表盘 / 幻灯片 deck / 视觉探索）、AI相关能力和飞书平台能力或者其他外部能力集成、日志/Trace/监控指标/PV/UV 查询、环境变量管理、应用角色与成员管理、自动化触发器（定时/记录变更/Webhook/飞书审批）。当用户要SkillsJul 2026227k16k

now-reading-page

399installs7forks

View on GitHub

How to install now-reading-page?

readwiseio/readwise-skills/now-reading-page

$npx -y skills add readwiseio/readwise-skills --skill now-reading-page

Installs into the current project.

Summary

Generate a personal "Now Reading" webpage from your Reader library

Files · 1

View on GitHub

SKILL.md

1	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.
2
3	## Readwise Access
4
5	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.
6
7	## Process
8
9	Launch a Task subagent to fetch all the data and generate the HTML file. The subagent should:
10
11	### 1. Fetch Data
12
13	Run ALL of these in parallel:
14
15	- 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"]`
16	- 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"]`
17	- 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"]`
18	- 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"]`
19
20	### 2. Paginate Archive Deeply
21
22	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.
23
24	### 3. Categorize
25
26	From the fetched data, build two lists:
27
28	- 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.
29	- 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.
30
31	Also collect ALL `last_opened_at` dates from archive items with `reading_progress > 0.9` for the heatmap.
32
33	There is no "Up Next" section. Only show things the user is reading or has read.
34
35	### 4. Generate HTML
36
37	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`.
38
39	Design direction: Warm, sepia-toned, editorial. Think personal reading log, not media dashboard.
40
41	Fonts: Google Fonts — Newsreader (serif, for headings) + DM Sans (sans, for body). Include via `<link>` tag.
42
43	Color palette (CSS variables):
44	```
45	--bg: #f6f1eb (warm parchment background)
46	--surface: #ede6dc (card/heatmap empty cell background)
47	--surface-hover: #e4dbd0
48	--border: #d9d0c4
49	--text: #4a4239 (main body text)
50	--text-muted: #8a7e72
51	--text-dim: #b0a597
52	--heading: #2c251e
53	--accent: #a0724a (warm brown — progress bars, active states)
54	--accent-dim: rgba(160, 114, 74, 0.12)
55	```
56
57	Layout: Max-width 760px, centered. Responsive.
58
59	Sections in order:
60
61	1. Header: "What I'm reading" in Newsreader, light weight, large. Subtitle: "Powered by Readwise Reader" with accent-colored link.
62
63	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:
64	- `aspect-ratio: 3/2`, rounded corners, hover lift effect
65	- Cover image if available (`image` field). Gradient placeholder if not (hash title → hue).
66	- Dark gradient overlay at bottom with white title + author
67	- Progress bar at card bottom: 5px tall track (dark semi-transparent) with accent-colored fill
68	- Cards link to the Reader URL
69
70	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.
71
72	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:
73	- Date on left (tabular nums, muted)
74	- Category emoji (📄 article, 📚 book, 🐦 tweet, 📰 rss, ✉️ email, 🎬 video, 🎙 podcast, 📑 pdf)
75	- Title (linked, medium weight) + author/source (dim, smal

People who liked this also viewed

6 picks

Type