Code Slowmo

    1

    Understand code by watching it run in slow motion: interactive, plain-language explainers built from your real code.

    Free

    Security scanned

    Works with the AI Agents you already use

    Claude CodeClaude CodeCursorCursorCodex CLICodex CLIMuseMuseDotsDots+22 more

    code-slowmo

    Example session with this skill installed

    How does drag and drop work in this editor? When I drag a block onto the page and let go, what changes, and when?

    • Read your context and instructions
    • Compiled the code-slowmo

    Summary

    The agent read Puck's drag-and-drop code (Puck 0.23.0, packages/core) and saved one interactive page,

    "How a drop works in Puck", to explainers/. The page data stays next to it as JSON, so you can ask for changes and rebuild.

    What's on the page

    SectionWhat it shows
    Words you need first6 cards, such as Block, Drop area and Store, each in plain terms. "Block: one piece of a page, like a Heading or a Text block."
    Puck, from far awayA clickable map of the editor's 6 areas. Click an area to see its parts, or press Next to follow one drag.
    One drag, in order14 steps, starting at "press on Heading". Each arrow is one part telling another part something. A mock of the editor and both stores update at every step.
    The drop, line by line27 steps through the real code at the moment Puck adds the Heading, with changing values shown in yellow. Two steps ask you to guess first.

    Every code name on the page, like insertComponent or appStore, has a plain explanation on hover.

    Takeaway (from the page)

    While you drag, Puck only updates a temporary preview. Your page data changes once, when you let go, through one line that adds the block to a list.

    Next steps

    Open the HTML file in any browser. Ask a follow-up, like "now explain undo", and the agent builds another page. This exact page is in the repo at examples/puck-drop.html.

    Connects securely to your tools. The creator never sees your data.

    About this skill

    Ask your coding agent how something works and you usually get a wall of text. code-slowmo is a skill that makes your agent build an interactive page instead:

    • A system map. It shows the main parts and which parts talk to each other. Click an area to see its parts, or follow a guided tour of one action.
    • A step-by-step timeline. It follows one action from start to end. Each arrow is one part telling another part something. A small mock of the screen and the data change at every step.
    • A line-by-line run of the real code. It shows the functions running, the values (yellow when they change), a log, and what you'd see on screen. A couple of steps ask you to guess what happens next before showing you.

    Every sentence is short and plain. Every code name has a plain explanation you can hover. The skill includes a checker that refuses to build a page with jargon, overlong steps or unexplained code names.

    The result is one HTML file. It opens in any browser and needs no server or account.

    How it works

    1. The agent reads the real code first and notes the file and line behind each claim.
    2. It writes the page content as a small JSON file: the question, the parts, the steps and the explanations.
    3. scripts/build.py checks that file. It catches structure mistakes and writing problems, such as steps over 40 words, code names with no plain explanation, filler words and passive voice. Then it builds the page from one shared template.
    4. You get one self-contained HTML file. The JSON stays next to it, so you can ask for changes and rebuild.

    Source and example pages: https://github.com/precious112/code-slowmo

    How to use

    Skills on Agensi run inside your AI agent. Copy the prompt, paste it into your agent, and it connects to Agensi and installs this skill for you. If a payment is needed, your agent shows it to you first.

    Reviews

    No reviews yet

    Be one of the first to try it. Every listed skill passes our trust checks below.

    Security scanned

    Passed our 8-point scan before listing

    Fresh listing

    Recently published to Agensi

    Free forever

    No account required to browse

    Trust & safety

    Security scanned

    Verified clean today

    • Free to download with an account

    Requires

    Python 3.8+
    Python

    Listedtoday

    What's inside

    Frequently Asked Questions