sheleg-design-skill 1.19.0 → 1.20.0

package/CHANGELOG.md

@@ -4,6 +4,86 @@ All notable changes to this project are documented in this file. The format
 follows [Keep a Changelog](https://keepachangelog.com/en/1.1.0/); versions
 follow [SemVer](https://semver.org/spec/v2.0.0.html).
 
+## [1.20.0] - 2026-08-12
+
+A fifteenth style pack, whose display typeface costs zero bytes — and three
+WCAG failures in the reference, one of them on the very element the design is
+remembered by.
+
+### Added
+
+- **`manpage`** — the fifteenth pack, extracted from `zernio.com` off the
+  server-rendered HTML of three pages and its two shipped stylesheets, which
+  declare 398 custom properties: the Tailwind v4 default ramps plus twelve
+  bespoke brand names (coral, cream, ink, charcoal, burgundy, each with a
+  `-muted` partner). Cream paper, a 48px display that never grows louder, a
+  576px argument column narrower than most prose, coral label chips that are
+  real `<h2>`s, `└` tree glyphs in their own grid column, and one dark code
+  frame as the focal point. For developer products whose buyer reads code —
+  APIs, SDKs, CLIs, MCP servers. Widened contract, a two-theme token layer, a
+  full reference kit, and reciprocal forks written into `blueprint`,
+  `datasheet`, `field-notes`, `instrument-console`, `scoreboard`, `showroom`
+  and `workbench`.
+- **The display face is the system monospace, and that is the whole identity.**
+  The reference loads exactly one webfont — a single variable Geist Sans — and
+  sets its headline, body, chips, code frames and FAQ in
+  `Menlo, Consolas, Monaco, "Liberation Mono", "Courier New", monospace`, which
+  is already on the reader's machine. No render-blocking request for the face
+  that carries the page, and no swap window on the headline. Substituting a
+  webfont mono is banned in the pack: it costs a request to look less native.
+- **The section heading is a chip and the chip is a real heading.** `LabelChip`
+  wraps its span in an `<h2>`, which is why the reference keeps a clean outline
+  — one `h1`, one `h2` per section — while reading as a printed specification.
+- **`FaqList` is a `<dl>` that never collapses.** The reference ships zero
+  `<details>` and zero `<summary>` on its FAQ: every answer is flat text in the
+  DOM, paired with its question, extractable without running JavaScript. The
+  component has no `collapsed` prop and will not get one.
+
+### Fixed
+
+Four corrections to the reference, every replacement a colour it already ships:
+
+- **The white button label fails AA.** `Start for Free` is white on coral at
+  **4.16:1**, on both the hero and the closing CTA. The fill is kept — the coral
+  button *is* the identity — and the label darkens to `--on-action` (ink) at
+  **4.55:1**. `--action-strong` is the reference's burgundy, carrying white at
+  13.34:1.
+- **The signature element is the least readable thing on the page.** The section
+  chip paints 12px coral on a coral/8 wash: **3.24:1**, worse than coral on bare
+  cream because the wash lifts the field. The wash and edge are kept so the chip
+  looks identical; the label becomes `--accent-ink` at **10.40:1**.
+- **The live-status green fails AA at 2.82:1.** `green-600` carries the credit
+  balance, the `online` badge and both weekly counters. Its own ramp cannot be
+  stepped into a legal set — `green-700` still misses at 4.35:1 and `green-800`
+  clears AA but separates by only 3.9 under dichromacy — so success takes
+  emerald-800, a ramp the reference also ships in full.
+- **One reduced-motion gate out of eight animations.** The reference gates its
+  40s logo marquee behind `motion-safe:` and leaves the hero blur-in, every
+  section rise, `fadeInScale`, `slideInRight`, `pulse`, `ping` and a **1.1s
+  infinite `waveform`** running for a reader who asked for stillness. The pack
+  collapses the whole surface, and infinite motion **stops** rather than
+  shortens.
+
+### Changed
+
+- `test/floors.json` raised: `validate.py` 1647 → 1788, `validate_palette.py`
+  716 → 791, `sloplint.py` 366 → 422.
+- **The stated-ratio checker earned its keep twice on this pack**, catching
+  `--ink-strong` claimed at 18.98:1 against a computed 19.44 and
+  `--on-action-strong` at 6.71:1 against 7.76 — both authored by hand, both
+  wrong, neither visible on inspection.
+- `SURFACE_COMPOSITION.md`: three counts corrected by measurement — the accent
+  resolves as `--accent` in **thirteen** packs, `--brand` in `field-notes` and
+  `--cta` in `orchard`. **B-016 stays open**: none of the three reaches a check,
+  because `in thirteen,` is not followed by a counted noun. This is the third
+  release in which they were fixed by hand.
+- `plugins/sheleg-design/.claude-plugin/plugin.json` said **thirteen** style
+  packs while fourteen shipped. `validate_counted_claims()` did not catch it:
+  its pattern wants `<number> [pluggable|locked] style packs` and the manifest
+  wrote `pluggable visual style packs`, so the intervening adjective hid a stale
+  count from the gate that exists to find them. Corrected to fifteen; the
+  pattern gap is the same class as B-016.
+
 ## [1.19.0] - 2026-08-12
 
 A fourteenth style pack, and the Refero style card it started from was wrong in

package/README.md

@@ -11,7 +11,7 @@ problem — invented colors, six accent hues, dark mode retrofitted later.
 
 This skill is the taste layer. It gives a coding agent **one motion
 methodology** for cinematic, scroll-driven pages, **a motion doctrine** that
-decides whether to animate before it decides how, and **fourteen locked style
+decides whether to animate before it decides how, and **fifteen locked style
 packs** with ready-made design tokens, so what it builds reads as one system
 instead of a pile of effects.
 
@@ -59,6 +59,7 @@ into the cinematic layer, and says so in its own *Motion flavor* section.
 | `scoreboard` | warm paper and warm near-black ink, 2–3px radii, an ink primary button, one hot orange that only ever marks, and a dark ledger of dotted-leader rows whose numbers are set in an aliased pixel face | products whose argument is an accumulating number — ads and SEO operators, growth tools, revenue dashboards sold on results |
 | `cyclorama` | a pale field cycling through six pastel stops on a 32s loop under near-black ink that never moves with it, a monospaced typewriter serif over mono, one orange used only as a fill, a particle organ that holds then redeploys, no shadows anywhere | enterprise AI transformation, applied-AI services, technical consultancies — where what is sold is a change of state and there is no screenshot worth showing |
 | `datasheet` | an off-white spec sheet ruled with dashed page guides, a live instrument built from hairline cells at radius zero, one vivid orange, Inter over JetBrains Mono, concentric radii from 16 to 2, and a dark alarm state the instrument enters when it detects the reader is hiding | B2B SaaS whose product is a verdict about the visitor, the request or the device — fraud and bot detection, device intelligence, identity and verification, API products sold on their payload |
+| `manpage` | cream paper under the reader's own system monospace — zero webfont bytes for the display face — a 48px display that never grows louder, a 576px argument column, coral label chips that are real `<h2>`s, `└` tree glyphs in their own grid column, and one dark code frame as the focal point | developer products whose buyer reads code — APIs, SDKs, CLIs, MCP servers, developer infrastructure, where the honest hero is the call itself |
 
 Each pack locks palette, type, texture, motion tokens, signature motifs and
 bans — and ships a `tokens/<pack>.css` to copy verbatim, so the agent never
@@ -133,7 +134,7 @@ skills.
 | `DESIGN_SYNC_BRIDGE.md` | The Claude Design contract: what a pack sends to claude.ai/design and in what shape, the rule for each of the four reference types, and the border motion does not cross |
 | `FIGMA_BRIDGE.md` | The design↔code contract: how a pack's tokens map onto Figma variable collections and modes, how to implement a design without importing raw values, and what cannot cross the border |
 | `AI_PRODUCT_PATTERNS.md` | The surfaces a model drives: the five states of a call, streaming instead of spinners, latency, provenance and uncertainty, agent confirmations, and the bans that keep it honest |
-| `styles/*.md` | The fourteen style packs — palette, type, texture, motion tokens, motifs, bans, and the traps each one carries |
+| `styles/*.md` | The fifteen style packs — palette, type, texture, motion tokens, motifs, bans, and the traps each one carries |
 | `styles/tokens/*.css` | The ready-made token layer per pack, copied verbatim instead of transcribed (`workbench` and `field-notes` each ship a light `:root` plus a `data-theme="dark"` twin) |
 | `styles/STYLE_PACK_TEMPLATE.md` | The pack contract as a skeleton, so a new style is authored against the same headings rather than improvised |
 
@@ -204,7 +205,7 @@ cd ./ds-workbench && npm install && npm run build
 then `/design-sync` in that directory, from Claude Code. Three layers cross: the
 pack's **bans** as the design system's own README, `styles.css` built from
 `tokens/<pack>.css` verbatim, and the components — a six-name spine that is
-identical in all fourteen kits, so switching packs swaps identity rather than API,
+identical in all fifteen kits, so switching packs swaps identity rather than API,
 plus each pack's signature parts. **Motion does not cross**, exactly as it does
 not cross into Figma: a kit is the static half of a pack, and saying so is what
 stops an agent inventing motion to fill the silence.
@@ -250,7 +251,7 @@ a pack's four widened sections used to make two gates *quieter* and still green.
 One honest limit: the npx installer is checked by asserting its runtime bundle
 walker exists, not by reading a file list — it has none by design. What proves
 it ships the right files is CI, which installs the bundle through **both**
-installers and `diff -r`s the result against the source, then builds all fourteen
+installers and `diff -r`s the result against the source, then builds all fifteen
 kits.
 
 `test/scenarios.md` (T1–T19) is the behavioral harness: fresh subagents given a

package/bin/cli.js

@@ -234,7 +234,7 @@ ${c("bold", "What it installs")}
   DESIGN_SYNC_BRIDGE.md   the Claude Design contract (what a pack sends, and
                        what does not cross)
   AI_PRODUCT_PATTERNS.md  chat / agent / streaming surfaces (honest state)
-  styles/              fourteen style packs — instrument-console (dark console),
+  styles/              fifteen style packs — instrument-console (dark console),
                        editorial-luxury (warm editorial), workbench (light/dark
                        product UI), briefing-room (dark 16:9 presentation deck),
                        atrium (warm cream consumer health), orchard (friendly
@@ -245,7 +245,9 @@ ${c("bold", "What it installs")}
                        maquette (cream axonometric models on a dark table),
                        scoreboard (warm paper, pixel numerals, a dark ledger),
                        datasheet (an off-white spec sheet whose live instrument
-                       goes dark when it catches the reader hiding) —
+                       goes dark when it catches the reader hiding),
+                       manpage (a developer landing page set in the reader's
+                       own system monospace, cream paper, coral label chips) —
                        plus a ready-made token CSS per pack and
                        STYLE_PACK_TEMPLATE.md for authoring more
 `);
@@ -327,7 +329,7 @@ function main() {
       `  ${c("dim", "SKILL.md")}            the agent skill\n` +
       `  ${c("dim", "SHELEG_DESIGN.md")}    the full reference\n` +
       `  ${c("dim", "MOTION_DOCTRINE.md")}  whether to animate at all — read before any animation\n` +
-      `  ${c("dim", "styles/")}             style packs + token CSS (instrument-console / editorial-luxury / workbench / briefing-room / atrium / orchard / field-notes / cyclorama / showroom / blueprint / prism / maquette / scoreboard / datasheet)\n\n` +
+      `  ${c("dim", "styles/")}             style packs + token CSS (instrument-console / editorial-luxury / workbench / briefing-room / atrium / orchard / field-notes / cyclorama / showroom / blueprint / prism / maquette / scoreboard / datasheet / manpage)\n\n` +
       `Your Cursor / Claude agent can now discover the skill and build\n` +
       `cinematic, scroll-driven pages — or style product UI (dashboards, admin,\n` +
       `internal tools) from a standalone pack — on its principles.\n\n` +

package/cursor/rules/sheleg-design.mdc

@@ -33,7 +33,10 @@ numbers are set in an aliased pixel face, for a product whose argument is
 an accumulating number; datasheet — an off-white spec
 sheet whose focal element is a live instrument ruled at radius zero and
 which re-skins itself dark when it detects the reader is hiding, for B2B
-SaaS whose product is a verdict about the visitor or the device);
+SaaS whose product is a verdict about the visitor or the device;
+manpage — a developer landing page set in the reader's own system
+monospace on cream paper, coral label chips that are real headings and a
+dark code frame as the argument, for APIs, SDKs and CLIs);
 otherwise follow the contract below (self-contained on purpose).
 
 ## Whether to animate at all — before how

package/kits/manpage/.design-sync/config.json

@@ -0,0 +1,14 @@
+{
+  "pkg": "@sheleg-design/manpage",
+  "globalName": "ShelegManpage",
+  "shape": "package",
+  "buildCmd": "npm run build",
+  "srcDir": "src",
+  "tsconfig": "tsconfig.json",
+  "cssEntry": "src/styles.css",
+  "docsDir": "src",
+  "readmeHeader": ".design-sync/conventions.md",
+  "guidelinesGlob": [
+    "guidelines/*.md"
+  ]
+}

package/kits/manpage/.design-sync/conventions.md

@@ -0,0 +1,75 @@
+# Manpage — the contract this design system ships under
+
+**Register.** Choose Manpage for **a developer product whose buyer reads code for
+a living**: an API, an SDK, a CLI, a protocol, an MCP server, developer
+infrastructure. The landing page *is* the documentation, set in the typeface of
+the documentation — the honest hero is not a screenshot but six lines of a request.
+The fork people get wrong is against `datasheet`, which shares the off-white
+paper, the hairlines and the one warm orange-red: there the page is about **the
+reader** and its mono carries a reading the product produced (*what did you get?*);
+here the page is about **the product** and its mono is the whole body face, showing
+a call the reader will write (*what will you type?*). Build every screen against
+`var(--…)` and never a literal.
+
+**The display face is free, and that is the identity.** One webfont ships — a
+single variable Geist Sans — and everything visible is set in `--font-mono`, which
+is the **system** monospace stack: Menlo, Consolas, Monaco. There is nothing to
+download for the face that carries the whole page, no swap window on the headline,
+and the slight variation between machines is the point — it reads as the terminal
+rather than as art direction. Substituting a webfont mono costs a render-blocking
+request to look less native. Do not.
+
+**The accent is a mark, a fill and a wash — almost never a word.** `--accent`
+measures 3.61:1 on the field: enough for a non-text mark and for large text at 24px
+and above, not enough at body size. Where a word must be coral, use `--accent-ink`
+at 11.59:1. The primary button keeps the coral fill — the coral button *is* the
+identity — but its label is `--on-action`, which is ink at 4.55:1, because white on
+coral measures 4.16:1 and fails AA. `--action-strong` is the burgundy that carries
+white at 13.34:1.
+
+**The section heading is a chip, and the chip is a real heading.** `LabelChip`
+wraps its span in an `<h2>`. That single decision is why the page keeps a clean
+outline — one `h1`, one `h2` per section — while reading as a printed specification.
+An eyebrow that merely sits above a heading is not this component and does not earn
+the identity.
+
+**The width ladder is the layout.** The argument runs in `--measure-text` (576px),
+narrower than most prose; the hero and its code frame take `--measure-hero`
+(768px); only evidence widens — `--measure-proof` for the testimonial grid,
+`--measure-foot` for the footer, `--measure-wall` for the logo wall. Below 896px
+every step collapses to `--measure-text` and the rhythm carries the structure
+instead.
+
+**Radii stay small and nothing is a pill.** 2px on the label chip, 6px on a
+control, 8px on a button, 12px on a card, 16px on a panel. A fully round control
+breaks the printed-tag reading immediately.
+
+**One hairline, no shadow.** `--lift-card` is a single 1px bottom line. Nothing
+casts downward, nothing lifts on hover, nothing scales. The one glow that exists,
+`--glow-accent`, is a glow and not an elevation.
+
+**The 4px frame is load-bearing.** `body { padding: var(--frame) }` insets the
+whole document from the window edge so every panel closes against a visible margin
+of paper. It is the cheapest identity move in the system and the easiest to delete
+by accident in a layout refactor — it has a token name so it has something worth
+preserving.
+
+**Status is never by colour alone.** Every status carries its word, exactly as the
+reference does — `online`, `Done`, `GET`, `POST`. The light set clears both gate
+floors (17.5 at full colour, 8.1 under dichromacy); the dark set clears the hard
+floor at 10.1 and runs tight at 6.8 under dichromacy, which the word covers. Note
+that `--warning` is a near-black brown by arithmetic rather than by taste: the
+coral accent occupies the warning hue, and every amber that reads as a warning
+collides either with the accent under dichromacy or with danger at full colour.
+
+**Motion is entry only, and then the page holds still.** One `fadeInBlur` on the
+headline (0.6s, `--ease-out`, after `--stagger`), one entrance per section on the
+way down, and nothing moves again — no hover lift, no drifting gradient, no
+counter that keeps counting. **No scroll clock, no scrubbing, no parallax:** this
+is the calmest pack in the family. At `prefers-reduced-motion: reduce` every
+duration and the stagger go to zero, the blur never applies, and infinite motion
+**stops** rather than shortens.
+
+**The FAQ does not open.** `FaqList` is a `<dl>` whose answers are always visible,
+because a collapsed answer is an answer no machine can extract. There is no
+`collapsed` prop and there will not be one.

package/kits/manpage/README.md

@@ -0,0 +1,39 @@
+# @sheleg-design/manpage
+
+The React reference kit for the SHELEG **Manpage** style pack — cream paper under
+the reader's own system monospace, a 48px display that never grows louder, coral
+label chips that are real headings, and one dark code frame as the argument.
+
+It is generated from the pack, not authored beside it: `src/styles.css` opens with
+`styles/tokens/manpage.css` byte for byte, and the rules the design agent must obey
+are in [`.design-sync/conventions.md`](./.design-sync/conventions.md).
+
+```bash
+npm install && npm run build
+```
+
+Then run `/design-sync` in Claude Code from this directory to push it to
+claude.ai/design.
+
+## The spine, and this pack's five
+
+`Button`, `Card`, `Chip`, `Stat`, `Heading` and `Rule` are identical in name, props
+and types across every SHELEG kit — switching packs swaps identity, not API.
+
+The five that are this pack's own:
+
+| Component | What it is |
+|---|---|
+| `LabelChip` | the coral section tag that **is** an `<h2>` — the signature element |
+| `CodeFrame` | the dark panel holding the call; scrolls, never reflows |
+| `TreeItem` | a `└` glyph in its own grid column, never a text prefix |
+| `FaqList` | a `<dl>` whose answers are always visible, so a machine can quote them |
+| `EndpointRow` | a method badge, a path in mono, one line of prose |
+
+## The two things most likely to be broken
+
+**The 4px body frame.** `body { padding: var(--frame) }` is what makes the page
+read as a sheet laid on a desk. Deleting it produces no error and no failing test.
+
+**The label chip's ink.** It is `--accent-ink`, not `--accent`. Coral on the chip's
+own wash measures 3.24:1; burgundy measures 10.40:1, and the chip looks the same.

package/kits/manpage/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@sheleg-design/manpage",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "build": "tsc -p tsconfig.json"
+  },
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "devDependencies": {
+    "typescript": "^5.6.0",
+    "@types/react": "^18.3.0"
+  }
+}

package/kits/manpage/src/Button.md

@@ -0,0 +1,23 @@
+---
+category: Actions
+---
+
+One accent fill per view. In this pack the fill is `--action` — the reference's
+own coral, kept because the coral button *is* the identity — but the label is
+`--on-action`, which is ink rather than white. White on coral measures 4.16:1 and
+does not clear AA at the 16px semibold the reference ships; ink clears at 4.55:1.
+Where a white label is non-negotiable, hover onto `--action-strong` (burgundy,
+13.34:1).
+
+`secondary` is the white 1px-bordered control the reference pairs with it — on a
+developer page that is usually an OAuth continue. `ghost` changes ink and nothing
+else.
+
+Transitions `background-color` over `--dur-instant` and nothing more: no lift, no
+scale, no shadow bloom.
+
+```tsx
+<Button onClick={start}>Start for Free</Button>
+<Button variant="secondary" onClick={google}>Continue with Google</Button>
+<Button variant="ghost" size="sm" onClick={skip}>I'll do this later</Button>
+```

package/kits/manpage/src/Button.tsx

@@ -0,0 +1,33 @@
+import type { ReactNode } from 'react';
+
+export interface ButtonProps {
+  /** `primary` is the accent fill — at most one per view. */
+  variant?: 'primary' | 'secondary' | 'ghost';
+  size?: 'sm' | 'md' | 'lg';
+  disabled?: boolean;
+  onClick?: () => void;
+  children: ReactNode;
+  className?: string;
+}
+
+export function Button({
+  variant = 'primary',
+  size = 'md',
+  disabled = false,
+  onClick,
+  children,
+  className,
+}: ButtonProps) {
+  return (
+    <button
+      type="button"
+      className={['mp-btn', `mp-btn--${variant}`, `mp-btn--${size}`, className]
+        .filter(Boolean)
+        .join(' ')}
+      disabled={disabled}
+      onClick={onClick}
+    >
+      {children}
+    </button>
+  );
+}

package/kits/manpage/src/Card.md

@@ -0,0 +1,16 @@
+---
+category: Surfaces
+---
+
+`--surface` on `--rule`, radius `--r-card`, padding `--pad-card`, and a single 1px
+bottom line for lift. The reference uses it for testimonials at
+`--measure-proof`, three across.
+
+**No hover state.** The card does not lift, tint or shift on this pack — it is a
+quotation on paper, and paper does not respond to a cursor.
+
+```tsx
+<Card title="Dev Singh" meta="Founder, ad-attribution SaaS">
+  I love the speed and quality here.
+</Card>
+```

package/kits/manpage/src/Card.tsx

@@ -0,0 +1,24 @@
+import type { ReactNode } from 'react';
+
+export interface CardProps {
+  title?: string;
+  /** Right-aligned metadata on the title row: a count, an id, a timestamp. */
+  meta?: string;
+  children: ReactNode;
+  className?: string;
+}
+
+export function Card({ title, meta, children, className }: CardProps) {
+  const head = title !== undefined || meta !== undefined;
+  return (
+    <section className={['mp-card', className].filter(Boolean).join(' ')}>
+      {head && (
+        <div className="mp-card__head">
+          {title !== undefined && <h3 className="mp-card__title">{title}</h3>}
+          {meta !== undefined && <span className="mp-card__meta">{meta}</span>}
+        </div>
+      )}
+      <div className="mp-card__body">{children}</div>
+    </section>
+  );
+}

package/kits/manpage/src/Chip.md

@@ -0,0 +1,15 @@
+---
+category: Data
+---
+
+The generic tag. For the section-heading chip that carries this pack's identity,
+use `LabelChip` instead — it wraps a real `<h2>` and this one does not.
+
+`neutral` is `--surface-2` under `--ink-soft`. `accent` is `--accent-wash` under
+`--accent-ink`, never under `--accent`: coral on its own wash is 3.24:1.
+`selected` adds a `--accent-edge` border.
+
+```tsx
+<Chip>CASE STUDY</Chip>
+<Chip tone="accent" selected>Free credits</Chip>
+```

package/kits/manpage/src/Chip.tsx

@@ -0,0 +1,25 @@
+import type { ReactNode } from 'react';
+
+export interface ChipProps {
+  children: ReactNode;
+  selected?: boolean;
+  tone?: 'neutral' | 'accent';
+  className?: string;
+}
+
+export function Chip({ children, selected = false, tone = 'neutral', className }: ChipProps) {
+  return (
+    <span
+      className={[
+        'mp-chip',
+        `mp-chip--${tone}`,
+        selected ? 'mp-chip--selected' : undefined,
+        className,
+      ]
+        .filter(Boolean)
+        .join(' ')}
+    >
+      {children}
+    </span>
+  );
+}

package/kits/manpage/src/CodeFrame.md

@@ -0,0 +1,22 @@
+---
+category: Surfaces
+---
+
+The focal element of the hero, and the only dark surface on the light theme. A
+`--r-panel` frame with three window dots, a filename, a language label and a copy
+affordance — because the page's argument is the call, not a screenshot of a
+dashboard.
+
+Two rules it does not bend. It **scrolls horizontally and never reflows**: a
+wrapped code sample is a wrong code sample. And it **never shrinks its type** below
+`--t-mono` (12px) on small screens — the sample stops being evidence the moment it
+becomes unreadable.
+
+Place it at `--measure-hero` and let the fold crop it. The crop is what signals
+there is more.
+
+```tsx
+<CodeFrame filename="zernio.ts" language="TypeScript">
+  {snippet}
+</CodeFrame>
+```

package/kits/manpage/src/CodeFrame.tsx

@@ -0,0 +1,26 @@
+import type { ReactNode } from 'react';
+
+export interface CodeFrameProps {
+  /** The filename in the header row — `zernio.ts`, `main.py`. */
+  filename: string;
+  /** The language label on the right of the header row. */
+  language?: string;
+  /** Rendered as-is; highlight upstream. Never reflowed, never resized. */
+  children: ReactNode;
+  className?: string;
+}
+
+export function CodeFrame({ filename, language, children, className }: CodeFrameProps) {
+  return (
+    <figure className={['mp-code', className].filter(Boolean).join(' ')}>
+      <figcaption className="mp-code__head">
+        <span className="mp-code__dots" aria-hidden="true">
+          <i /><i /><i />
+        </span>
+        <span className="mp-code__name">{filename}</span>
+        {language !== undefined && <span className="mp-code__lang">{language}</span>}
+      </figcaption>
+      <pre className="mp-code__body"><code>{children}</code></pre>
+    </figure>
+  );
+}

package/kits/manpage/src/EndpointRow.md

@@ -0,0 +1,20 @@
+---
+category: Data
+---
+
+The "what you can do" row: a method badge, a path in mono, and one line of prose.
+It is how this pack lists capability without a feature grid — each row is a thing
+you can call, so the list reads as an index rather than as marketing.
+
+The badge is a status token on its own tint at `--r-chip`: `--info` for writes,
+`--success` for reads. The method word is always spelled out, never colour alone —
+`GET` and `POST` separate by 29.2 at full colour but only 16.3 under dichromacy,
+and a reader who cannot tell them apart still has to be able to read them.
+
+`selected` marks the row the surrounding copy is talking about, using
+`--accent-wash`. At most one per list.
+
+```tsx
+<EndpointRow method="GET" path="/connect/{platform}">One OAuth flow for every platform.</EndpointRow>
+<EndpointRow method="POST" path="/posts" selected>One call, 16 platforms.</EndpointRow>
+```

package/kits/manpage/src/EndpointRow.tsx

@@ -0,0 +1,33 @@
+import type { ReactNode } from 'react';
+
+export type Method = 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE';
+
+export interface EndpointRowProps {
+  method: Method;
+  /** The path, set in mono: `/whatsapp/phone-numbers/purchase`. */
+  path: string;
+  children?: ReactNode;
+  /** Drawn as the selected row — the one the surrounding copy is about. */
+  selected?: boolean;
+  className?: string;
+}
+
+export function EndpointRow({ method, path, children, selected = false, className }: EndpointRowProps) {
+  return (
+    <div
+      className={[
+        'mp-endpoint',
+        selected ? 'mp-endpoint--selected' : undefined,
+        className,
+      ]
+        .filter(Boolean)
+        .join(' ')}
+    >
+      <span className={['mp-endpoint__method', `mp-endpoint__method--${method.toLowerCase()}`].join(' ')}>
+        {method}
+      </span>
+      <code className="mp-endpoint__path">{path}</code>
+      {children !== undefined && <span className="mp-endpoint__note">{children}</span>}
+    </div>
+  );
+}

package/kits/manpage/src/FaqList.md

@@ -0,0 +1,24 @@
+---
+category: Data
+---
+
+A `<dl>` / `<dt>` / `<dd>` whose answers are **always visible**. The reference
+ships zero `<details>` and zero `<summary>` elements on this section, and that is
+the single best decision on its page: every answer is flat text in the DOM,
+semantically paired with its question, readable without running a line of
+JavaScript.
+
+There is no `collapsed` prop and there will not be one. An accordion trades an
+extractable answer for a click, and the answer is the reason the section exists.
+Nine questions expanded at 14px cost less vertical space than most people assume,
+and nothing here animates because nothing here opens.
+
+Pair it with `FaqSchema` in the host app so the visible text and the `FAQPage`
+JSON-LD come from the same array — the reference publishes the section without the
+schema, which is the gap this component exists to close.
+
+```tsx
+<FaqList entries={[
+  { q: 'What happens when a post fails?', a: 'We auto-retry, then fire a webhook with the reason.' },
+]} />
+```

package/kits/manpage/src/FaqList.tsx

@@ -0,0 +1,31 @@
+import type { ReactNode } from 'react';
+
+export interface FaqEntry {
+  q: string;
+  a: ReactNode;
+}
+
+export interface FaqListProps {
+  entries: FaqEntry[];
+  className?: string;
+}
+
+/**
+ * A definition list, always open. There is deliberately no `collapsed` prop:
+ * an accordion here costs the extractable answer and buys nothing.
+ */
+export function FaqList({ entries, className }: FaqListProps) {
+  return (
+    <dl className={['mp-faq', className].filter(Boolean).join(' ')}>
+      {entries.map(({ q, a }) => (
+        <div className="mp-faq__row" key={q}>
+          <dt className="mp-faq__q">{q}</dt>
+          <dd className="mp-faq__a">
+            <span className="mp-faq__glyph" aria-hidden="true">└</span>
+            <span>{a}</span>
+          </dd>
+        </div>
+      ))}
+    </dl>
+  );
+}