concept · docs site · built on nimbus · approved 2026-08-26

product-engineering docs

A site that teaches each skill by showing what to say and what comes back, states exactly what each one needs installed, and credits every author with a receipt instead of a thank-you.

The idea

The README already works as a front door. The docs site is where a person goes when they have installed the kit and want to use one skill well: what it does, what to type, what it returns, what it needs from the machine, and where it hands off. One page per skill, written in the same voice as the cards, with the skill's own SKILL.md as the source so the docs can never say something the skill doesn't.

The tribute pages are the repo's provenance made readable. Each author gets a page generated from foundry/MANIFEST.json: which files are theirs, which skill carries each one, the class it entered as, the ledger rulings that touched their work, and the watcher that checks their upstream weekly. Nothing on those pages is written by hand, so they stay true the same way the kit does.

Nimbus fits because it gives every page a .md twin and an llms.txt index. A coding agent installing the kit can read the setup page for pe-verify as cleanly as a person can, which is the audience half the time.

The map

SectionPagesWhere the content comes from
StartInstall · Setup by skill · The .product/ folder · Lazy modeAuthored. The setup matrix below is the spine of this section.
Skillspe-design · pe-build · pe-review · pe-verify · pe-product-description · pe-brand-assets · product-engineeringFrontmatter and modes pulled from each SKILL.md at build time; the teaching prose (say this, you get) is authored per page.
WorkflowsDesign, approve, build, verify · Review a PR · Release check with the QA list · Document a productAuthored. Each is a real sequence across skills, shown as the conversation it takes.
PeopleEmil Kowalski · Jakub Krehel · Julien Thibeaut · Plannotator · Vercel · Leon · Steve Ruiz · Paul BakausGenerated from MANIFEST.json and NOTICE. The People index carries the provenance summary (byte-for-byte, hash-verified, weekly watcher) and links to foundry/ on GitHub. No bios unless the author supplies one.
ReferenceThe report contract · DESIGN.md format · The approved record · The memories fileThe skills' own reference files, rendered as-is with their provenance line.

Three pages, mocked

The site in its dark identity. Light is the other theme, from the same tokens as the light hero.

● ● ●product-engineering.dev⌘K
product engineering
Start
Install
Setup by skill
The .product folder
Skills
pe-design
pe-build
pe-review
pe-verify
pe-product-description
pe-brand-assets
product-engineering
Workflows
Design, approve, build, verify
Release check
People
Eight authors

product engineering

Six agent skills for product design and engineering. Converged from the best published design-engineering skills, with the source prose preserved.

$ npx skills add backnotprop/product-engineering
pe-design
Design it.
Context docs, creative direction, mockups, prototypes.
understand · brief · direct · mock · vary · onboard
pe-build
Build it.
Polished, accessible, production-ready code.
craft · motion · a11y · harden
pe-review
Judge it.
Prioritized findings on any screen, diff, or PR.
change · screen · improve · guidelines · stress · motion · a11y · fidelity
pe-verify
Verify it.
Pass or fail on every check, with recordings.
feature · list
Most of this kit is other authors' work, carried byte-for-byte. 131 files · 8 authors · hash-verified in CI. Read the receipts under People.

Two page anatomies

A skill page

  1. The card, as the page header: mono name, verb headline, the one sentence. Same words as the README card, so the site and the repo never disagree.
  2. Say this, get this. Three to five real prompts and what comes back. The fastest way to learn a skill is to see the conversation.
  3. Modes, from the SKILL.md table, in one line each. Sub-modes (selective or all) appear where they exist.
  4. Setup. Required, optional, and convention rows, always in that order, with the install command when there is one.
  5. What it produces: the artifact, the record, the report, with one example rendered (a real pe-verify report, a real approved record).
  6. Handoffs, by skill name, as the skill states them.
  7. The provenance strip: who wrote what this skill carries, with counts, linking to the tribute pages.

A tribute page

  1. Name, upstream repo, license. For Steve Ruiz: the gist and the permission record from NOTICE.
  2. What we carry, in the author's own terms (the review engine, the craft canon, the identity method).
  3. Facts from the manifest: file count by class, which skills carry them, ledger rulings involving the work and which way each went.
  4. Receipts: the full file table, each row linking to the upstream blob at the pinned commit and to the kit's copy.
  5. For Emil Kowalski, one more row: the animations.dev course pack is not distributed; owners install it locally.

