Launch Stylebot in a real, headed Chrome window (via yarn dev:chrome) so the user can manually eyeball a change — in whatever checkout the current session is in, worktree or main.
Install the "try-in-browser" agent skill from https://github.com/ankit/stylebot/tree/v4/.agents/skills/try-in-browser into .claude/skills/try-in-browser/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "try-in-browser", then confirm the skill loads.
Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Type this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
skills CLI
$ npx skills add ankit/stylebot --skill try-in-browser -a codex
Project install goes to .agents/skills/; add -g for ~/.codex/skills/.
Install the "try-in-browser" agent skill from https://github.com/ankit/stylebot/tree/v4/.agents/skills/try-in-browser into .agents/skills/try-in-browser/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "try-in-browser", then confirm the skill loads.
Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
skills CLI
$ npx skills add ankit/stylebot --skill try-in-browser -a cursor
Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.
Install the "try-in-browser" agent skill from https://github.com/ankit/stylebot/tree/v4/.agents/skills/try-in-browser into .cursor/skills/try-in-browser/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "try-in-browser", then confirm the skill loads.
Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
skills CLI
$ npx skills add ankit/stylebot --skill try-in-browser -a gemini-cli
Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.
Install the "try-in-browser" agent skill from https://github.com/ankit/stylebot/tree/v4/.agents/skills/try-in-browser into .gemini/skills/try-in-browser/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "try-in-browser", then confirm the skill loads.
Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
GitHub CLI
$ gh skill install ankit/stylebot try-in-browser
Installs for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
skills CLI
$ npx skills add ankit/stylebot --skill try-in-browser -a github-copilot
Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.
Install the "try-in-browser" agent skill from https://github.com/ankit/stylebot/tree/v4/.agents/skills/try-in-browser into .github/skills/try-in-browser/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "try-in-browser", then confirm the skill loads.
GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
skills CLI
$ npx skills add ankit/stylebot --skill try-in-browser -a opencode
OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
Install the "try-in-browser" agent skill from https://github.com/ankit/stylebot/tree/v4/.agents/skills/try-in-browser into .opencode/skills/try-in-browser/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "try-in-browser", then confirm the skill loads.
OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
Skill name
try-in-browser
GitHub stars
1.6k
Token cost
~780 tokens
SKILL.md length
399 words
Files
1
Skills in repo
7
Repo updated
First seen
Licence
MIT
At a glance
Launch Stylebot in a real, headed Chrome window (via yarn dev:chrome) so the user can manually eyeball a change — in whatever checkout the current session is in, worktree or main.
Works in 5 steps: Confirm you're at the repo root of the… → If node_modules is missing, run yarn… → Launch it in the background — it blocks… → …
The user wants to try this out
SKILL.md covers What yarn dev:chrome already…, How to run and Stopping
Calls yarn
What it does
Try In Browser is an agent skill from ankit/stylebot. Launch Stylebot in a real, headed Chrome window (via yarn dev:chrome) so the user can manually eyeball a change — in whatever checkout the current session is in, worktree or main. Use when the user wants to "try this out", "see it in the browser", "manually test/validate", "load the extension so I can look at it", or "smoke test this change" themselves, as opposed to running the automated e2e suite.
Its SKILL.md is about 780 tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.
It sits in Testing & QA, covering Git worktrees, End-to-end testing and QA and bug reports. The repository describes itself as: Change the appearance of the web instantly. The licence is MIT.
When your agent uses it
The user wants to try this out
See it in the browser
Manually test/validate
Load the extension so I can look at it
Example prompts
“try this out”
“see it in the browser”
“manually test/validate”
“/try-in-browser”
Workflow steps
5 steps, taken from the first numbered list in SKILL.md.
1Confirm you're at the repo root of the current session's checkout (worktree or
2If node_modules is missing, run yarn install first (fresh worktrees don't always
3Launch it in the background — it blocks until the browser window closes
4Watch the output for 🎉 Stylebot loaded on Hacker News to confirm it launched
5Tell the user it's up, which worktree/badge to look for, and that edits will
What it can do on your machine
Read from SKILL.md and the folder at commit 7b0b7e0. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Shell commands in SKILL.md call:
yarn
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md. Its commands use yarn, which can reach the network depending on how they are called.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Try In Browser loads about 780 tokens when it runs. Until then it costs about 105 tokens; SKILL.md has 399 words of instructions outside code blocks.
Always· name and description, kept in context so the agent knows when to use it
~105
When it runs· the whole SKILL.md, loaded when a task matches
~780
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
Download SKILL.mdSave it as .claude/skills/try-in-browser/SKILL.md (or your agent's skills folder).
name
try-in-browser
description
Launch Stylebot in a real, headed Chrome window (via `yarn dev:chrome`) so the user can manually eyeball a change — in whatever checkout the current session is in, worktree or main. Use when the user wants to "try this out", "see it in the browser", "manually test/validate", "load the extension so I can look at it", or "smoke test this change" themselves, as opposed to running the automated e2e suite.
Try Stylebot in the browser
Stylebot's AGENTS.md defaults to Playwright e2e for verifying changes — use that
(yarn e2e) when the goal is confirming correctness. Reach for this skill instead
when the user wants to look at the extension with their own eyes: visual/UI tweaks,
"does this feel right" judgment calls, or anything the e2e suite doesn't cover.
What yarn dev:chrome already does
scripts/launch-chrome.mjs is worktree-aware out of the box — don't reinvent this:
Runs yarn watch and launches Chrome via CDP (Extensions.loadUnpacked) against
the current checkout's dist/.
Uses a Chrome profile at <checkout>/.chrome-dev-profile — scoped to whichever
worktree (or main) you run it from, so parallel sessions in different worktrees each
get their own isolated browser instance with no port/profile collisions.
Stamps a corner badge on every page with the checked-out branch name (e.g. 🌲 claude/fix-toggle-hitbox-1a2b3c; the checkout's folder name on a detached HEAD), so if the user has several of these windows open they can tell
them apart at a glance, including in the Cmd+Tab thumbnail.
Hot-reloads the extension in place on every rebuild — no need to relaunch after edits.
Opens to Hacker News as a default test page; the user can navigate wherever they want
to check the change.
Show full SKILL.md (203 more words)Show less
How to run
Confirm you're at the repo root of the current session's checkout (worktree or
main — do not cd elsewhere; the whole point is testing what's checked out here).
If node_modules is missing, run yarn install first (fresh worktrees don't always
have it — check before assuming yarn dev:chrome will just work).
Launch it in the background — it blocks until the browser window closes:
yarn dev:chrome
Use run_in_background: true. Do not use yarn dev:chrome:headless here — headless
defeats the purpose of manual validation.
Watch the output for 🎉 Stylebot loaded on Hacker News to confirm it launched
rather than assuming success. If it fails to launch, the most likely cause is a
dev:chrome already running in this same checkout (the profile dir is locked) —
check for a stray background task before retrying.
Tell the user it's up, which worktree/badge to look for, and that edits will
hot-reload automatically. Let them drive from there — don't attempt to interact with
this window via browser automation tools, since the point is the human looking at it.
Stopping
The background task ends when the user closes the Chrome window. If they're done
before that, stop the background task directly rather than leaving it running.
Try In Browser next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
Run and debug MoaV's end-to-end tests — real protocol connectivity (client-test.sh) and the moav CLI smoke test — against a LIVE server, via the self-hosted e2e workflow or a local test VPS.
Sweeps a running web app by clicking every reachable control, then reports dead buttons, console errors, failed requests and mismatches between API data and the screen.
Use after Phase 1 dependency updates are merged, before any Phase 2 propagation to sibling forks - runs the end-to-end devnet gate (up brings devnet/deploy/dev-server up, verify drives Chrome over…
Run this skill whenever the user asks to verify my VSS install works, smoke test VSS, check whether the deployment succeeded, or run an end-to-end test of summary/search for the…
Builds and maintains a repo's own verification harness (verify CLI, doctor, worktree isolation, feature map, seed data) and a reproduce-first bug handoff.
Measure whether a change makes Chat's styling replies better, with yarn eval:chat — it runs styling requests on recorded real pages for two versions of Stylebot and measures on the page whether each…
Translate Stylebot's locale strings, in the extension or on stylebot.dev — fill in strings that English has and other locales lack, retranslate English strings that changed, or add a whole new…
Retake the stylebot.dev gallery's theme screenshots in site/src/assets/gallery/ with yarn capture:gallery, then check each one by eye before committing.
Restyle websites in the user's browser with the Stylebot extension's stylebot CLI — dark modes, themes, fonts, bigger text, hiding clutter, fixing a layout, or editing and managing the CSS and…
Launch Stylebot in a real, headed Chrome window (via yarn dev:chrome) so the user can manually eyeball a change — in whatever checkout the current session is in, worktree or main. Try In Browser is an agent skill from ankit/stylebot. Launch Stylebot in a real, headed Chrome window (via yarn dev:chrome) so the user can manually eyeball a change — in whatever checkout the current session is in, worktree or main.
When should I use Try In Browser?
Try In Browser fits situations like: the user wants to try this out; see it in the browser; manually test/validate; load the extension so I can look at it.
How do I install Try In Browser in Claude Code?
Run `npx skills add ankit/stylebot --skill try-in-browser -a claude-code`. Or copy the skill folder (.agents/skills/try-in-browser in ankit/stylebot) into .claude/skills/try-in-browser in your project. Claude Code loads it when a task matches its description.
How do I install Try In Browser in Codex?
Run `npx skills add ankit/stylebot --skill try-in-browser -a codex`. Or copy the skill folder (.agents/skills/try-in-browser in ankit/stylebot) into .agents/skills/try-in-browser in your project. Codex loads it when a task matches its description.
Can I use Try In Browser in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add ankit/stylebot --skill try-in-browser -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/try-in-browser, .gemini/skills/try-in-browser, .github/skills/try-in-browser and .opencode/skills/try-in-browser in your project.
What does Try In Browser need to run?
Going by SKILL.md and its folder, Try In Browser needs the command-line tools its instructions call (yarn).
Does Try In Browser access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is Try In Browser safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does Try In Browser use?
Try In Browser is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Try In Browser use?
About 780 tokens (SKILL.md is roughly 3.1k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Try In Browser?
Skills that share tags, products or a category with Try In Browser: Moav E2E (MotherofallVPNs/MoaV, 449 stars), Whole-App Health Sweep (reticlehq/reticle, 1.2k stars), Stark Smoke Test (Scaffold-Stark/scaffold-stark-2, 109 stars) and Vss E2E Smoke (open-edge-platform/edge-ai-libraries, 171 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Try In Browser?
ankit (a GitHub user) maintains it in ankit/stylebot, which has 1,648 GitHub stars. The repository holds 7 skills in this directory. The repository was last updated on October 10, 2026.
Source: ankit/stylebot on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.
