Motion Figure
Builds animated, slider-driven, and dither-pattern figures for lessons and pages
- Repository
- rohitg00/ai-engineering-from-scratch
- Stars
- 76,331
- Licence
- MIT
- Files
- 8 files
What it does
Teaches the agent to make visual figures that move or respond to the reader, such as an animated diagram, a slider that redraws a chart, an interactive panel showing the parts of a system, or a slowly shifting dot-pattern header. It gives the agent specific rules for how these figures must be built so they load and display correctly inside a course site.
Great for
- Course authors who want a lesson diagram to animate or respond to a slider
- Front-end developers building interactive explainer pages with SVG or WebGL
- Designers who want a textured dot-pattern header in a fixed colour palette
Skip it if
- Simple static diagrams with no time or input, where the sibling blueprint-figure skill is more suitable
- Full explainer pages with their own state model, where isometric-explainer applies; the figure rules here would not cover that scope
- Anyone expecting it to work outside the specific course runtime without adapting the mount and module conventions, since it depends on a window.LF runtime defined in the reference files
Try asking
- “Make an animated figure showing a token moving through the stages of a transformer”
- “Add a slider widget to this lesson that shows how learning rate changes the loss curve”
- “Build an interactive mechanism figure showing the parts of a cache and a computed hit-rate verdict”
- “Create a dither masthead in the course paper and accent colours for this section header”
Install in 3 steps
- 1
Download the skill
The ZIP contains the 8 original files, the MIT licence and an attribution note.
motion-figure.zip - 2
Add it to your agent
Claude Code (all projects)
mkdir -p ~/.claude/skills && unzip motion-figure.zip -d ~/.claude/skills/Claude Code / Agent SDK (this project only)
mkdir -p .claude/skills && unzip motion-figure.zip -d .claude/skills/Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.
- 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
- Pick one sentence describing the single change the figure shows before generating code; split into two figures if you need two sentences
- Check the figure in light and dark themes, at 375 px width, and with reduced motion enabled
- Search the registry for a figure name before creating one, since a later module with the same name replaces the earlier figure
What's inside
- references/dither-fields.md
- references/mechanism-figures.md
- references/smil-rules.md
- references/tokens.md
- references/toolkit.md
- SKILL.md
- templates/dither.js
- templates/mechanism.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.