Skip to content
ultraweb
ultraweb

five rooms, one paper trail

Install

artifact · 7 of 11

Sitemap

Pages and routes, the section-by-section blueprint for each one, and the server/client boundary plan.

design/SITEMAP.md · 18,016 B · Phase 4 — Structure

Sitemap — ultraweb showcase

Pages

PageRoutePurpose (one sentence)Conversion goalNav
Home/The pitch that audits itself: what ultraweb is, where it sits, this build's report card, the terminal.Copy the install (secondary: GitHub)header brand
Session/sessionThe guided session in depth — interview, mockup round, checkpoints, the two dials priced in their own units.Install (via "I stay in charge" confidence)header 1
Skills/skillsThe studio floor enumerated: all 80 skills, 3 subagents, hooks, the cast.Install (via depth proof)header 2
Craft/craftWhy the output isn't slop: constitution, banned list (quoted), gates, award-canon, STACK discipline.Install (via trust)header 3
Receipts/receiptsThis build's complete paper trail: report card, dated verdicts, mockup evidence, screenshots, git ledger.GitHub (secondary: install)header 4
Artifact/receipts/[artifact]One committed design/ artifact, rendered readable (brief, direction, system, sitemap, mockups, reviews, qa, progress, identity, assets, seo).Read next artifact— (from /receipts)
Install/installThe two commands, prerequisites, the honest bill, and the cheaper on-ramps.THE conversionheader CTA

Legal pages — logged jurisdiction exception: none. The site is the purely non-commercial showcase of a free open-source plugin by an individual: nothing sold, no ads, zero data processing (no analytics, no cookies, no forms, self-hosted fonts, zero third-party requests). Impressumspflicht (§5 DDG, geschäftsmäßig) and an Art. 13 notice are judged not triggered; decision reversible via iterate and listed in PROGRESS §Decisions. (gate-content reads this paragraph instead of failing on a missing /impressum.)

Navigation

