ai-engineering-from-scratch: Skill for Claude Code

Motion figure

This skill makes figures that move or respond to input. It has three tiers. Use this skill with Claude, Cursor, Codex, OpenClaw, Hermes, or any agent that reads SKILL.md.

Tier 1 has the most rules, because the lesson runtime has hard limits. Tiers 2 and 3 have their own reference files.

When to use

• A lesson explains a process that changes over time: a token that moves through stages, a queue that fills, a loop that repeats.
• A lesson explains a formula where one input changes the output: learning rate, temperature, chunk size, batch size.
• An author writes "animate this figure", "add a slider", or "make the diagram interactive".
• A page needs a demo where the reader changes one thing and sees what the system does: a cache, a queue, a context window, a router. Use tier 2.
• A page needs a slow moving header in the course colours. Use tier 3.

When not to use

• The idea is a fixed structure with no time axis and no input. Make a static SVG figure. The sibling skill blueprint-figure covers static figures.
• The page is a full explainer page with its own state model and machine geometry. The sibling skill isometric-explainer covers that.
• You only need palette, fonts, or prose rules. The sibling skill course-style holds those. This skill copies the parts it needs into references/tokens.md.

Method

1. Write one sentence that names the single change the figure shows. If you need two sentences, make two figures.
2. Pick the tier. Inside a lesson, use tier 1. For tier 2, read references/mechanism-figures.md and start from templates/mechanism.html. For tier 3, read references/dither-fields.md and copy templates/dither.js. The steps below are for tier 1. In tier 1, use an animated figure when time is the variable. Use a slider widget when a number is the variable.
3. Pick a name in kebab case, for example request-path or context-budget. Search the registry for that name first. A later module that registers the same name replaces the earlier figure.
4. Put the code in a module file named figures-<topic>.js. Wrap it in an IIFE, read window.LF, and return early if it is missing.
5. Write a figure function function (host, cfg). It appends one .lf card to host and can return a dispose function.
6. Build the card: .lf-head with an uppercase .lf-label and a short hint, .lf-body, and .lf-cap with the caption.
7. Use viewBox="0 0 520 H" for the SVG. Most course figures use an H from 200 to 250. A single bar needs less.
8. Add a <title> and a <desc> with ids that you create once, outside any render function.
9. For an animated figure, add entries first, then one slow loop. Follow references/smil-rules.md line by line.
10. For a slider widget, define state._render before you call LF.slider or LF.select. Then call state._render() once at the end.
11. Call LF.register({ 'your-name': fn }) at the end of the module.
12. In the lesson Markdown, add the fence. Put the name on the first line and optional JSON config after it: