---
name: editorial-playbook
description:
  Use when building or reshaping a content-led interactive explainer, technical
  playbook, or presentation-like static page; define the information
  architecture, visual system, responsive behavior, bilingual copy, and minimal
  interactive islands before coding.
---

# Editorial playbook

Treat the page as a guided argument, not a dashboard. Give it one audience, one
job, and one memorable thesis.

## Workflow

1. Write the chapter map before markup. Every section gets a stable slug,
   number, title, purpose, and a single interaction or proof point when useful.
   Reach for [page anatomy](references/page-anatomy.md) when adding a new
   section.
2. Compose from a few editorial primitives: label, thesis, pipeline or diagram,
   comparison/table, code panel, callout, source card, and next-chapter link.
   Keep the content model separate from rendering so more sections stay cheap.
3. Use a restrained visual system: paper background, ink text, muted copy, one
   cool accent, one warm signal, hairlines, and typography with a strong
   display/body contrast. Prefer intentional asymmetry and generous rhythm over
   cards everywhere.
4. Keep runtime light. Use plain HTML/CSS/JS for static, mostly content-led
   pages. Choose Astro or MDX only when many chapters need shared templates,
   content collections, or build-time localization. Preserve an existing
   framework when it already owns routing and tokens.
5. Make the page bilingual at the content boundary. Pair English and Portuguese
   strings, toggle the document language, persist the choice, and translate
   labels, controls, status text, and dynamic details—not paths, commands, or
   code.
6. Make interactions causal and inspectable. One active state should explain one
   idea; expose it with keyboard focus, an accessible state, a live status
   region, copy feedback, and a reduced-motion path.
7. Design for mobile, Full HD, and 4K. Use fluid type and spacing, cap readable
   measure, stack dense regions at narrow widths, keep diagrams scrollable only
   when semantically necessary, and test 390px, 1920px, and 3840px viewports.
8. Finish with evidence: content verification, JavaScript syntax checks,
   interaction tests, responsive browser checks, and a diff check. The section
   is done when its content, dynamic states, links, and three viewport classes
   pass.
