Lesson Screen
Opens a browser lesson page with figures and predictions beside the course tutor.
Install
npx skills add rohitg00/ai-engineering-from-scratch --skill lesson-screen -g -a claude-code -y- Repository
- rohitg00/ai-engineering-from-scratch76.2k
- Category
- AI and agents
- Updated
- 6d ago
- License
- MIT
- Context cost
- Mediumabout 2,698 tokens
- Runs scripts
- Yes, review before use
What it does
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".
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.mdlists 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.
