메뉴
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.