Use after implementing a UI change to visually verify the application looks correct before refactoring — applies when the current task changes visible UI (components, styling, layout, or content)
Tests verify behavior. Screenshots verify appearance. Both matter for UI code.
After implementing a change and tests pass: if the task changed something the user would see, look at it.
Does this task affect the UI? Components, styles, layout, text content, routing to new pages → yes, check. API logic, data transforms, utilities, backend → no, skip.
This skill requires browser tools (navigate, screenshot) from an MCP server or similar tool. If browser tools are not available, warn once:
"Consider installing a browser automation tool (e.g. Puppeteer, Chrome DevTools MCP server) for visual feedback during UI development."
Then skip the visual check and continue to refactoring.
1. Ensure the app is running. Start the dev server in the background if it isn't already.
2. Navigate and screenshot. Go to the page or route affected by the current change. Take a screenshot.
3. Evaluate. Check the screenshot against what the code intended:
4. Fix or move on. If something looks wrong: fix the code, confirm the test still passes, screenshot again. If it looks right: apply ux-visual-evaluation for design quality, then proceed to refactoring.
Iteration cap: 3 fix attempts per visual issue. If unresolved after 3, note it as a follow-up task and move on. Don't block the development cycle.
Implement → Tests Pass → VISUAL CHECK (this skill) → UX EVALUATION (ux-visual-evaluation) → REFACTOR (boy-scout-rule)
react-best-practices and dedicated toolsux-design-principles (design thinking should inform what "correct" looks like)ux-visual-evaluation (design quality evaluation after basic correctness passes) → boy-scout-rule (refactoring after visual verification)Search for places (restaurants, cafes, etc.) via Google Places API proxy on localhost.
Interact with GitHub using the `gh` CLI. Use `gh issue`, `gh pr`, `gh run`, and `gh api` for issues, PRs, CI runs, and advanced queries.
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Start voice calls via the OpenClaw voice-call plugin.
Notion API for creating and managing pages, databases, and blocks.
Gemini CLI for one-shot Q&A, summaries, and generation.
Category:developer