菜单
Visually verify web UI using a rubber duck MCP with Chrome browser tools. Use after building or modifying web UI components.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
| name | visual-check |
| description | Visually verify web UI using a rubber duck MCP with Chrome browser tools. Use after building or modifying web UI components. |
| argument-hint | [page-path] [checklist items...] |
Visually verify the web UI by using a rubber duck (MCP) with Chrome browser tools.
verify_skill: visual-check is a valid ## Verification value in a project's CLAUDE.md. When set, /implement's Phase 4b″ runs /dev-process-toolkit:visual-check — with its built-in MCP-probe path and manual-checklist fallback — as the per-FR verification pass. This is the zero-authoring verification path for web UIs: declare it and get visual verification without writing a project-local check skill.
Before anything else, check if the rubber duck MCP is available:
list_ducks MCP callIf the call fails or returns an error, MCP is unavailable. Display:
⚠️
mcp-rubber-duck is not configured. See setup instructions to enable automated visual verification.
Then fall back to the manual verification path below.
When MCP is unavailable, guide the user through manual checks:
Report results as a pass/fail summary:
Then skip to step 4 (clean up).
Detect the dev server URL from the project's CLAUDE.md or config files (e.g., package.json scripts, vite.config). Default: http://localhost:5173.
Check if the dev server is reachable:
curl -s -o /dev/null -w "%{http_code}" http://localhost:5173
200, proceed.Use ask_duck to have a duck open the page in Chrome and verify it visually. The duck should NOT run shell commands — it should only use its Chrome/browser MCP tools.
The default page is / unless $ARGUMENTS specifies a different path.
Ask the duck to open the page and report:
After verifying the base page, ask the duck to check interactive elements:
If $ARGUMENTS includes specific items to check, verify those as well.
Summarize findings as a pass/fail checklist:
Kill the dev server if you started it.
ask_duck calls will fail and this skill won't work.chrome-devtools-mcp should be configured in .mcp.json for direct Chrome access from Claude Code. The duck may also have its own Chrome MCP tools configured separately. /setup configures .mcp.json automatically for web-based stacks.Implement a feature or fix end-to-end. Analyzes the request, builds in TDD order, runs gate checks, self-reviews with bounded loops, and reports for human approval before committing.
Bundle the Release Checklist + /docs --commit --full into one atomic, human-approved release commit. Reads specs/plan/M<N>.md, bumps the four release files, regenerates docs, prompts once for approval, commits on `y`, does not push.
Guide the user through writing or completing spec files (requirements, technical spec, testing spec, plan). Use after /setup to fill in specs before implementation, or to update existing specs.
Set up SDD/TDD development process for the current project. Creates CLAUDE.md, configures settings, and optionally creates spec files. Use when starting a new project or adding process to an existing one.
Socratic design session for greenfield features with open solution spaces. Clarifies goals one question at a time, proposes 2-3 approaches with tradeoffs, gets design approval, then feeds into /spec-write.
Run the project gate checks and report results. Use after completing any feature, before creating a PR, or to verify project health.