Using the Stylebot CLI with a Coding Agent

Updated

Stylebot ships a command-line interface you can install globally with npm, and any coding agent that can run shell commands can drive it. The CLI lets an agent open a page in a browser tab, apply CSS from a file, and capture a screenshot to check the result — so restyling a site can happen inside an automated loop rather than by hand in the extension popup. This works for desktop Chrome, Firefox, and Edge, the same browsers the Stylebot extension supports.

Prerequisites

  • Node.js and npm available on the machine where the agent runs.
  • A coding agent (or a terminal you control) that can execute commands.
  • A browser with Stylebot installed, since the CLI drives the extension's styling behavior.
  • A CSS file ready to apply, if you want to set styles from disk.

Install the CLI

npm install -g @stylebot/cli

The global install puts the stylebot command on your path so the agent can call it directly.

Core commands

The CLI exposes a small set of verbs. The documented ones are open, outline, css set, and screenshot.

Command What it does Example
stylebot open <url> Opens the URL in a tab and returns a tab ID stylebot open harbourpost.example → Opened tab 54432929
stylebot outline <tab-id> Lists selectable elements on the page stylebot outline 54432929 → article › h1, p.dek, p ×12, aside.ad
stylebot css set <host> < file Applies CSS from a file to the site stylebot css set harbourpost.example < night.css → Saved · applied to 1 tab
stylebot screenshot <tab-id> -o <file> Saves a screenshot of the tab stylebot screenshot 54432929 -o check.png → Saved check.png

Step-by-step agent workflow

  1. Open the target page. Run stylebot open <url>. The command returns a tab ID you'll reuse in later steps.
  2. Inspect the structure. Run stylebot outline <tab-id> to get a list of elements and selectors. This tells the agent which selectors to target before writing CSS.
  3. Write the CSS to a file. The agent authors a stylesheet — for example, a dark background, warmer text, a larger serif body, and a rule to hide an ad — and saves it as night.css.
  4. Apply the styles. Run stylebot css set <host> < night.css. A successful run reports Saved · applied to 1 tab.
  5. Verify visually. Run stylebot screenshot <tab-id> -o check.png and inspect the image. The agent can compare the screenshot against the intended look and iterate if needed.

What the agent can and can't infer

The CLI gives the agent three concrete signals: the tab ID from open, the selector list from outline, and the saved screenshot from screenshot. Those are enough to close the loop on most restyling tasks. What the CLI does not do is decide what "better" looks like — the agent still needs a target design or explicit instructions (colors, fonts, elements to hide) before it writes CSS.

Common snags

  • No tab ID returned. If open fails, the later commands have nothing to act on; check that the URL is reachable and the browser is running.
  • CSS applies to the wrong scope. css set takes a host, so confirm you're targeting the right domain before applying.
  • Screenshot looks unchanged. Re-run outline to verify your selectors actually match elements on the page; a selector that matches nothing produces no visible change.
  • Agent can't find the command. A global npm install may need a fresh shell session before stylebot resolves on the path.

When to use the CLI instead of the popup

Use the extension popup (open with Alt+Shift+M) when you're styling one page interactively and want the Basic controls and live preview. Reach for the CLI when you want repeatable, scriptable restyling — batch changes across sites, agent-driven iteration, or screenshot-based verification — since the popup has no command interface. Both approaches save styles that load every time you return to the site.