Header: Session · Skills · Craft · Receipts + CTA: Install/install. Wordmark (with terracotta cursor block) → /. Footer (3 groups): plugin: GitHub repo · ROSTER.md · STACK.md · v1.7.0 · license — this build: /receipts · the losing mockups (served originals) · git phase ledger — meta: Built by Iwan Braun · colophon line ("built by the thing it's selling — guided session, 2026-08-14"). Active-state: exact / · exact /session /skills /craft /install · prefix /receipts/*. Mobile nav: same order, overlay panel (overlays skill), CTA last and full-width. ⌘K command palette (command-palette skill): routes + all 11 artifacts + the terminal's real commands; accelerator only — never the only path. /search no-JS fallback NOT built (static site, full nav coverage; palette indexes nothing nav doesn't reach — recorded deviation, gate-accessibility verifies keyboard path through plain nav).

Route tree

app/
  (site)/page.tsx                     /
  (site)/session/page.tsx
  (site)/skills/page.tsx
  (site)/craft/page.tsx
  (site)/receipts/page.tsx
  (site)/receipts/[artifact]/page.tsx  ← dynamic, 11 real items, generateStaticParams
  (site)/install/page.tsx
  global-not-found.tsx                 ← designed: terminal "command not found" (routing)
public/mockups/{a,b,c}-*.html + index.html  ← the throwaway originals, copied verbatim from design/mockups/, served statically (never rebuilt as components)

Segments needing designed states: /receipts/[artifact] → not-found (unknown artifact = terminal-style "no such file"); all routes SSG — no loading.tsx needed. 404 is site-wide designed (the corners are craft).


Part 2 — Section blueprints (wireframe)

Site-level (blueprinted once):

  • header — skill: navigation — opaque bg, wordmark honoring 2x clear space, 4 labels + 1 CTA, 1px bottom hairline appears on scroll (level 2, no shadow, no glass) — mobile: overlay panel, order preserved.
  • footer — skill: footer — variant: closing statement — density: mono wordmark large (mono variant), 3 link groups, colophon line + version — width: contained — job: end on identity, not a link dump.
  • 404 — skill: routing + hero — a terminal frame: claude — ~/ultraweb-site with command not found: <path> + help output listing the five routes — job: the corner that proves craft.
  • ⌘K — skill: command-palette — grouped: Pages / Artifacts / Commands — combobox ARIA, focus trap, / also opens.

/ (Home) — goal: copy the install

  1. hero — skill: hero — variant: split terminal-led (Reverse 5/7, terminal Edge-Bleeds right) — density: H1 ≤8 words + sub ≤20 + 1 primary CTA ("Install") + 1 ghost ("Read the paper trail") + the terminal frame — width: wide w/ bleed — rhythm: open, lattice ground — job: state the claim, then let the visitor type — SIGNATURE: the typeable terminal (tab-complete over the 5 real commands; reduced-motion/noscript/SSR: completed static transcript; H1 is LCP and never waits on it)
  2. where-it-sits — skill: feature-sections — variant: honest-comparison split (v0/Lovable/Bolt + plain Claude Code vs ultraweb) — density: 2 columns + 1 verdict line, ≤90 words total — width: contained — rhythm: tight after hero — job: name the trade (speed + tokens for constitution + critic + paper trail)
  3. the-session — skill: feature-sections — variant: numbered editorial list — density: 3 items (interview → mockups → checkpoints), H3 + ≤22 words each — width: narrow — rhythm: compressed — job: the human keeps the two decisions that matter → exit /session
  4. report-card — skill: data-display — variant: stat block + ledger (fed ONLY from design/RECEIPTS.json) — density: 4 headline stats + ≤10 ledger rows + gate strip 7 cells — width: wide, table Edge-Bleeds right — rhythm: compressed, quietest neighbor of the signature is above — job: prove this build happened; empty cells stay empty → exit /receipts
  5. the-floor — skill: data-display — variant: dense index excerpt — density: 10 real roster rows + counts 80 / 3 / 7 — width: contained — rhythm: standard — job: scale is real → exit /skills
  6. no-slop — skill: feature-sections — variant: quiet manifesto strip — density: 7 gate names w/ ≤8-word verifications + 1 constitution line — width: narrow — rhythm: air before the close — job: why it won't embarrass you → exit /craft
  7. install-closer — skill: feature-sections — variant: full-width closer — density: 2 copy-ready commands + 1 CTA + GitHub link — width: full-bleed — rhythm: release before, the ask alone — job: close Mobile: terminal drops below H1 full-width (scrolls inside its frame, min-width:0 lesson from mockup C); ledger re-forms as key/value rows; nothing reorders.

/session — goal: install

  1. opener — skill: hero — variant: typographic — density: H1 ≤8 + the two dials as compact figures (engagement: minutes · scope: relative size, labeled estimate) — width: contained — job: the loop is a dial, not a leap
  2. the-interview — skill: feature-sections — variant: alternating split w/ replay — density: THIS build's 3 questions + picked answers, dated — width: contained, transcript panel offset — rhythm: evidence — job: questions are generated from the prompt, never a form
  3. the-mockup-round — skill: cards — variant: evidence trio (Framed Evidence) — density: 3 candidates, the 2 losers labeled as such, screenshot + 1-line identity + "view the real artifact" link to /mockups/*.html — width: wide — rhythm: the page's asymmetry (Staggered Rail) — job: the visible proof the guided round happened
  4. the-checkpoints — skill: data-display — variant: six-checkpoint table × engagement dial — density: 6 rows (what you see, minutes of your time, which levels block) — width: contained — job: price the loop in YOUR minutes
  5. two-clocks — skill: feature-sections — variant: quiet split — density: PROGRESS.md's four questions + the resume ladder in ≤60 words — width: narrow — rhythm: air — job: you can walk away
  6. studio-and-memory — skill: feature-sections — variant: split — density: /studio dashboard (dev-only; honest caveat: activity feed is hook-written, hooks not registered in THIS build's session) + taste fingerprint w/ heretic seat, last-10 decay — width: contained — job: the studio watches itself and remembers you
  7. cta — skill: feature-sections — variant: closer — density: 1 H2 + install CTA — width: full-bleed — job: ask Mobile: mockup trio stacks loser-first→winner; checkpoint table scrolls in frame.

/skills — goal: install via depth

  1. opener — skill: hero — variant: typographic compact — density: H1 + counts (1 orchestrator + 79 specialists · 8 tiers · 3 subagents) — width: contained — job: the floor in numbers
  2. the-index — skill: data-display — variant: THE browsable roster (all 80 from ROSTER.md, grouped by tier, client-side text filter, ⌘K jumps here) — density: 80 rows × name + one-line scope — width: wide — rhythm: the dense typographic centerpiece; filter sticky on scroll — job: proof by enumeration, browse as a rewarding surface
  3. the-specialists — skill: cards — variant: icon-lede trio, deliberately non-identical weights — density: 3 (design-judge Opus 5 · pixel-qa Sonnet 5 · stack-doctor Opus 5) + 1 routing line (judgment up, sweeps down) — width: contained — job: who argues with whom
  4. hooks-and-cast — skill: feature-sections — variant: split — density: write-time hooks (antislop.sh ~30ms grep; capability framing + this session's negative probe stated) · the 8 fictional clients as the worked-example thread — width: narrow — rhythm: air — job: the corners of the system
  5. cta — closer — job: ask Mobile: filter input sticky top; rows stay dense (mono discipline).

/craft — goal: install via trust

  1. opener — skill: hero — variant: typographic — density: H1 + 1 line + link to the constitution file — width: contained — job: taste is written down
  2. the-banned-list — skill: feature-sections — variant: quotation wall — density: the exact banned strings per DIRECTION.md's named exception, rendered as visible quotations inside the single data-quoted-slop component; ≤14 quoted items — width: contained, offset — rhythm: the page's asymmetry — job: name the enemy verbatim (the one licensed surface)
  3. the-required-list — skill: feature-sections — variant: numbered editorial list — density: 6 items ≤20 words (OKLCH verified · type conviction · asymmetry · motion vocabulary · states · AA floor) — width: narrow — job: what must exist instead
  4. seven-gates — skill: data-display — variant: gate table — density: 7 rows (name + what it verifies empirically) + the UNVERIFIED third-verdict explainer ≤40 words — width: wide — job: enforcement is empirical, honesty has a verdict for missing tools
  5. award-canon — skill: feature-sections — variant: split — density: 32 dossiers → 25 patterns, 2017–2026 + "steal the principle, never the surface" + 3 named dated-fashions — width: contained — job: taste has a study library
  6. stack-discipline — skill: data-display — variant: manifest excerpt — density: ≤8 pin rows + verified dates + 30-day expiry + this build's live example (motion 13 released; built on verified 12.42.2) — width: contained — job: verified, not remembered
  7. cta — closer — job: ask Mobile: quotation wall stacks; tables scroll in frame.

/receipts — goal: GitHub

  1. report-card — skill: data-display — variant: full instrument (RECEIPTS.json ONLY) — density: headline stats + per-phase duration table + 7-gate table w/ fix rounds + screenshot count — width: wide, Edge Bleed — job: counted, not estimated
  2. the-session-ledger — skill: data-display — variant: dated decision timeline — density: every human decision near-verbatim from REVIEWS.md/MOCKUPS.md (interview R1, CP2 pick, CP4, CP6) — width: contained (Margin Note rail carries dates) — job: the guided session, named and dated
  3. mockup-evidence — skill: cards — variant: evidence trio (same component as /session §3) — density: 3, losers labeled, served-original links — width: wide — job: the two roads not taken
  4. the-eyes-output — skill: cards — variant: screenshot contact sheet (Framed Evidence grid) — density: every design/screenshots/ + qa/ capture, mono caption bars — width: wide — job: what the browser actually saw
  5. reading-room — skill: cards — variant: artifact index list — density: 11 artifacts, name + role + byte count → /receipts/[artifact] — width: contained — job: read everything
  6. git-ledger — skill: data-display — variant: commit table — density: phase-boundary commits, sha + message — width: narrow — job: the second ledger
  7. honesty-note — skill: feature-sections — variant: quiet closing note — density: ≤80 words: what is omitted and why (API calls/tokens not countable from artifacts → omitted; hooks not registered this session → capability, not evidence) — width: narrow — rhythm: air — job: the empty cell beats the invented one Mobile: all tables scroll in frame; contact sheet 2-up.

/receipts/[artifact] — goal: read next

  1. document — skill: content-cms (styled prose, NEVER default prose-gray) + Margin Note 3/9: sticky rail (artifact nav + file meta: filename, bytes, phase written) beside the rendered markdown — width: prose — job: the document itself, readable
  2. prev/next — skill: navigation — variant: artifact pager — density: 2 links — job: keep reading Mobile: rail becomes a top artifact-select; content full-width.

/install — goal: THE conversion

  1. the-commands — skill: hero — variant: command-first (the two marketplace lines huge, copy-ready) — density: 2 commands + confirm-dialog note + /reload-plugins — width: contained — job: the two lines
  2. did-it-work — skill: feature-sections — variant: numbered list — density: 3 checks (/plugin lists it · /ultraweb answers · Phase 0 re-verifies) + update command — width: narrow — job: no dead ends
  3. prerequisites — skill: data-display — variant: checklist table — density: 5 rows (Claude Code · Node+npm · Playwright MCP "the eyes" w/ honest-UNVERIFIED fallback · Vercel CLI optional · token headroom) — width: contained — job: honest requirements
  4. the-bill — skill: feature-sections — variant: editorial — density: engagement dial in MINUTES (per-checkpoint table) · scope dial as relative sizing explicitly labeled back-of-envelope (README's own words) · 1 prose line + link: the 2026-07-28 autonomous build's measured receipt lives in the plugin README (attributed, dated — NO table here, interview R1) — width: narrow — rhythm: air, slow read — job: price it honestly in the right units
  5. on-ramps — skill: feature-sections — variant: split — density: retrofit (zero-risk scored gap report) · iterate (surgical change passes) ≤30 words each — width: contained — job: cheaper first tastes
  6. other-door — skill: feature-sections — variant: closer — density: local-clone marketplace alternative (2 commands) + GitHub CTA — width: full-bleed — rhythm: release — job: the second door, then done Mobile: command blocks full-width, copy targets ≥44px.

Part 3 — RSC/client boundary plan (app-structure)

Layouts and pages: 100% server. "use client" exists ONLY in these leaves (each justified in one sentence); target ≤12 total:

Client leafJustification
components/layout/focus-on-navigate.tsxmoves focus to #main-heading after client route changes (a11y)
components/motion/reveal.tsxthe one whileInView entrance wrapper sections compose
components/sections/terminal.tsxTHE signature — input state, command history, tab-complete
components/command-palette.tsx⌘K dialog: open state, filter, keyboard trap
components/ui/copy-button.tsxclipboard write + copied feedback state
app/skills/_components/roster-filter.tsxclient text filter over the 80 rows (URL ?q= read once on mount for shareability)
components/layout/mobile-menu.tsxoverlay open state
app/(studio)/studio/feed.tsxdev-only studio activity poller (exempt from the target count's spirit but listed for honesty)

State homes: all page data = build-time reads (RSC, static); shareable filter = URL ?q=; ephemeral (menu open, palette open, terminal history) = leaf useState; forms/mutations = none exist; theme = none (single dark world, no provider — the root layout renders NO context providers). Server→client props: serializable data only (roster rows, receipts, transcript lines as plain objects/strings). Mutations/server actions: none. params awaited everywhere (Next 16 Promise).

Part 3 — as-built amendments (Phase 6 close)

  • components/layout/header.tsx is itself the "use client" leaf (hide-on-scroll state) — the canonical nav pattern; add to the leaf table.
  • components/command-palette.tsx built (native <dialog>, combobox ARIA, ⌘K/Ctrl-K + / + header chip via a window event); routes + 11 artifacts + 2 copy-commands + evidence links.
  • Roster filter lives at app/(site)/skills/_components/roster-filter.tsx (route group; Part 3 wrote the path without it). URL seeding via useSyncExternalStore (lint-driven; keeps all 80 rows in SSR).
  • components/motion/reveal.tsx REWRITTEN during integration: motion/react whileInView SSR'd inline opacity:0 (content gated on JS — defect). Now visible-by-construction: JS hides below-fold only post-hydration, reveals on intersect, 2s failsafe. No motion import.
  • Evidence serving: design/screenshots is copied to public/receipts-shots (re-synced at receipts regen before ship); mockup previews at public/mockups/{a,b,c}-preview.png.
  • 404 = app/global-not-found.tsx (terminal frame, real 404 status, help output).
esc

Pages

Home/
The session/session
The studio floor/skills
Why it isn't slop/craft
The paper trail/receipts
Install/install

Artifacts

The briefdesign/BRIEF.md
Assets intakedesign/ASSETS.md
The directiondesign/DIRECTION.md
The mockup rounddesign/MOCKUPS.md
The design systemdesign/SYSTEM.md
The identitydesign/IDENTITY.md
Sitemap & blueprintsdesign/SITEMAP.md
Progress ledgerdesign/PROGRESS.md
QA & gatesdesign/QA.md
Checkpoint reviewsdesign/REVIEWS.md
RECEIPTS.jsondesign/RECEIPTS.json

Commands

Copy: /plugin marketplace add blyatiful1/ultraweb
Copy: /plugin install ultraweb@ultraweb

Evidence

Losing mockup A — The Ledgerthrowaway artifact
Losing mockup B — The Dossierthrowaway artifact
Winning mockup C — The Terminalthrowaway artifact
Plugin source on GitHubblyatiful1/ultraweb
This site's source on GitHubblyatiful1/ultraweb-site