openfreebooks-bookgenerator/.agents/skills/ofb/math-chapter-patterns.md

Mathematics chapter patterns

Use these conventions in core.html and supplement.html so every math chapter looks and behaves the same. Shared styles live in content/math/subject.scss; shared setup in content/math/subject.ts.

Prose and sections

• Wrapper: <div class="book-prose">
• Section titles: <h2 id="…" class="book-prose__heading">
• In-chapter links: plain <a href="/math/…/"> inside .book-prose (theme styles them)
• For chained calculations, prefer aligned multi-line KaTeX:

<p class="book-formula">\[
  \begin{aligned}
    b &= \sqrt{c^2-a^2} \\
      &= \sqrt{13^2-5^2} \\
      &= \sqrt{144} \\
      &= 12
  \end{aligned}
\]</p>

This keeps equal signs aligned and avoids long single-line equations on mobile.

Checkpoints (required shape)

Copy from any live chapter supplement (e.g. content/math/basic-math-notation/supplement.html):

<h2 id="checkpoints" class="book-prose__heading">Checkpoints</h2>
<details class="book-question">
  <summary class="book-question__prompt">Your question here.</summary>
  <div class="book-question__solution">
    <p><strong>Answer:</strong> …</p>
  </div>
</details>

Do not use book-question__answer — only book-question__solution is styled.

Dot pictures

• Use counting-dots, counting-dots__dot, counting-dots--empty, counting-dots__none for amount pictures (see counting-and-numbers).
• Use notation-dots for smaller chains in notation chapters.

Widgets

• Mount: <div class="math-widget-mount" data-widget="widget-name" data-pagefind-ignore></div>
• Widget file: widgets/widget-name.tsx with default export

Chapter-only CSS

Put styles used in one chapter under chapter.scss. Move duplicated blocks into subject.scss instead.