Sandbox
@ryannli/immersive-reading

Skill for immersive reading spaces in Claude Code and Codex

Immersive Reading is a reusable skill that turns long-form source material into a polished reading edition. It works from a link, pasted text, or a local file, then builds chapters, anchor quotes, source attribution, search, highlights, notes, and optional bilingual support.

45 stars6 forksJavaScriptUpdated 2mo ago
Who it's for

Builders who want their agent to turn articles, essays, and transcripts into a readable study space.

What it delivers

You can turn dense source material into a structured reading edition instead of plain text.

What it does

Source intake

Accepts essays, posts, transcripts, notes, papers, URLs, and local files.

Reading structure

Creates chapters, section beats, and anchor quotes to shape the flow of the source.

Study surface

Adds search, highlights, notes, copyable notes, source attribution, and theme support.

Optional bilingual mode

Can generate a bilingual reading experience when you ask for it.

Claude Code plugin install

Can be installed as a Claude Code plugin and run from a plugin command.

Reusable skill package

Ships as a SKILL.md-based skill folder that other supported agents can install.

How to get it

  1. 1Install and run it as a Claude Code plugin. Send these as four separate Claude Code…
    /plugin marketplace add ryannli/immersive-reading
  2. 2Run
    /plugin install immersive-reading@immersive-reading
  3. 3Run
    /reload-plugins
  4. 4Run
    /immersive-reading:immersive-reading
  5. 5Or install it as an open agent skill
    npx skills add ryannli/immersive-reading
  6. 6No-prompt install
    npx skills add ryannli/immersive-reading -g -a claude-code -y

README

Immersive Reading

Turn dense long-form ideas into bespoke learning spaces that are delightful to explore.

Bring a link, essay, transcript, note, or paper. Get back a polished learning space with chapters, source attribution, search, highlights, notes, and optional bilingual support.


Start Skill Demo


Not A Summary. A Co-Reading Space.

Example: Paul Graham's epic essay, How to Do Great Work.

BeforeAfter
Before: plain essay pageAfter: immersive reading space
Open original essayOpen live reading space · Watch the X post

What It Builds

01 · BRING

Source material
Essays, posts, transcripts, notes, papers, URLs, or local files.

raw text link file
02 · SHAPE

Agent-built structure
Chapters, section beats, anchor quotes, source media, and optional study language.

chapters quotes media
03 · OPEN

Interactive learning space
A static reader with search, highlights, notes, attribution, and theme support.

search highlights notes
READING FLOW

Turn dense text into a path.
Chapter openings, section beats, anchor quotes, and scroll-driven transitions.
STUDY SURFACE

Make the source usable.
Search, highlights, notes, copyable notes, optional bilingual support, and light/dark mode.
REUSABLE SCAFFOLD

Ship the same quality again.
Validated article data, source media, and static output ready for local use or Vercel.

Quick Start

Claude Code

Install and run it as a Claude Code plugin. Send these as four separate Claude Code messages:

/plugin marketplace add ryannli/immersive-reading
/plugin install immersive-reading@immersive-reading
/reload-plugins
/immersive-reading:immersive-reading

Then paste any essay, post, transcript, note, paper, URL, or local file you want to turn into a learning space.

Or install it as an open agent skill:

npx skills add ryannli/immersive-reading

Choose Claude Code if the installer asks. Then start a new Claude Code session and ask for immersive-reading.

No-prompt install:

npx skills add ryannli/immersive-reading -g -a claude-code -y
Codex

Install the skill into your local Codex skills folder:

npx skills add ryannli/immersive-reading

Choose Codex if the installer asks. Then start a new Codex session and use:

Use $immersive-reading on this article:
https://paulgraham.com/greatwork.html
Cursor

Install the skill into Cursor:

npx skills add ryannli/immersive-reading

Choose Cursor if the installer asks.

Antigravity CLI
agy plugin install https://github.com/ryannli/immersive-reading.git
Other SKILL.md-compatible agents

The Skills CLI can install this repo into supported coding agents. It fetches the skills/immersive-reading folder directly from GitHub; this repo does not need to be published as an npm package.

Replace codex with your agent name:

npx skills add ryannli/immersive-reading -g -a codex -y

Start With Anything

Use $immersive-reading on this article:
https://paulgraham.com/greatwork.html

For bilingual reading:

Use $immersive-reading on this link and add Spanish bilingual mode:
https://paulgraham.com/greatwork.html

You can also paste text or point to a local file. The agent chooses where to create the site and tells you when it is ready.

License

MIT.

Files in the repo

Repository payload9 top-level entries
  • .claude-plugin
  • docs
  • skills
  • .gitignore
  • .nvmrc
  • LICENSE
  • package.json
  • plugin.json
  • README.md

Discussion (0)

Ask about usage, or say what you built with it

Sign in to join the discussion.

No comments yet. Be the first to say what this is good for.

More skills

Turn any codebase, with its docs, SQL schemas, configs, and PDFs, into a queryable knowledge graph. A /graphify skill for Claude Code, Cursor, Codex, and Gemini CLI: local deterministic AST parsing, every edge explained, no vector store.

117k
1 add
Vincentwei1021/
anything2explainer

Topic in, narrated explainer video out. A Claude Code / Codex skill that turns any topic into a black-canvas motion-graphics explainer video with TTS voiceover, subtitles and a chapter progress bar. Chinese or English; every frame drawn in code with Remotion.

666

Open-source AI job search: scan job portals, evaluate listings into a structured A-H report with a global 1-5 score, tailor your CV, track applications — runs locally in your AI coding CLI (Claude Code, Codex, OpenCode, Antigravity…)

71k

Agent skill for beautiful, verifiable architecture, workflow, sequence, data-flow, and lifecycle diagrams—self-contained HTML with motion and crisp export.

57k
ayghri/
i-have-adhd

A skill to stop your coding agent from burying the answer. ADHD-friendly output.

38k