From f153af11efd2a94e954e8e03e57093bb43b1bbb7 Mon Sep 17 00:00:00 2001 From: Karn Date: Tue, 25 Aug 2026 00:30:21 +0530 Subject: [PATCH] Install goes to the top, and the skill stops being step three Install closed the homepage, under the facts and the limits, and the skill was the last line of it. What people did instead was read the opening paragraph, copy the npm line sitting under it, go and get the extension, and stop. Two visible halves that plainly do something, and a third step below the fold that reads like an optional extra. It is not optional. Without the skill the agent has the CLI on its PATH and no idea the commands exist, which surfaces as an agent insisting it cannot open a browser on a machine where reins is installed and connected. So Install is now the second thing on the page, right after the sentence that says what reins is, as a numbered list of three rather than a transcript with a paragraph explaining it afterwards. 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. The getting started page is reordered the same way and says out loud what skipping it looks like. `Skill` is a row in the facts table now, so the command appears twice on the page. What used to be the closing Install section is `More`: the sideload note, the search hint, and the two links out. The store URL and the skill command join INSTALL_COMMAND in lib/site.ts. Three files had the store URL pasted into them, and a fourth quoted the skill command as a bare string. Co-Authored-By: Claude Opus 5 (1M context) --- packages/web/src/lib/site.ts | 6 ++ packages/web/src/routes/docs/index.tsx | 26 ++++---- packages/web/src/routes/docs/sideload.tsx | 9 +-- packages/web/src/routes/index.tsx | 79 ++++++++++++++++------- 4 files changed, 77 insertions(+), 43 deletions(-) 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() { reins kill stops it. There is nothing to configure and nothing to keep running.

-

2. Add the extension

+ {/* 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. */} +

2. Teach your agent

+ +

+ 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 reins help; the CLI is self-describing. +

+ +

3. Add the extension

Install the reins extension from the Chrome Web Store in every Chromium browser you want agents to reach. Chrome, Brave, Edge, Arc and Dia all work. @@ -50,13 +59,6 @@ function GettingStarted() {

Working from a dev build instead? Load the unpacked extension and allow its ID once:

"]} /> -

3. Teach your agent

- -

- The skill teaches agents the command set and the loop below. Agents without skill support - can run reins help; the CLI is self-describing. -

-

4. Check

({ @@ -21,11 +21,8 @@ function SideloadPage() {

Install without the store

The npm package carries a full copy of the reins extension. If you cannot (or would rather - not) install from the{" "} - - Chrome Web Store - - , one command stages it for Chrome's Load unpacked. No repo checkout, no build, no{" "} + not) install from the Chrome Web Store, one command + stages it for Chrome's Load unpacked. No repo checkout, no build, no{" "} reins allow.

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.

- -

- then add the{" "} - - extension - {" "} - in every browser you want agents to reach -

+ @@ -111,7 +98,7 @@ function Home() { - + @@ -266,6 +253,7 @@ function Facts() { rows={[ ["License", "MIT"], ["Install", {INSTALL_COMMAND}], + ["Skill", {SKILL_COMMAND}], ["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", 127.0.0.1], @@ -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 ( <>

Install

-

- 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 reins help. - Then install the extension in every browser you want agents to reach, and{" "} - reins status 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.

+
    +
  1. + The CLI. The daemon rides inside it and starts on demand. + +
    2. +
  2. + The skill, so your agent knows the command set. Agents without skill support can read{" "} + reins help instead, but do not skip this if yours supports it. + +
    3. +
  3. + 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. +

    + Add reins from the Chrome Web Store +

    +
    4. +
+

+ Then reins status shows what is connected. +

+ + ); +} + +/* ------------------------------------------------------------------------ */ + +function More() { + return ( + <> +

More

No Chrome Web Store access? reins extension stages the bundled copy for Chrome's Load unpacked, with no reins allow step.