hyperframes/research/docs-audit/current-state.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>HyperFrames docs — current state</title>
    <style>
      :root {
        color-scheme: dark;
        font-family:
          Inter,
          ui-sans-serif,
          system-ui,
          -apple-system,
          BlinkMacSystemFont,
          "Segoe UI",
          sans-serif;
        background: #09090b;
        color: #f4f4f5;
      }
      * {
        box-sizing: border-box;
      }
      body {
        margin: 0;
        background:
          radial-gradient(circle at 80% 0%, rgba(132, 204, 22, 0.13), transparent 30rem), #09090b;
      }
      main {
        width: min(1120px, calc(100% - 32px));
        margin: 0 auto;
        padding: 64px 0 80px;
      }
      .eyebrow {
        color: #a3e635;
        font:
          700 12px/1.2 ui-monospace,
          monospace;
        letter-spacing: 0.12em;
        text-transform: uppercase;
      }
      h1 {
        max-width: 760px;
        margin: 14px 0 16px;
        font-size: clamp(42px, 7vw, 78px);
        line-height: 0.98;
        letter-spacing: -0.055em;
      }
      .lede {
        max-width: 720px;
        color: #a1a1aa;
        font-size: 19px;
        line-height: 1.6;
      }
      .grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 12px;
        margin: 40px 0;
      }
      .card,
      section {
        border: 1px solid #27272a;
        border-radius: 18px;
        background: rgba(24, 24, 27, 0.78);
      }
      .card {
        padding: 22px;
      }
      .metric {
        font-size: 38px;
        font-weight: 760;
        letter-spacing: -0.04em;
      }
      .label {
        margin-top: 4px;
        color: #a1a1aa;
        font-size: 14px;
      }
      section {
        margin-top: 16px;
        padding: 28px;
      }
      h2 {
        margin: 0 0 20px;
        font-size: 22px;
        letter-spacing: -0.025em;
      }
      .rows {
        display: grid;
        gap: 1px;
        overflow: hidden;
        border: 1px solid #27272a;
        border-radius: 12px;
        background: #27272a;
      }
      .row {
        display: grid;
        grid-template-columns: 160px 1fr 90px;
        gap: 18px;
        align-items: center;
        padding: 16px;
        background: #111113;
      }
      .row strong {
        color: #e4e4e7;
      }
      .row span {
        color: #a1a1aa;
        line-height: 1.45;
      }
      .status {
        justify-self: end;
        color: #bef264 !important;
        font:
          700 12px/1 ui-monospace,
          monospace;
        text-transform: uppercase;
      }
      ul {
        margin: 0;
        padding-left: 20px;
        color: #d4d4d8;
        line-height: 1.7;
      }
      .remaining {
        border-color: #3f3f46;
      }
      footer {
        margin-top: 24px;
        color: #71717a;
        font-size: 13px;
      }
      @media (max-width: 760px) {
        main {
          padding-top: 40px;
        }
        .grid {
          grid-template-columns: repeat(2, 1fr);
        }
        .row {
          grid-template-columns: 1fr;
          gap: 7px;
        }
        .status {
          justify-self: start;
        }
      }
    </style>
  </head>
  <body>
    <main>
      <div class="eyebrow">Documentation refactor · after state</div>
      <h1>A product guide, not a repository dump.</h1>
      <p class="lede">
        HyperFrames documentation now starts with human tasks, gives Studio its own complete manual,
        keeps reusable visuals in Catalog, and moves implementation detail into Developers.
      </p>

      <div class="grid">
        <div class="card">
          <div class="metric">253</div>
          <div class="label">navigated pages</div>
        </div>
        <div class="card">
          <div class="metric">0</div>
          <div class="label">orphan pages</div>
        </div>
        <div class="card">
          <div class="metric">4</div>
          <div class="label">top-level tabs</div>
        </div>
        <div class="card">
          <div class="metric">4</div>
          <div class="label">real Studio visuals</div>
        </div>
      </div>

      <section>
        <h2>What changed</h2>
        <div class="rows">
          <div class="row">
            <strong>Guides</strong>
            <span
              >Outcome-first onboarding, workflow selection, media, export, help, and updates.</span
            >
            <span class="status">Complete</span>
          </div>
          <div class="row">
            <strong>Studio</strong>
            <span
              >Verified manual for Storyboard, canvas, layers, timeline, design, animation, assets,
              source, lint, and export.</span
            >
            <span class="status">Complete</span>
          </div>
          <div class="row">
            <strong>Catalog</strong>
            <span
              >134 generated item pages with agent-first use, concise instructions, and folded
              technical details.</span
            >
            <span class="status">Complete</span>
          </div>
          <div class="row">
            <strong>Developers</strong>
            <span
              >CLI, SDK, packages, schemas, deployment, integrations, and contribution material
              grouped together.</span
            >
            <span class="status">Complete</span>
          </div>
          <div class="row">
            <strong>Header</strong>
            <span
              >Full-width Aspen navigation, logo, search, GitHub, theme toggle, and official
              Playground action.</span
            >
            <span class="status">Complete</span>
          </div>
        </div>
      </section>

      <section>
        <h2>Removed or corrected</h2>
        <ul>
          <li>False claims that Studio had no timeline or split workflow.</li>
          <li>
            Empty Weekly Updates and overlapping Showcase, Launch Videos, design, and
            troubleshooting pages.
          </li>
          <li>Repository-shaped top navigation and buried Studio user instructions.</li>
          <li>Rigid internal pipeline guidance presented as a requirement for every user.</li>
          <li>Duplicate Catalog titles and technical file tables dominating every item page.</li>
          <li>Internal telemetry specifications presented as a normal feedback guide.</li>
        </ul>
      </section>

      <section class="remaining">
        <h2>Post-release measurement</h2>
        <ul>
          <li>Review real Mintlify search terms and no-result queries after deployment.</li>
          <li>
            Use page and search analytics to decide which specialized guides should be merged later.
          </li>
          <li>Refresh screenshots when visible Studio controls change.</li>
        </ul>
      </section>

      <footer>
        Current implementation state · 2026-07-28 · validation and internal-link checks passed
      </footer>
    </main>
  </body>
</html>