feat: give the chapters motion, diagrams, and retrieval practice
verify-and-publish / gate (push) Successful in 7m4s
verify-and-publish / publish (push) Has been skipped

Three strands of work on the chapter surface, all reading from the same
constraint: this site ships no runtime dependencies, so every effect below
is native CSS or an .astro component.

Motion (src/styles/motion.css, DrawRule.astro). A scroll-driven layer of
reveals, hero parallax, section depth, and a hairline that paints itself
along its path, scrubbed by `animation-timeline: view()` — 0KB against
lottie-web's ~60KB gzipped on the main thread. Every scrubbed rule sits
inside `prefers-reduced-motion: no-preference` and `@supports`, so a
Firefox reader or an opted-out one gets the complete static page rather
than one with holes in it. Ranges key to `cover 40%`-`cover 75%` where the
motion is meant to be watched: `view()` ranges key to first visibility,
which on a 2600px page is long before anyone is reading the section.
`.agents/skills/motion/references/scroll-driven.md` records the technique
and the two ways `pathLength` normalisation was broken while building it.

Diagrams (StepFlow.astro, WorktreeMap.astro). The `.steps` stack on
/skills/, /models/, and /agents/ becomes a numbered flow with connectors,
and /agents/ grows the worktree map it was describing in prose — reusing
the `trees` collection rather than a second set of strings. The map's
static variant is gated one class deeper than full-guide's page styles, so
the interactive copy renders byte-identical. Connectors are pseudo-elements,
not SVG: a stretched path desynchronises its own dash pattern, and a
straight line does not need one. Mermaid was considered and rejected at
~1MB of runtime.

Retrieval practice (/rules/, /skills/). A "check yourself" section of
native `<details>` question/answer pairs plus a citation row, both bilingual
through the existing `data-copy` toggle, and both JavaScript-free.

Two audit blind spots surfaced and are closed rather than worked around:
`build.inlineStylesheets: 'never'`, because Astro inlined sheets under ~4kB
and audit-ui.mjs reads its colour and size baseline from dist/_astro/*.css;
and `--columns` declared in the grid components, because an element-level
custom property is not a declaration the audit can resolve.

legacy/styles/skills.css is renamed and imported for its side effect. Inside
a *page*, `?url` resolves to that page's own CSS chunk whatever file it
names, so the link pointed at the wrong asset and the sheet was emitted but
never loaded — the package preview had been rendering unstyled and
overflowing since the Astro cutover.

verify.mjs gains 5 assertions for the recall sections and their Portuguese
copy: 89 now, against the 84 baseline.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Marcos Paulo
2026-09-06 16:04:08 -03:00
parent ab2308441c
commit 79920c9e6c
38 changed files with 1712 additions and 133 deletions
+8 -2
View File
@@ -27,8 +27,14 @@ files — the pages listed above import them, and the build fails without them.
- **`legacy/styles/audit.css`** (was `full-guide/audit.css`) — responsive audit
overrides, imported by `full-guide.astro`.
- **`legacy/styles/chapters.css`** — imported by `ChapterLayout.astro`.
- **`legacy/styles/skills.css`**, **`skills-review.css`**, **`change-lens.css`**
— imported by their respective pages.
- **`legacy/styles/skills-chapter.css`**, **`skills-review.css`**,
**`change-lens.css`** — imported by their respective pages.
`skills-chapter.css` is imported for its side effect, not through the `?url` +
`<link slot="styles">` pattern the layout uses: inside a **page**, `?url` on a
stylesheet resolves to that page's own CSS chunk rather than to the imported
file, so the link points at the wrong asset and the sheet is emitted but never
loaded. It was named `skills.css` and silently unloaded that way until
2026-09-06.
- **`legacy/skills-review/`** — `app.js` and the module graph under it
(`catalog.js`, `submitted-catalog.js`, `files.js`, `submitted-files.js`,
`vote.js`). `catalog.js` + `submitted-catalog.js` are the review desk's real