菜单
Start a dev server, take screenshots of the rendered frontend, and check for console errors. Use when you need to visually verify frontend changes, test styling, or check for runtime errors after editing frontend code.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
| name | frontend-preview |
| description | Start a dev server, take screenshots of the rendered frontend, and check for console errors. Use when you need to visually verify frontend changes, test styling, or check for runtime errors after editing frontend code. |
| allowed-tools | bash read |
Tools for visually testing frontend changes with your dev server.
Run once before first use:
cd {baseDir}
npm install
node {baseDir}/dev-start.js # auto-detect from package.json
node {baseDir}/dev-start.js "npm run dev" # explicit command
node {baseDir}/dev-start.js "bun dev" http://localhost:3000 # explicit command + URL
Starts the dev server in the background and waits until it's ready (polls HTTP).
Prints the URL when ready. Auto-detects the command from package.json scripts.dev
if not specified. Auto-detects the URL from server stdout if not specified.
node {baseDir}/dev-screenshot.js # localhost:5173 desktop
node {baseDir}/dev-screenshot.js http://localhost:5173/dashboard # specific path
node {baseDir}/dev-screenshot.js --mobile # mobile viewport (375x812)
node {baseDir}/dev-screenshot.js --tablet # tablet viewport (768x1024)
node {baseDir}/dev-screenshot.js --wait=2000 # extra 2s for animations
node {baseDir}/dev-screenshot.js http://localhost:3000 --mobile --wait=1000
Takes a screenshot using headless Chrome and saves it to a temp file.
Prints the file path. You must call read <path> on the output to see the image.
Viewports:
--mobile)--tablet)node {baseDir}/dev-errors.js # check localhost:5173
node {baseDir}/dev-errors.js http://localhost:3000 # check specific URL
Opens the page in headless Chrome and captures console errors, page crashes, and failed network requests. Use this to check if the frontend has runtime errors.
node {baseDir}/dev-stop.js
Kills the dev server started by dev-start.js.
After making frontend changes:
Start the dev server (if not already running):
node {baseDir}/dev-start.js
Check for errors:
node {baseDir}/dev-errors.js
If no errors, take a screenshot to verify visually:
node {baseDir}/dev-screenshot.js
Then read the screenshot:
read <the-path-printed-above>
If testing responsive design, also screenshot mobile:
node {baseDir}/dev-screenshot.js --mobile
Then read that path too.
When done, stop the server:
node {baseDir}/dev-stop.js
dev-start.js saves the server PID to /tmp/pi-dev-server.pid. Only one
dev server at a time. Run dev-stop.js before starting a new one./tmp/ and are not cleaned up automatically.Analyze the current git diff or staged changes for bugs, security issues, missing error handling, and breaking changes. Produces a structured review report. Use before committing or after making changes.
Git workflow helper. Use for committing changes, creating branches, viewing history, stashing work, resolving merge conflicts, and other git operations. Invoke when the user asks to commit, push, branch, stash, or do any git-related task.
Search the web and fetch page content. Use when you need external information like documentation, API references, error message lookups, or any information not available in the local codebase.