Skip to main content

validate-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.

跳到安装

来源信息

仓库
ankit/stylebot
最近来源活动
2026年9月19日 20:22
检测到的 SKILL.md 语言
英语
星标
1,639
分支
229

安装方式

默认使用会先检查来源的 Prompt;你也可以切换为直接命令,或下载本地副本。

检查来源文件

决定是否安装前,请先阅读 SKILL.md,以及 SkillsMP 当前展示的配套文件。

正在显示 SKILL.md

SKILL.md
来源说明 · 只读预览
name
validate-stylebot
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.
# Validate Stylebot manually Stylebot's CLAUDE.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 `basename(rootDir)` (e.g. `🌲 fix-toggle-hitbox`), 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. ## How to run 1. 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). 2. 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). 3. 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. 4. 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. 5. 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.
在 GitHub 查看