Guide · Agent skill
How to use the Motion Figure agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The motion-figure skill teaches an AI agent to build figures that move or respond to the reader, such as an animated diagram, a slider that redraws a chart, an interactive panel of system parts, or a slowly shifting dot-pattern header. It is for course authors and front-end developers who work on lesson sites. After this guide you will know what the skill does, how to install it, how to ask for a figure in plain language, and what the site runtime must provide.
Motion Figurerohitg00/ai-engineering-from-scratch · MIT Download the skill Quick start
- 1Download the ZIP. Get the motion-figure ZIP from the Motion Figure page on this directory.
- 2Install the skill. Unzip it into ~/.claude/skills/ or a project's .claude/skills/, or upload it under Settings → Capabilities → Skills in the Claude apps.
- 3Check the site runtime. Confirm your course site provides window.LF with register, slider and select, as described in references/toolkit.md.
- 4Ask for a figure in plain words. Name the single change the figure should show and use a trigger phrase such as 'animated figure' or 'add a slider widget'.
- 5Add the figure fence. Place the figure name and optional JSON config in a figure fence in the lesson Markdown.
- 6Check the result. View the figure in light and dark theme, at 375 px width, and with reduced motion on.
What the skill makes the agent do
The skill has three tiers. Tier 1 is a lesson figure: a declarative SMIL animation, or a slider widget that redraws an SVG, mounted from a figure fence inside a course lesson. Tier 2 is a mechanism figure: an HTML panel that shows the named parts of a real system, where the reader drives one control and reads a computed verdict. Tier 3 is a dither field: a WebGL band of ordered dither dots drawn only in the paper, accent and ink colours, with four seeded motions, used for page mastheads and section breaks.
- Tier 1: lesson figures inside course lessons
- Tier 2: mechanism figures for standalone pages, READMEs, essays and product pages
- Tier 3: dither fields for mastheads and section breaks
How do you install the motion-figure skill?
Download the ZIP for the skill from the Motion Figure page on this directory. Then choose one of two routes. For Claude Code, unzip the download into your personal skills folder at ~/.claude/skills/, or into a project's .claude/skills/ folder to limit it to that project. In the Claude apps, you can instead upload the ZIP under Settings → Capabilities → Skills.
- Personal use: unzip into ~/.claude/skills/
- Single project: unzip into the project's .claude/skills/
- Claude apps: upload the ZIP under Settings → Capabilities → Skills
~/.claude/skills/motion-figure/How do you trigger the skill with a natural request?
You do not need a special command. Describe the figure you want in plain words and include one of the phrases the skill listens for. The skill's description lists these trigger phrases: 'animated figure', 'add a slider widget', 'interactive figure', 'show how this system works', 'make this diagram move', 'dither masthead', 'mechanism figure' and 'figure fence'.
A good request names the single change the figure should show. If you need two changes, ask for two figures. The skill's method starts by writing that one sentence.
- 'Make this diagram move so the token passes through each stage.'
- 'Add a slider widget that redraws the chart when I change the learning rate.'
- 'Build a mechanism figure showing the parts of a context window.'
- 'Create a dither masthead in the course colours.'
How do you place a figure in a lesson?
Inside a lesson, the agent adds a figure fence to the Markdown. The first word after the fence is the figure name in kebab case. Optional JSON config can follow the name. The site build finds the module that registers the name and writes a manifest. A fence name with no provider stops the build, so check that the name matches a registered figure.
```figure
context-budget {"windowK": 32}
```What does the skill need to run?
The skill depends on a site runtime that provides window.LF with register, slider and select functions. These are defined in references/toolkit.md. Figures also need a browser with SVG SMIL support, and WebGL support for dither fields. Outside the specific course runtime, the mount and module conventions must be adapted, because the figure rules assume that runtime.
- A site runtime that provides window.LF with register, slider and select
- A browser with SVG SMIL and WebGL support for dither fields
- Runs scripts: yes. Uses network: no.
What are the safety notes for scripts and network use?
The skill runs scripts, so review the module files before you add them to a live site. The listing says it does not use the network. The included files are SKILL.md, the reference files, templates/dither.js and templates/mechanism.html. Figures are written in ES5 for slider widgets and use only declarative SMIL for animated lesson figures, which avoids custom animation loops.
- Read the generated module before deploying it
- The listing says the skill uses no network access
- Reduced motion and print show a static frame, and the runtime pauses animation when the figure leaves the viewport or the tab is hidden
What tips help you get better figures?
Keep each animated figure to 55 SVG elements or fewer, and use loops of 2.5 to 6 seconds. Search the registry for your figure name before you create one, because a later module that registers the same name replaces the earlier figure. Check the figure in light theme, dark theme, at 375 px width, and with reduced motion on. Use the static frame time setting when a later moment shows the full state.
- Keep animated figures to 55 SVG elements or fewer
- Use kebab-case names and search the registry first
- Check light theme, dark theme, 375 px width and reduced motion
- Use data-static-time on the host when the complete state appears later
What people use it for
- Animating a token or queue moving through stages in a lesson
- Adding a slider that redraws a chart when a learning rate or batch size changes
- Building an interactive panel that shows the named parts of a context window or cache
- Creating a slow dot-pattern masthead in the course palette for a page header
Frequently asked questions
How do I install the motion-figure agent skill?
Download the ZIP from the Motion Figure page on this directory. Unzip it into ~/.claude/skills/ for personal use or into a project's .claude/skills/ folder, or upload the ZIP in the Claude apps under Settings → Capabilities → Skills.
What does the motion-figure skill require?
It requires a site runtime that provides window.LF with register, slider and select functions, defined in references/toolkit.md. The browser needs SVG SMIL support, and WebGL support for dither fields. The listing says it runs scripts and does not use the network.
Is the motion-figure skill free?
The listing states the licence is MIT. Check the licence text in the repository for the full terms.
Can I use motion-figure outside a course site?
Not without changes. The skill assumes the window.LF runtime and its mount and module conventions. Outside that runtime you need to adapt those conventions. Mechanism figures and dither fields have their own reference files that cover standalone use.
Which skill should I use for a static diagram?
Use the sibling blueprint-figure skill for fixed structures with no time axis and no input. Use isometric-explainer for full explainer pages with their own state model.
Why does my figure not appear in the lesson?
Check that the name in the figure fence matches a registered figure name. The site build stops when a fence name has no provider. Also check that the figure's module loads in the order the lesson expects, and that the figure has no more than 55 SVG elements.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Use motion-figure if you write course lessons or interactive explainer pages on a site that provides the window.LF runtime and want animations, sliders or dither mastheads that follow consistent rules. Pick a different tool if you only need a static diagram, a full explainer page with its own state, or a figure system that must run outside that runtime without adapting it.
Download the skill