菜单
Verify a frontend or UI change in a real browser. Use after any change to web/next pages, components, or styles, before opening or updating a PR, or when an end-to-end flow needs checking.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Add a new shared workspace package under packages/*. Use when creating a new @packages/<name>, whether a bundled library other workspaces import or a build-only script package that runs during a build.
Orient in this repo: which file to edit for a change, how a change ripples across the stack, and how to search the code. Use at the start of a task in an unfamiliar area, or before a cross-cutting change.
Prefer Bun-native APIs, else Node built-ins with the node: prefix. Use when importing a Node built-in (fs, path, child_process, crypto, os, util), reading or writing files, spawning a process, or choosing between a Bun and a Node API.
Icebox a raised-but-undecided concern instead of forcing a plan-or-dismiss call: record it with no verdict so the context survives. Use when a review, PR, audit, or eval surfaces something real-maybe that should not be scheduled or closed yet, or when the user says to icebox or park an item.
Add a typed Hono API endpoint or WebSocket route: router, OpenAPI docs, validation envelope, and RPC client wiring. Use when adding or modifying routes in api/hono.
Start, restart, and verify the ZeroStarter dev stack. `bun run dev` serves portless named `.localhost` URLs (branch-prefixed in a worktree); resolve them with `bunx portless get`. Use when asked to run the app, when the API returns NOT_FOUND for routes that exist in source, or before browser testing.
| name | ui-verify |
| description | Verify a frontend or UI change in a real browser. Use after any change to web/next pages, components, or styles, before opening or updating a PR, or when an end-to-end flow needs checking. |
A green type-check and clean lint prove the code compiles, not that the page renders.
Start the dev servers (dev skill). Under the default portless dev the base URLs are named and branch-prefixed, so resolve them once: WEB=$(bunx portless get zerostarter) and API=$(bunx portless get api.zerostarter) (or PORTLESS=0 bun run dev for fixed http://localhost:3000 / http://localhost:4000). Done when $WEB/ returns 200 and $API/api/health responds ok.
Load the agent-browser skill, then open the route you changed and act on it:
agent-browser open "$WEB/<route>"
agent-browser snapshot # read the page, then click/type/verify
Behind auth: sign in first with the Login (agents) button (shown once AGENT_SIGNIN_ENABLED=true) or the local sign-in (dev skill). For an end-to-end change, or whenever asked, drive the whole flow, not just the screen you touched. Done when you have observed the change render and behave, not merely that the route loaded.
agent-browser set viewport 1782 972; see the agent-browser skill). The "before" is the pre-change state: git stash (or check out the pre-change commit), agent-browser screenshot before.png, then restore your change and agent-browser screenshot after.png.agent-browser set viewport <w> <h>, and confirm no horizontal overflow: agent-browser eval 'document.documentElement.scrollWidth <= document.documentElement.clientWidth'.Done when Visual, Responsive, and Theme are each exercised (or consciously marked N/A) for the surfaces this change touches.
Upload each screenshot to litterbox (a temporary host) and embed the returned URL in the PR. Never commit a binary screenshot.
curl -sS -F "reqtype=fileupload" -F "time=72h" -F "fileToUpload=@screenshot.png" \
https://litterbox.catbox.moe/resources/internals/api.php
Valid time: 1h, 12h, 24h, 72h. The command prints the public URL. Done when every screenshot (before+after pairs for a visual change) has its URL embedded in the PR.