No adjectives, no bios. The page's respect is in its accuracy.

Setup, per skill

Everything installs with one command; the skills differ in what they need from the machine and the repo after that. This matrix is the Start section's core page and repeats, per skill, on each skill page.

SkillRequiredOptionalConvention
allnpx skills add backnotprop/product-engineering (Claude Code installs to .claude/skills/; other agents per skills.sh)a DESIGN.md from pe-design, understand modea .product/ folder for approved records, the QA list, and product notes
product-engineeringnothing beyond the installsay "product engineering, …" and let it route
pe-designa browser to open the HTML artifactsthe app running locally for vary mode's in-page picker; network for understand mode from a public URLapprovals land in .product/approved/<slug>/
pe-buildthe project's own dev serverthe animations.dev course pack, installed locally with foundry/scripts/course-dropin.sh (purchasers only; never committed)reads DESIGN.md and .product/approved/ before building
pe-reviewa diff, a URL, or a screenshot to reviewa browser for screen and a11y modesfidelity mode reads .product/approved/
pe-verifypython3; Playwright with Chromium for browser checksffmpeg for mp4 recordings.product/qa-list.md; ~/.product-engineering/memories.md remembers other locations
pe-product-descriptionthe source repo path and commit; a way to run the product for verificationpython3 for the link checkeroutput is its own repo of documents
pe-brand-assetsDESIGN.md or a brand/ folder (it refuses to invent brand values)an SVG-to-PNG renderer for OG and social imagesSVG is the source of truth; PNG only where a destination requires it

The brand, on Nimbus

Nimbus scaffolds the site as files we own, so the brand goes into src/styles/globals.css once and every component follows. The mapping is small because the brand is small.

Nimbus tokenValue from DESIGN.mdNote
--nb-backgrounddark #101114, light #FFFFFFthe body gets the radial gradient to #23252B (light: vertical to #F1F1EF), fixed, read as lighting
--nb-foreground#F5F5F4 / #1A1B1E
--nb-muted-foreground#8B8D94 / #71737Afaint step #5C5E66 for mono metadata
--nb-primary= foregroundthere is no accent; buttons and links are ink on ground
--nb-cardlinear #1D1F24 → #121316the one component; the skill cards and LinkCards share it
--nb-font-sans / --nb-font-monoGeist / Geist Mono, self-hosted via fontsourcereplaces Inter and JetBrains Mono
--nb-h1-*600, -0.03em, lowercase wordmark; verb headlines keep sentence case
status tokensNimbus defaults, desaturated slightlyused only inside asides and the setup matrix, never as accent

What stays from Nimbus untouched

Search (Pagefind), the sidebar rail and mobile sidebar, breadcrumbs, the .md twins, llms.txt and llms-full.txt, sitemap and JSON-LD, per-page OG images, and the prose linter. The OG template is the only Nimbus asset restyled: it becomes the brand card, so a shared skill page previews as its own card.

What is specific to this site

Building it

  1. Scaffold with npx @cloudflare/create-nimbus-docs@latest docs inside the repo (or a sibling repo; see the decision below), Cloudflare target, empty content.
  2. Write the tokens into globals.css from DESIGN.md; self-host Geist and Geist Mono; restyle the OG route to the card.
  3. Add scripts/sync-docs-data.py: reads the six SKILL.md files, MANIFEST.json, NOTICE, LEDGER.md; writes src/data/skills.json and src/data/people.json. Run it in CI next to check-integrity.sh so the site fails the same way the kit does.
  4. Author the Start pages and the seven skill pages (say this, get this; setup; handoffs), then the four workflow pages.
  5. Generate the People pages from the data; review the wording of each "what we carry" line with the author's own README as the source.
  6. Add the site to the foundry RIPPLE step in the repo: a new skill or mode is not done until its docs page and the sync data agree.
  7. Deploy to Cloudflare; point the README's skill links at the site once it is live.

Decisions to make