diff --git a/packages/web/src/lib/site.ts b/packages/web/src/lib/site.ts
index 942dd7a..c429b0e 100644
--- a/packages/web/src/lib/site.ts
+++ b/packages/web/src/lib/site.ts
@@ -8,6 +8,12 @@ export const GITHUB_URL = "https://github.com/karngyan";
 
 export const INSTALL_COMMAND = "npm i -g @karnstack/reins";
 
+/** The step people skip. Named here so no page can quote it differently. */
+export const SKILL_COMMAND = "npx skills add karnstack/reins";
+
+export const CHROME_WEB_STORE_URL =
+  "https://chromewebstore.google.com/detail/reins/hnjcfgochepemjndccfblpmfmlblkofo";
+
 /** Primary header links (kept short — the command menu covers the long tail). */
 export const HEADER_LINKS = [
   { to: "/docs", label: "Docs" },
diff --git a/packages/web/src/routes/docs/index.tsx b/packages/web/src/routes/docs/index.tsx
index 9c838f5..fb5896e 100644
--- a/packages/web/src/routes/docs/index.tsx
+++ b/packages/web/src/routes/docs/index.tsx
@@ -1,10 +1,7 @@
 import { createFileRoute } from "@tanstack/react-router";
 import { A, Arrow, Code, H1, H2, P, Shell } from "@/components/md";
 import { seo } from "@/lib/seo";
-import { INSTALL_COMMAND } from "@/lib/site";
-
-const CHROME_WEB_STORE_URL =
-  "https://chromewebstore.google.com/detail/reins/hnjcfgochepemjndccfblpmfmlblkofo";
+import { CHROME_WEB_STORE_URL, INSTALL_COMMAND, SKILL_COMMAND } from "@/lib/site";
 
 export const Route = createFileRoute("/docs/")({
   head: () => ({
@@ -36,7 +33,19 @@ function GettingStarted() {
         <Code>reins kill</Code> stops it. There is nothing to configure and nothing to keep running.
       </P>
 
-      <H2 id="add-the-extension">2. Add the extension</H2>
+      {/* Before the extension, not after it. The extension step sends the
+          reader to the Chrome Web Store, and the ones who do not come back
+          are exactly the ones running an agent that does not know the
+          commands exist. */}
+      <H2 id="teach-your-agent">2. Teach your agent</H2>
+      <Shell lines={[`$ ${SKILL_COMMAND}`]} />
+      <P>
+        The skill teaches agents the command set and the loop below. This is the step people skip,
+        and skipping it is why an agent with reins installed still says it cannot open a browser.
+        Agents without skill support can run <Code>reins help</Code>; the CLI is self-describing.
+      </P>
+
+      <H2 id="add-the-extension">3. Add the extension</H2>
       <P>
         Install the <A href={CHROME_WEB_STORE_URL}>reins extension from the Chrome Web Store</A> in
         every Chromium browser you want agents to reach. Chrome, Brave, Edge, Arc and Dia all work.
@@ -50,13 +59,6 @@ function GettingStarted() {
       <P>Working from a dev build instead? Load the unpacked extension and allow its ID once:</P>
       <Shell lines={["$ reins allow <extension-id>"]} />
 
-      <H2 id="teach-your-agent">3. Teach your agent</H2>
-      <Shell lines={["$ npx skills add karnstack/reins"]} />
-      <P>
-        The skill teaches agents the command set and the loop below. Agents without skill support
-        can run <Code>reins help</Code>; the CLI is self-describing.
-      </P>
-
       <H2 id="check">4. Check</H2>
       <Shell
         lines={[
diff --git a/packages/web/src/routes/docs/sideload.tsx b/packages/web/src/routes/docs/sideload.tsx
index 5b28a69..5b1c71e 100644
--- a/packages/web/src/routes/docs/sideload.tsx
+++ b/packages/web/src/routes/docs/sideload.tsx
@@ -1,7 +1,7 @@
 import { createFileRoute } from "@tanstack/react-router";
 import { A, Code, H1, H2, Ol, P, Shell, Ul } from "@/components/md";
 import { seo } from "@/lib/seo";
-import { INSTALL_COMMAND } from "@/lib/site";
+import { CHROME_WEB_STORE_URL, INSTALL_COMMAND } from "@/lib/site";
 
 export const Route = createFileRoute("/docs/sideload")({
   head: () => ({
@@ -21,11 +21,8 @@ function SideloadPage() {
       <H1>Install without the store</H1>
       <P>
         The npm package carries a full copy of the reins extension. If you cannot (or would rather
-        not) install from the{" "}
-        <A href="https://chromewebstore.google.com/detail/reins/hnjcfgochepemjndccfblpmfmlblkofo">
-          Chrome Web Store
-        </A>
-        , one command stages it for Chrome's Load unpacked. No repo checkout, no build, no{" "}
+        not) install from the <A href={CHROME_WEB_STORE_URL}>Chrome Web Store</A>, one command
+        stages it for Chrome's Load unpacked. No repo checkout, no build, no{" "}
         <Code>reins allow</Code>.
       </P>
 
diff --git a/packages/web/src/routes/index.tsx b/packages/web/src/routes/index.tsx
index f87b5ce..9c6c0d0 100644
--- a/packages/web/src/routes/index.tsx
+++ b/packages/web/src/routes/index.tsx
@@ -2,12 +2,14 @@ import { createFileRoute } from "@tanstack/react-router";
 import { BrowserMock } from "@/components/browser-mock";
 import { CopyCommand } from "@/components/copy-command";
 import {
+  A,
   Arrow,
   Code,
   Column,
   H2,
   Kbd,
   Meta,
+  Ol,
   P,
   Pre,
   Shell,
@@ -19,12 +21,9 @@ import { PopupMock } from "@/components/popup-mock";
 import { SiteFooter } from "@/components/site-footer";
 import { SiteHeader } from "@/components/site-header";
 import { seo } from "@/lib/seo";
-import { INSTALL_COMMAND, REPO_URL } from "@/lib/site";
+import { CHROME_WEB_STORE_URL, INSTALL_COMMAND, REPO_URL, SKILL_COMMAND } from "@/lib/site";
 import { cn } from "@/lib/utils";
 
-const CHROME_WEB_STORE_URL =
-  "https://chromewebstore.google.com/detail/reins/hnjcfgochepemjndccfblpmfmlblkofo";
-
 export const Route = createFileRoute("/")({
   head: () => ({
     ...seo({
@@ -89,19 +88,7 @@ function Home() {
             flags, no MCP server to register.
           </P>
 
-          <CopyCommand command={INSTALL_COMMAND} className={cn(TEXT, "mt-5 max-w-[68ch]")} />
-          <P muted>
-            then add the{" "}
-            <a
-              href={CHROME_WEB_STORE_URL}
-              target="_blank"
-              rel="noreferrer"
-              className="underline underline-offset-4 hover:text-primary"
-            >
-              extension
-            </a>{" "}
-            in every browser you want agents to reach
-          </P>
+          <Install />
 
           <BrowserMock className="mt-10" />
 
@@ -111,7 +98,7 @@ function Home() {
           <Permissions />
           <Facts />
           <Limits />
-          <Install />
+          <More />
         </Column>
       </main>
       <SiteFooter />
@@ -266,6 +253,7 @@ function Facts() {
         rows={[
           ["License", "MIT"],
           ["Install", <Code key="i">{INSTALL_COMMAND}</Code>],
+          ["Skill", <Code key="s">{SKILL_COMMAND}</Code>],
           ["Browsers", "Chrome, Brave, Edge, Arc, Dia. Any Chromium that takes MV3 extensions."],
           ["Agents", "Claude Code, Cursor, Codex, Copilot, Gemini CLI. Anything with a shell."],
           ["Binds", <Code key="b">127.0.0.1</Code>],
@@ -309,19 +297,60 @@ function Limits() {
 
 /* ------------------------------------------------------------------------ */
 
+/**
+ * Install, at the top, where the reader still is.
+ *
+ * It used to close the page, under the facts and the limits, and the skill
+ * was the last line of it. People installed the CLI, installed the
+ * extension, and stopped: two visible halves that plainly do something, and
+ * a third step below the fold that reads like an optional extra. It is not.
+ * Without the skill the agent has the CLI on its PATH and no idea the
+ * commands exist.
+ *
+ * So the skill is step two, between the two shell one-liners, rather than
+ * step three on the far side of a trip to the Chrome Web Store. The order of
+ * the three does not matter to the software. It matters to whether anyone
+ * finishes.
+ */
 function Install() {
   return (
     <>
       <H2 id="install">Install</H2>
-      <Shell
-        lines={[`$ ${INSTALL_COMMAND}`, "$ npx skills add karnstack/reins", "$ reins status"]}
-      />
       <P>
-        The first line installs the CLI, and the daemon rides along inside it. The second teaches
-        any agent with skill support the command set; the rest can read <Code>reins help</Code>.
-        Then install the extension in every browser you want agents to reach, and{" "}
-        <Code>reins status</Code> shows what is connected.
+        Three pieces, and the third is the one people skip. Without the skill, your agent has the
+        CLI installed and no idea the commands exist.
       </P>
+      <Ol>
+        <li>
+          The CLI. The daemon rides inside it and starts on demand.
+          <CopyCommand command={INSTALL_COMMAND} className={cn(TEXT, "mt-3 max-w-[60ch]")} />
+        </li>
+        <li>
+          The skill, so your agent knows the command set. Agents without skill support can read{" "}
+          <Code>reins help</Code> instead, but do not skip this if yours supports it.
+          <CopyCommand command={SKILL_COMMAND} className={cn(TEXT, "mt-3 max-w-[60ch]")} />
+        </li>
+        <li>
+          The extension, in every browser you want agents to reach. It finds the daemon on its own,
+          and the toolbar icon turns green once it connects.
+          <p className={cn(TEXT, "mt-3")}>
+            <A href={CHROME_WEB_STORE_URL}>Add reins from the Chrome Web Store</A>
+          </p>
+        </li>
+      </Ol>
+      <P>
+        Then <Code>reins status</Code> shows what is connected.
+      </P>
+    </>
+  );
+}
+
+/* ------------------------------------------------------------------------ */
+
+function More() {
+  return (
+    <>
+      <H2 id="more">More</H2>
       <P muted>
         No Chrome Web Store access? <Code>reins extension</Code> stages the bundled copy for
         Chrome's Load unpacked, with no <Code>reins allow</Code> step.