Skip to content
Get packs

Guide · Agent skill

How to use the Lesson Screen Tutor Viewer agent skill

Updated · written with AI from the project's own documentation and checked against our catalogue data

The lesson-screen skill lets an AI course tutor open a small local web page beside your terminal and show visual screens for each step of a lesson, such as code traces, lesson figures and clickable predictions. It is for students following an interactive course run by an agent, and for course authors who want to see how figures and quizzes render on their own machine. After this guide you will know what the skill does, how to install it, how to trigger it with a natural request, and what it needs.

Lesson Screen Tutor Viewerrohitg00/ai-engineering-from-scratch · MIT

Quick start

  1. 1Download the ZIP. Download the lesson-screen skill ZIP from this page.
  2. 2Unzip into a skills folder. Unzip it into ~/.claude/skills/ for all projects, or into .claude/skills/ inside a project folder.
  3. 3Or upload it in the Claude apps. In the Claude apps, open Settings, go to Capabilities and upload the skill under Skills.
  4. 4Confirm Node.js 20 or later. Make sure Node.js 20 or later and a browser are on the same machine as the agent.
  5. 5Start a lesson with a tutor. Run a course tutor in the terminal, such as learn or learn-mcp, and let it teach.
  6. 6Ask for the screen. Say a trigger phrase like open the lesson screen or show me this visually, then accept the offer.
  7. 7Open the link and click. Open the full URL the agent gives you and answer quizzes or click figure parts; the tutor reads these clicks.

What the lesson-screen skill makes the agent do

Normally a tutor agent explains in the terminal only. With this skill, the agent starts a local web server on your machine and opens one browser tab. At each step it writes a new screen into a folder, and the browser shows the newest one. Screens can include a step rail with the lesson question, the lesson's registered figure, a code trace with real values, or a multiple-choice question with clickable options.

When you press an option or click a part of a figure, the click is written to an event log. The tutor reads that log before its next reply, so it can respond to what you did. The skill can also build a custom diagram or 3D figure for the lesson using other figure skills.

Install the lesson-screen skill

You need the skill folder on your machine in one of two places. Download the ZIP of the skill from this page and unzip it into one of these locations:

Option A: unzip it into ~/.claude/skills/ to make it available in your user account.

Option B: unzip it into .claude/skills/ inside a project folder to make it available only in that project.

Option C: in the Claude apps, open Settings, go to Capabilities, and upload the skill under Skills.

  • Check that the folder contains SKILL.md at its top level after unzipping.
  • The package includes scripts/lesson-screen.mjs, templates, and reference files such as references/build.md and references/hosts.md.

Check the requirements

The skill needs Node.js 20 or later and a web browser on the same machine as the agent. It installs no packages. Its scripts run locally and it uses the network, so read the safety notes below before you use it.

  • Node.js 20 or later
  • A web browser on the same machine
  • Optional: the course figure skills blueprint-figure, motion-figure, isometric-explainer and course-style. If they are not installed, the agent can fetch them from GitHub.

Trigger the skill with natural requests

You do not run the skill yourself. Ask the tutor in plain words during a lesson. The skill's description lists trigger phrases, including: open the lesson screen, show me this visually, show this in 3D, draw the architecture, visualize this lesson, build a figure for this lesson, and lesson screen.

The agent will ask whether you want the screen. If you decline, it will not offer it again in that session. If the step is only words, such as a definition, it stays in the terminal.

  • open the lesson screen
  • show me this visually
  • show this in 3D
  • draw the architecture
  • build a figure for this lesson

Where the screen opens and when it does not work

The first start runs a command with the open flag, which opens the browser. The agent gives you the full link as well, because opening the browser can fail. The link includes a key that protects the page.

The skill does not work in a chat app or on a remote machine that you cannot reach with a browser. In those cases the agent gives you the lesson page on aiengineeringfromscratch.com instead.

  • Use it for interactive courses run by an AI tutor, with the browser on the same computer.
  • Do not use it if you need a permanent figure saved into a lesson file. It only makes temporary screens for one learner.
node "$SKILL_ROOT/scripts/lesson-screen.mjs" start --open

Safety notes: scripts and network

This skill runs scripts and uses the network. The start command runs a local server, and the figure skills can be fetched from raw.githubusercontent.com if they are not installed. Screens and builds are written into a .lesson-screen/ folder in your working folder. If that folder is inside a git repository, the skill asks you to add .lesson-screen/ to .gitignore.

Read the SKILL.md and the scripts before you install it, especially if you run it on a shared machine.

  • Screens are stored in .lesson-screen/screens/ and builds in .lesson-screen/builds/.
  • Some sandboxed hosts block local ports or browser launch, and the skill then falls back to the lesson page link.

Tips for a smoother lesson

Accept a screen only when it helps. The skill is designed to offer the smallest figure that shows the idea. If a figure does not load, ask the agent to check it or to give you the lesson page link.

If the page stops loading after the first turn on some hosts, the agent may run the server in the foreground. It can then read the URL again in a later turn.

  • Keep the terminal and browser tab side by side.
  • Ask for a 3D view only when depth or rotation is the point of the idea.
  • Answer quiz questions in the terminal; the tutor reads your clicks before replying.

What people use it for

  • Following an interactive course where a tutor shows a code trace with real values next to the terminal.
  • Clicking through a multiple-choice prediction and having the tutor respond to your choice.
  • Viewing the course's registered figure for a concept, such as a cache sizing figure, beside the explanation.
  • Asking for a 3D or architecture diagram of a system while the tutor explains it.
  • Course authors checking how figures and clickable quizzes render on their own machine.

Frequently asked questions

How do I install the lesson-screen agent skill?

Download the ZIP from this page and unzip it into ~/.claude/skills/ for your user account, or into .claude/skills/ inside a project. In the Claude apps you can also upload it under Settings, then Capabilities, then Skills.

What do I need to run the lesson-screen skill?

You need Node.js 20 or later and a web browser on the same machine as the agent. The skill installs no packages, but it runs scripts and uses the network.

Is the lesson-screen skill free?

The source is published under the MIT licence, as stated on this page. Check the licence file in the repository for the full terms.

Can I use lesson-screen in a chat app or on a remote server?

Not directly. The local page cannot be opened from a chat app or a remote machine without a reachable browser. In those cases the skill tells the agent to give you the lesson page on aiengineeringfromscratch.com instead.

Why does the browser tab not open or stop loading?

Some hosts end background processes when a command returns, and some sandboxes block local ports or browser launch. The agent can run the server in the foreground on those hosts, and the start output or error names the cause. You can also use the full URL the agent gives you.

How does this compare with just reading the lesson?

The skill adds visual screens and clickable questions next to the terminal, and your clicks go back to the tutor. It is not meant for saved figures; it makes temporary screens for one learner.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Use lesson-screen if you are working through an interactive AI-tutored course on a computer with Node.js 20 or later and a browser, and you want visual figures and clickable quizzes beside the terminal. Pick something else if you need a figure saved into a lesson file, work only in a chat app, or cannot run local scripts and network calls on your machine.

Download the skill