# Lesson Screen

Opens a browser lesson page with figures and predictions beside the course tutor.

- Repository: https://github.com/rohitg00/ai-engineering-from-scratch (76237 stars)
- Category: AI and agents
- License: MIT
- Last updated: 2026-10-29
- Runs scripts: yes, review before use

## Install

Claude Code: `npx skills add rohitg00/ai-engineering-from-scratch --skill lesson-screen -g -a claude-code -y`
Codex: `npx skills add rohitg00/ai-engineering-from-scratch --skill lesson-screen -g -a codex -y`
Cursor: `npx skills add rohitg00/ai-engineering-from-scratch --skill lesson-screen -g -a cursor -y`
Gemini CLI: `npx skills add rohitg00/ai-engineering-from-scratch --skill lesson-screen -g -a gemini-cli -y`

## Description

Opens a lesson screen in the browser next to the terminal while a course tutor teaches. It shows the lesson's registered figures, code traces with real values, and clickable predictions. It also builds a figure for the lesson on the fly with the course figure skills and any figure skill the host has installed: a blueprint, a mechanism, an isometric machine, or a 3D model. Clicks return to the tutor as events. Trigger phrases: "open the lesson screen", "show me this visually", "show this in 3D", "draw the architecture", "visualize this lesson", "build a figure for this lesson", "lesson screen".

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Lesson screen

The lesson screen is a small local web server and one browser tab. The tutor keeps teaching in the terminal. At each step it writes one screen into a folder, and the browser shows the newest screen. The learner can press options and click parts. Those clicks go to an event log that the tutor reads before its next reply.

Use this skill with Claude, Cursor, Codex, OpenClaw, Hermes, or any agent that reads SKILL.md. It needs Node.js 20 or later and a browser on the same machine. It installs no packages.

## When to use

- A course tutor teaches a lesson, and the learner accepts the screen. The tutors are learn, learn-mcp, learn-agent-skills, learn-reverse-engineering, claude-certification, and mcpa-certification.
- The learner asks to see a lesson, a concept, or a system: "show me", "draw it", "in 3D".
- A concept has a structure, a flow, or a number that changes. Seeing it helps more than reading it.

## When not to use

- The learner declined the screen. Do not offer it again this session.
- The learner cannot reach a browser page from the host: a chat app, or a remote machine without port forwarding. Give the lesson page on aiengineeringfromscratch.com. `references/hosts.md` lists the cases.
- The step is words only: a clarifying question, a tradeoff, or a definition. Keep it in the terminal and show the waiting screen.
- You need a permanent figure for a lesson file. Use the figure skills directly. This skill makes screens for one learner.

## Paths

`SKILL_ROOT` is the folder that holds this SKILL.md. In this file, `CLI` means `node "$SKILL_ROOT/scripts/lesson-screen.mjs"`.

Run every command from the learner's working folder. Screens go to `.lesson-screen/screens/`, and builds go to `.lesson-screen/builds/`. If the folder is a git repository, ask the learner to add `.lesson-screen/` to `.gitignore`.

## Start

The rest: https://github.com/rohitg00/ai-engineering-from-scratch/blob/HEAD/.claude/skills/lesson-screen/SKILL.md