Skip to content

Lesson Screen Tutor Viewer

Lets a course tutor open a live browser lesson screen with figures, code traces and clickable predictions

Stars
76,331
Licence
MIT
Files
10 files

What it does

When a course tutor is teaching in the terminal, this skill starts a small local web server on your machine and opens one browser tab. The tutor then writes a new visual screen for each step of the lesson, such as a code trace, a registered lesson figure, or a multiple-choice prediction you can click. Your clicks are logged and sent back to the tutor, which reads them before its next reply. It can also build a custom diagram or 3D figure for the lesson using other figure skills.

Great for

  • Students following an interactive course run by an AI tutor who want visual explanations next to the terminal
  • Course authors testing how figures and clickable quizzes render for a learner on their own machine

Skip it if

  • Users on a chat app or remote machine without a reachable browser, because the local page cannot be opened there (the skill itself says to use the website link instead)
  • Anyone who wants a permanent figure saved into a lesson file, since this skill only makes temporary screens for one learner

Try asking

  • “open the lesson screen”
  • “show me this visually”
  • “draw the architecture of this lesson”
  • “show this in 3D”
Step-by-step guide: how to use Lesson Screen Tutor ViewerInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 10 original files, the MIT licence and an attribution note.

    lesson-screen.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip lesson-screen.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip lesson-screen.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Accept the screen only when you want visuals; decline it and the tutor will stop offering it for the session
  • Keep the full URL with its key private, since it protects the local page, and add the .lesson-screen/ folder to .gitignore if your project is a git repository

What's inside

  • agents/openai.yaml
  • references/build.md
  • references/hosts.md
  • references/screens.md
  • scripts/lesson-screen.mjs
  • SKILL.md
  • templates/frame.html
  • templates/helper.js
  • templates/practice.html
  • templates/shell.html

Redistributed unmodified from rohitg00/ai-engineering-from-scratch under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.