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

Course style

This skill is the reference layer for the AI Engineering from Scratch look and voice. Other craft skills point here for exact values: blueprint-figure, motion-figure, isometric-explainer, and write-manual. Use it with Claude, Cursor, Codex, OpenClaw, Hermes, or any agent that reads SKILL.md. It holds no drawing method of its own. It tells you which colour, font, label, spacing, and word to use, and how to check each one.

When to use

• You write or review a page, a card, a figure, or a manual for the course.
• You need a token value for light or dark mode.
• You need the label format for a figure, a sub-figure, or a widget.
• You need to check prose against the plain technical English rules.
• You add motion and need the timing, the easing, and the reduced motion behaviour.

When not to use

• You draw a static SVG figure. Use blueprint-figure, which cites this skill.
• You build an animated or slider figure. Use motion-figure.
• You build an isometric machine explainer. Use isometric-explainer.
• You write a full manual. Use write-manual for the structure and the audit.
• The page belongs to a different product with its own brand.

Method

1. Set the theme. Put the light tokens on :root and the dark tokens on [data-theme="dark"]. Copy them from references/tokens.md.
2. Pick the token set. Pages use the site tokens. Manual figures use the --m- tokens.
3. Load the three fonts with the exact link in references/typography.md. Use the stacks as given.
4. Give each figure a label in the format from references/labels-and-layout.md.
5. Build cards and figure frames with the measurements in references/labels-and-layout.md.
6. Add motion only with the motion tokens. Add the reduced motion block from references/accessibility.md.
7. Write the prose. Then check every line against references/plain-english.md.
8. Run the checklist below. Fix each failure before you finish.

Rules

Colour

• Use one accent per page: --blueprint (#3553ff light, #6b8eff dark). Status tokens and manual figure hues are the only other colours.
• Write every colour as a CSS variable. A hex value is allowed only as the default inside var().
• Define every token in both themes. A token without a dark value is a defect.
• Put body text in --ink or --ink-soft only.
• Do not use --ink-mute or --warn for body text. Their contrast on the paper is below 4.5:1.
• Keep the four fixed figure hues: rose for failure, grey for outside, amber for lifecycle, teal for durable state.
• Use no gradients except the paper dot grid and the dashed rule. Use no rounded corners on cards or frames.