@arjunkhera/atlas 0.4.47 → 0.4.48

package/.claude-plugin/plugin.json

@@ -1,6 +1,6 @@
 {
   "name": "atlas",
-  "version": "0.4.47",
+  "version": "0.4.48",
   "description": "Atlas: the delivery lifecycle, its crews and the Atlas tools, for any repository.",
   "author": {
     "name": "Arjun Khera"

package/door/cli.mjs

@@ -24,6 +24,7 @@ import { install, upgrade, doctor } from './lib/install.mjs';
 import { checkPaths, LIMITS } from './lib/ste.mjs';
 import { checkDesignFolder, designFolderOf, repoRootFrom } from './lib/design.mjs';
 import { writeDesignPage, readTracker } from './lib/design-build.mjs';
+import { writePage } from './lib/page.mjs';
 import { writeViewPage, viewCapabilities } from './lib/view.mjs';
 import { loadPrivateTerms } from './lib/privacy.mjs';
 import { checkCommand as testsCheck, writeCommand as testsWrite } from './lib/tests.mjs';
@@ -60,6 +61,7 @@ const HELP = `atlas — the door into a repo's Atlas files
 
   atlas ste <file or folder> …         measure markdown and HTML against the STE limits
       --share                          also run the privacy filter, quotes included
+                                       an HTML page also needs a woodcut figure and only Atlas theme colours
       --terms <file>                   private terms; default ~/.config/atlas/private-terms.txt
   atlas design check <folder> …        check a design folder: each needed part, no state line, every code in the Key
   atlas design folder                  print where this repo keeps its designs: design.folder in atlas.yaml, or docs/design-docs
@@ -69,6 +71,10 @@ const HELP = `atlas — the door into a repo's Atlas files
       --out <file>                     the page; default docs/artifacts/<folder name>.html
       --draft                          build even when the check has findings, and mark the page a draft
 
+  atlas page build <file or folder>    build an explainer page from markdown: woodcut figures, the Atlas theme, light and dark
+      --out <file>                     the page; default <file or folder>.html beside it
+      --title <text>                   the page title; default the title of the first part
+
   atlas view build --product <id>      build the project view page of one product: the four views, read live from the tracker
       --name <name>                    the product's name on the page; default the id with a capital
       --out <file>                     the page; default docs/artifacts/<id>-view.html
@@ -211,6 +217,7 @@ export const FLAGS = Object.freeze({
   check: { root: 'optional', repo: 'value', 'fail-on': 'value', json: 'switch' },
   ste: { share: 'switch', terms: 'value' },
   design: { tracker: 'value', out: 'value', draft: 'switch', root: 'optional' },
+  page: { out: 'value', title: 'value' },
   view: { product: 'value', name: 'value', out: 'value' },
   tests: { root: 'optional', halves: 'value', evidence: 'value', 'guards-from': 'value', tests: 'value', 'dry-run': 'switch', run: 'value', own: 'value', base: 'value', head: 'value', list: 'value', side: 'value', old: 'value', new: 'value', covers: 'switch', findings: 'value', repo: 'value', max: 'value', bot: 'value', since: 'value', out: 'value', text: 'switch', json: 'switch', scenario: 'value', language: 'value' },
   jobs: { root: 'optional', repo: 'value', branch: 'value', out: 'value', findings: 'value', max: 'value', 'dry-run': 'switch' },
@@ -391,6 +398,26 @@ function designCommand(chosen) {
   return count ? 1 : 0;
 }
 
+function pageCommand(chosen) {
+  const sources = chosen._.slice(2);
+  if (chosen._[1] !== 'build') throw new Error('use atlas page build <file or folder>');
+  if (sources.length !== 1) throw new Error('give one markdown file or one folder: atlas page build <file or folder>');
+  const source = resolve(sources[0]);
+  const out = resolve(chosen.out ?? `${source.replace(/\.md$/, '').replace(/\/+$/, '')}.html`);
+  const result = writePage(source, out, { title: chosen.title ?? null });
+  if (!result.html) {
+    for (const finding of result.findings) line(`${finding.file}:${finding.line}  page  ${finding.why}`);
+    line('');
+    line(`No page written: ${result.findings.length} finding(s). Fix the markdown by hand.`);
+    return 1;
+  }
+  line(`Wrote ${out}: ${result.parts} part(s), ${result.figures} woodcut figure(s), ${result.walks} that walk.`);
+  const findings = checkPaths([out]).flatMap((one) => one.findings);
+  for (const finding of findings) line(`${out}:${finding.line}  ${finding.rule}  ${finding.why}`);
+  line(findings.length ? `atlas ste: ${findings.length} finding(s) on the page. Fix the markdown by hand and build again.` : 'atlas ste: GREEN. Publish the page.');
+  return findings.length ? 1 : 0;
+}
+
 function viewCommand(chosen) {
   if (chosen._[1] !== 'build' || chosen._.length > 2) throw new Error('use atlas view build --product <id>');
   const product = chosen.product;
@@ -481,6 +508,7 @@ export async function main(argv = process.argv.slice(2)) {
     case 'check': return checkCommand(chosen);
     case 'ste': return steCommand(chosen);
     case 'design': return designCommand(chosen);
+    case 'page': return pageCommand(chosen);
     case 'view': return viewCommand(chosen);
     case 'tests': return testsCommand(chosen);
     case 'jobs': return jobsVerb(chosen);

package/door/lib/design-build.mjs

@@ -40,7 +40,7 @@ export const TOKENS = Object.freeze({
 
 const tokenBlock = (index) => Object.entries(TOKENS).map(([name, pair]) => `--${name}:${pair[index]}`).join(';');
 
-const CSS = `
+export const CSS = `
 :root{${tokenBlock(0)};color-scheme:light;
 --wc-paper:var(--paper);--wc-ink:var(--ink);--wc-body:var(--body);--wc-muted:var(--muted);--wc-faint:var(--quiet);--wc-line:var(--line);--wc-line-strong:var(--line-strong);--wc-accent:var(--accent);--wc-accent-soft:var(--accent-bg);--wc-panel:var(--rail);--wc-card:var(--card);--wc-danger:var(--no);--wc-danger-soft:var(--accent-bg);
 --wc-serif:Lora,Georgia,serif;--wc-mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;--wc-dur-fast:150ms;--wc-dur-base:220ms;--wc-dur-step:450ms;--wc-dur-draw:700ms;
@@ -138,7 +138,7 @@ kbd{border:1px solid var(--line-strong);border-radius:4px;padding:0 5px;font-fam
 @media print{body{overflow:visible}.app{display:block;height:auto}.rail,.bar.foot{display:none}#scroll{overflow:visible}.part[hidden]{display:flex}}
 `;
 
-const SCRIPT = `
+export const SCRIPT = `
 (function () {
   var data = JSON.parse(document.getElementById('design-data').textContent);
   var flat = [];
@@ -356,6 +356,7 @@ export function buildDesign(folder, { tracker = null, draft = false, registry =
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="generator" content="atlas design build">
 <title>${esc(title)}</title>
 <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,500;0,600;1,500&family=Poppins:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap">
 <style>${CSS}</style>

package/door/lib/page.mjs

@@ -0,0 +1,242 @@
+// The explainer page builder, and the page rules of `atlas ste`.
+//
+// An explainer tells the owner how a technical flow works or where it
+// stands. Owner, 30 October 2026: "I would expect things to be explained
+// visually, the results are very disappointing, there is no theme in
+// pages" (lesson 8678a27b, item 99ccaa71). So one builder makes every
+// explainer, and the STE check refuses a page that skips it.
+//
+// `atlas page build <file or folder>` reads markdown: one file is one part,
+// a folder is one part for each .md file, in name order. The parts use the
+// blocks of the design renderer (markdown.mjs), with woodcut figures. The
+// page is the design page frame: a left rail, Back and Next, the arrow keys,
+// and a light and a dark theme from the design token set. The build refuses
+// a source with no woodcut figure, a figure woodcut cannot draw, or no
+// figure that walks: a scenario with two or more titled steps.
+//
+// The page rules read each HTML page that `atlas ste` reads:
+//   page-figure  the page draws no woodcut figure. A design page (its own
+//                check gates its pictures) and a project view page (a data
+//                view, not an explainer) are exempt, by their generator line.
+//   page-theme   a colour that is in no Atlas theme, or no dark theme.
+import { readFileSync, writeFileSync, mkdirSync, existsSync, statSync, readdirSync } from 'node:fs';
+import { join, dirname, basename, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { CSS, SCRIPT, TOKENS, WOODCUT } from './design-build.mjs';
+import { frontMatter, woodcutFault, woodcutWalks } from './design.mjs';
+import { render, esc, slug, fenceOpens, fenceCloses, WOODCUT_TYPES } from './markdown.mjs';
+
+export const GENERATOR = 'atlas page build';
+// Builders whose pages answer to their own check, not to page-figure.
+export const FIGURE_EXEMPT = Object.freeze(['atlas design build', 'atlas view build']);
+
+const PACKAGE_ROOT = resolve(dirname(fileURLToPath(import.meta.url)), '..', '..');
+
+// ------------------------------------------------------------- the build
+
+// The woodcut fences of one markdown body, with their line numbers.
+function woodcutFences(body, firstLine) {
+  const out = [];
+  let fence = null;
+  body.replace(/\r\n?/g, '\n').split('\n').forEach((text, index) => {
+    const line = firstLine + index;
+    if (fence) {
+      if (fenceCloses(text, fence.mark)) { if (fence.woodcut) out.push(fence); fence = null; } else fence.lines.push(text);
+      return;
+    }
+    const mark = fenceOpens(text);
+    if (!mark) return;
+    const [info, type] = text.trim().slice(mark.length).trim().split(/\s+/);
+    fence = { mark, woodcut: info === 'woodcut', type: type ?? null, line, lines: [] };
+  });
+  if (fence?.woodcut) out.push({ ...fence, open: true });
+  return out;
+}
+
+export function readSource(source) {
+  const root = resolve(source);
+  if (!existsSync(root)) throw new Error(`${source} does not exist`);
+  const folder = statSync(root).isDirectory();
+  const names = folder ? readdirSync(root).filter((name) => name.endsWith('.md')).sort() : [basename(root)];
+  if (!names.length) throw new Error(`${source} holds no .md file`);
+  const base = folder ? root : dirname(root);
+  return {
+    root,
+    name: basename(root).replace(/\.md$/, ''),
+    parts: names.map((file) => {
+      const { meta, body, bodyLine } = frontMatter(readFileSync(join(base, file), 'utf8'));
+      return { file, id: slug(file.replace(/\.md$/, '')) || 'part', title: typeof meta.title === 'string' ? meta.title : null, body, bodyLine };
+    }),
+  };
+}
+
+// The findings that stop a build. Each one names a file and a line.
+export function checkSource(source) {
+  const findings = [];
+  let figures = 0;
+  let walks = 0;
+  for (const part of source.parts) {
+    for (const fence of woodcutFences(part.body, part.bodyLine)) {
+      const at = { file: part.file, line: fence.line };
+      if (fence.open) { findings.push({ ...at, why: 'the woodcut block does not close' }); continue; }
+      if (!WOODCUT_TYPES[fence.type]) { findings.push({ ...at, why: `woodcut has no figure "${fence.type ?? ''}"; use ${Object.keys(WOODCUT_TYPES).join(', ')}` }); continue; }
+      let data;
+      try { data = JSON.parse(fence.lines.join('\n')); } catch (error) { findings.push({ ...at, why: `the woodcut data is not JSON: ${error.message}` }); continue; }
+      const fault = woodcutFault(fence.type, data);
+      if (fault) { findings.push({ ...at, why: fault }); continue; }
+      figures += 1;
+      if (woodcutWalks(data)) walks += 1;
+    }
+  }
+  const first = source.parts[0].file;
+  if (!figures && !findings.length) findings.push({ file: first, line: 1, why: 'the page has no woodcut figure. Explain the flow with a `woodcut wc-swimlane` (or another woodcut type) block, not prose alone' });
+  else if (!walks && !findings.length) findings.push({ file: first, line: 1, why: 'no figure walks the flow. Give one woodcut figure a scenario with two or more steps, each with a title' });
+  return { findings, figures, walks };
+}
+
+export function buildPage(path, { title = null } = {}) {
+  const source = readSource(path);
+  const { findings, figures, walks } = checkSource(source);
+  if (findings.length) return { html: null, findings, parts: source.parts.length, figures, walks };
+  const ids = new Set();
+  const byFile = new Map();
+  for (const part of source.parts) {
+    let id = part.id;
+    for (let n = 2; ids.has(id); n += 1) id = `${part.id}-${n}`;
+    ids.add(id);
+    part.id = id;
+    byFile.set(part.file, id);
+  }
+  const drawn = [];
+  const items = [];
+  const sections = source.parts.map((part) => {
+    const ctx = { file: part.file, page: part.id, figures: drawn, partOf: (href) => byFile.get(href.split('#')[0]) ?? null };
+    const out = render(part.body, ctx);
+    const heading = part.title ?? out.title ?? part.file.replace(/\.md$/, '');
+    items.push({ id: part.id, name: heading, ro: false });
+    return `<section class="part" data-part="${part.id}" id="part-${part.id}" hidden><h2>${esc(heading)}</h2>\n${out.html}\n</section>`;
+  });
+  const name = title ?? items[0].name;
+  const data = { groups: [{ id: 'pages', items }] };
+  const rail = `<div class="group"><button type="button" class="ghead" aria-expanded="true"><span class="chev">▾</span><span>Pages</span><span class="n">${items.length}</span></button>${items.map((item, index) => `<button type="button" class="item" data-go="${item.id}"><span class="n">${index + 1}</span><span>${esc(item.name)}</span></button>`).join('')}</div>`;
+  const mini = items.map((item, index) => `<button type="button" class="mini-item" data-go="${item.id}" title="${esc(item.name)}">${index + 1}</button>`).join('');
+  const html = `<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="generator" content="${GENERATOR}">
+<title>${esc(name)}</title>
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,500;0,600;1,500&family=Poppins:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap">
+<style>${CSS}</style>
+<noscript><style>body{overflow:auto}.app{display:block;height:auto}.rail,.bar.foot,.pos{display:none}#scroll{overflow:visible}.part[hidden]{display:flex;margin-bottom:40px}</style></noscript>
+</head>
+<body>
+<div class="app">
+<aside class="rail" id="rail" aria-label="Pages">
+<div class="full">
+<div class="railhead"><div class="kv"><span class="lbl">Explainer</span><b>${esc(name)}</b></div><button type="button" class="sq" data-rail aria-label="Fold the side rail" title="Fold">«</button></div>
+<div class="row"><button type="button" class="pill" id="open-all">Expand all</button><button type="button" class="pill" id="close-all">Collapse all</button></div>
+${rail}
+</div>
+<div class="strip"><button type="button" class="sq" data-rail aria-label="Open the side rail" title="Open" style="margin-bottom:10px">»</button>${mini}</div>
+</aside>
+<main>
+<div class="bar top"><nav class="inner"><b style="font-weight:500">${esc(name)}</b><span class="tag">EXPLAINER</span><button type="button" class="pill" id="theme" aria-label="Switch light or dark">☾ Dark</button></nav></div>
+<div id="scroll"><div class="inner">
+${name === items[0].name ? '' : `<header><h1>${esc(name)}</h1></header>\n`}<div class="pos" id="pos"></div>
+${sections.join('\n')}
+</div></div>
+<div class="bar foot"><div class="inner"><button type="button" class="nav" id="prev" aria-label="Previous page"></button><span class="mid"><span id="count"></span><span class="keys"> · <kbd>←</kbd> <kbd>→</kbd> to move</span></span><button type="button" class="nav" id="next" aria-label="Next page"></button></div></div>
+</main>
+</div>
+<script type="application/json" id="design-data">${JSON.stringify(data).replace(/<\//g, '<\\/')}</script>
+<script type="module" src="${WOODCUT}"></script>
+<script>${SCRIPT}</script>
+</body>
+</html>
+`;
+  return { html, findings: [], parts: items.length, figures, walks };
+}
+
+export function writePage(path, out, options = {}) {
+  const result = buildPage(path, options);
+  if (!result.html) return result;
+  mkdirSync(dirname(out), { recursive: true });
+  writeFileSync(out, result.html);
+  return result;
+}
+
+// ------------------------------------------------------------- the page rules
+
+// One spelling for each colour: lower case, no spaces, #abc as #aabbcc.
+export function normalColour(value) {
+  const text = String(value).toLowerCase().replace(/\s+/g, '');
+  const short = /^#([0-9a-f])([0-9a-f])([0-9a-f])([0-9a-f])?$/.exec(text);
+  if (short) return `#${short.slice(1).filter(Boolean).map((one) => one + one).join('')}`;
+  return text;
+}
+
+const COLOUR = /#[0-9a-fA-F]{3,8}\b|\b(?:rgba?|hsla?)\([^)]*\)/g;
+// Named colours that a hand-made page uses most. A name is in no theme.
+const NAMED = /(?<![\w-])(red|green|blue|black|white|gray|grey|orange|yellow|purple|pink|brown|navy|teal|silver|gold|maroon|olive|lime|aqua|cyan|magenta|crimson|coral|salmon|tomato|indigo|violet|beige|ivory|khaki|lavender|tan|wheat)(?![\w-])/gi;
+// Black and white with an alpha only darken or lighten: a shadow, a scrim.
+const NEUTRAL = /^rgba\((0,0,0|255,255,255),[\d.]+\)$/;
+
+let palette = null;
+// The colours of the Atlas themes: the design token set (design and
+// explainer pages), the crew's page format, and the project view page.
+export function themePalette() {
+  if (palette) return palette;
+  const set = new Set(Object.values(TOKENS).flat().map(normalColour));
+  for (const file of [join(PACKAGE_ROOT, 'agents', 'artifact-format', 'system.css'), join(PACKAGE_ROOT, 'view', 'page.html')]) {
+    if (!existsSync(file)) continue;
+    for (const match of readFileSync(file, 'utf8').matchAll(COLOUR)) set.add(normalColour(match[0]));
+  }
+  palette = set;
+  return set;
+}
+
+const lineAt = (text, offset) => text.slice(0, offset).split('\n').length;
+
+// The places a page paints a colour: the values of its style blocks, its
+// style attributes, and its colour attributes. Each comes with its offset.
+function paintSpots(text) {
+  const spots = [];
+  for (const block of text.matchAll(/<style\b[^>]*>([\s\S]*?)<\/style>/gi)) {
+    const start = block.index + block[0].indexOf(block[1]);
+    for (const value of block[1].matchAll(/:([^;{}]+)/g)) spots.push({ at: start + value.index + 1, text: value[1] });
+  }
+  for (const attr of text.matchAll(/\s(style|fill|stroke|color|bgcolor|stop-color|flood-color)\s*=\s*("[^"]*"|'[^']*')/gi)) {
+    spots.push({ at: attr.index + attr[0].indexOf(attr[2]) + 1, text: attr[2].slice(1, -1) });
+  }
+  return spots;
+}
+
+const generatorOf = (text) => /<meta\s+name=["']generator["']\s+content=["']([^"']*)["']/i.exec(text)?.[1] ?? null;
+const DARK = /\[data-theme=["']?dark["']?\]|prefers-color-scheme:\s*dark/i;
+
+export function pageFindings(text) {
+  const findings = [];
+  const generator = generatorOf(text);
+  const types = Object.keys(WOODCUT_TYPES).join('|');
+  const element = new RegExp(`<(${types})\\b`, 'i').exec(text);
+  const loader = /<script\b[^>]*\bsrc=["'][^"']*woodcut[^"']*["']/i.test(text);
+  if (!FIGURE_EXEMPT.includes(generator)) {
+    if (!element) findings.push({ line: 1, rule: 'page-figure', why: 'the page draws no woodcut figure. Build an explainer with atlas page build, and walk the flow in a woodcut figure' });
+    else if (!loader) findings.push({ line: lineAt(text, element.index), rule: 'page-figure', why: `the page has a <${element[1]}> figure but loads no woodcut script, so it draws nothing` });
+  }
+  const spots = paintSpots(text);
+  if (spots.length && !DARK.test(text)) findings.push({ line: 1, rule: 'page-theme', why: 'the page has no dark theme. Build it with atlas page build, which carries both themes' });
+  const known = themePalette();
+  const seen = new Set();
+  for (const spot of spots) {
+    for (const match of [...spot.text.matchAll(COLOUR), ...spot.text.matchAll(NAMED)]) {
+      const colour = normalColour(match[0]);
+      if (known.has(colour) || NEUTRAL.test(colour) || seen.has(colour)) continue;
+      seen.add(colour);
+      findings.push({ line: lineAt(text, spot.at + match.index), rule: 'page-theme', why: `the colour ${match[0]} is in no Atlas theme. Paint with a theme token, such as var(--accent)` });
+    }
+  }
+  return findings;
+}

package/door/lib/ste.mjs

@@ -9,11 +9,15 @@
 //
 // `--share` adds the privacy filter, with no exemption for quotes: a quoted
 // email address still leaves with the page.
+//
+// An HTML page also meets the page rules of page.mjs: it draws a woodcut
+// figure, and it paints only with the colours of an Atlas theme.
 import { existsSync, readdirSync, readFileSync, statSync } from 'node:fs';
 import { dirname, extname, join, relative } from 'node:path';
 import { fileURLToPath } from 'node:url';
 import { privacyFindings, loadPrivateTerms } from './privacy.mjs';
 import { fenceOpens, fenceCloses } from './markdown.mjs';
+import { pageFindings } from './page.mjs';
 
 export const LIMITS = Object.freeze({ step: 20, sentence: 25, paragraph: 6 });
 
@@ -181,8 +185,9 @@ export function pagesUnder(path) {
   return out;
 }
 
-export function checkText(text, { html = false, share = false, terms = [] } = {}) {
+export function checkText(text, { html = false, page = false, share = false, terms = [] } = {}) {
   const findings = measure(html ? htmlUnits(text) : markdownUnits(text));
+  if (page) findings.push(...pageFindings(text));
   if (share) findings.push(...privacyFindings(text, { terms }).map((finding) => ({ ...finding, rule: `privacy:${finding.rule}` })));
   return findings.sort((a, b) => a.line - b.line);
 }
@@ -193,7 +198,7 @@ export function checkPaths(paths, { share = false, terms = null, base = process.
   for (const path of paths) {
     for (const file of pagesUnder(path)) {
       const html = /\.html?$/i.test(file);
-      const findings = checkText(readFileSync(file, 'utf8'), { html, share, terms: own });
+      const findings = checkText(readFileSync(file, 'utf8'), { html, page: html, share, terms: own });
       results.push({ file: relative(base, file) || file, findings });
     }
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arjunkhera/atlas",
-  "version": "0.4.47",
+  "version": "0.4.48",
   "description": "Atlas: the delivery lifecycle, its crews and the Atlas tools, as a Claude Code plugin for any repository.",
   "type": "module",
   "license": "UNLICENSED",

package/skills/lead/SKILL.md

@@ -33,9 +33,20 @@ Follow all eleven in every reply, page and question.
 9. Link every explainer page from the document it explains.
 10. Pick the form that is easiest to understand. Put a diagram before
     prose, and a page before long chat text. Where motion explains a
-    sequence, animate the diagram in the page.
+    sequence, animate the diagram in the page. Explain each technical
+    flow on a page from `atlas page build <file or folder>`:
+    - A flow is how a thing works, the steps of a process, or where a
+      product stands.
+    - The page holds markdown and a woodcut figure that the owner steps
+      through, such as a `woodcut wc-swimlane` block.
+    - Never make an explainer page by hand. Never explain a flow in chat
+      text alone.
+    - The owner, 30 October 2026: "I would expect things to be explained
+      visually".
 11. Write in ASD-STE100. Run `atlas ste` on each page before you publish
-    it, and fix what it flags by hand. Quoted words are exempt.
+    it, and fix what it flags by hand. Quoted words are exempt. On an
+    HTML page, it also flags no woodcut figure, no dark theme, and a
+    colour in no Atlas theme.
 
 Before a page or an issue goes to anyone other than the owner, run
 `atlas ste --share` on it. That adds the privacy filter. It reads the
@@ -55,7 +66,8 @@ say that when you hand over a page.
 | Where a capability stands in the code | The `atlas:capability-reader` crew |
 | Review a design or a diff | The three reviewer crews, as sdlc-task says |
 | Prove a pull request against its definition of done | The `atlas:verifier` crew |
-| Render a page for the owner | The `atlas:artifact-renderer` crew |
+| Explain a technical flow or a status to the owner | The lead, with `atlas page build <file or folder>` (talk rule 10) |
+| Render a design, a PRD or a review page for the owner | The `atlas:artifact-renderer` crew |
 | Run the fresh-agent test at the end of onboarding: pick, run and grade three tasks | The `atlas:fresh-agent-test` skill, which sends the `atlas:judge` crew |
 | Onboard an area to tests, review scenario words, write or convert a test, sort a red test, plant faults | The `atlas:tests` skill |
 
@@ -110,6 +122,7 @@ set. A test keeps the two lists equal.
 | `atlas ste` | Before each publish; `--share` before a page goes to anyone else |
 | `atlas tests` | `write` puts the test kit in an area. `check` runs before a merge. `kept` runs the kept tests of a path 1 area and writes their evidence. `proof`, `verdict`, `named`, `covers` and `rerun` read the results of a run. `changed`, `before` and `after` run the test checks of the gate: changed tests, new cases fail on old code, old cases pass on new code. `sweep` and `issues` run the daily sweep |
 | `atlas design` | `folder` to learn where designs live; `check` before you show a design; `build` to make its page |
+| `atlas page` | `build <file or folder>` makes an explainer page, as talk rule 10 says. It refuses markdown with no woodcut figure that walks. Run `atlas ste` on the page, then publish it |
 | `atlas view` | `build --product <id>` makes the project view page of one product, when the owner asks for it or after an Atlas release changes it. Publish it with only the grant the command prints |
 | `atlas jobs` | The `atlas-jobs` workflow calls `check`, then `file`, once a day. A session calls it only to see what the watcher would file: `check`, then `file --dry-run` |
 | `atlas upkeep` | `check` before you ask for a merge. It reads the docs index, dead doc links, the code each doc names and stale pages. In a pull request it also reads the tracker item, the changed designs, and STE on the changed lines. The daily upkeep run calls it on the main branch. `replay` before the doc-sources rule changes how it gates. `procedures` runs the procedure steps tagged `atlas-run`; CI runs it with `--base` on each pull request |

package/view/page.html

@@ -3,6 +3,7 @@
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width,initial-scale=1">
+<meta name="generator" content="atlas view build">
 <title>@@TITLE@@</title>
 <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&amp;family=IBM+Plex+Mono:wght@400;500&amp;family=Source+Serif+4:opsz,wght@8..60,600&amp;display=swap">
 <style>