editorial-web

Editorial websites

Build the class of site that looks like a printed magazine came alive: one expressive serif, soft paper canvas, media presented as rounded plates, calm confident motion. This genre wins on RESTRAINT — read references/editorial-anatomy.md first; it defines the two proven moods (soft-light product / warm editorial brand), the 10-section layout grammar, the motion grammar, and the instant-fail tells.

Routing: if the request needs WebGL, 3D, a game world, or scroll-driven video scrubbing, STOP and use the immersive-web skill. This skill is the no-WebGL editorial lane.

Pipeline (one shot)

Run on the LARGEST available model (the 122B). Set gates before starting:

/gate npm run build
/gate ! grep -rq '{{' index.html
/gate test -f DESIGN.md

Running non-interactively (no /gate available)? Then run those three commands yourself before declaring the build done, plus the CSS-markup contract check below. A failing check means the job is NOT done, no matter how good the screenshots look.

CSS-markup contract check (mandatory): every class selector you ADD to style.css must exist in index.html. A real 122B build wrote .banner__bg / .banner__overlay styles but never added those divs — the section silently rendered text-on-background-color with no image. After any CSS edit that introduces new class selectors, verify each one:

for cls in $(grep -o '^\.[a-z][a-z0-9_-]*' src/style.css | sort -u | tr -d '.'); do
  grep -q "class=\"[^\"]*$cls" index.html || echo "MISSING IN HTML: .$cls"
done

Investigate every MISSING line (JS-created classes like .cursor-dot/.grain/.progress are the only legitimate misses).

1. Start from the template (verified working — do not rebuild the machinery):

# do NOT mkdir the target first — cp creates it
cp -R ~/.pi/agent/skills/editorial-web/assets/template-editorial ./SITE_DIR && cd SITE_DIR
ls package.json   # MUST exist here before continuing
npm install

README.md inside maps every file. The boot wiring in src/main.js (Lenis + ScrollTrigger single RAF, split-line reveals, drag rail) is correct — extend it, never re-derive it.