← ClaudeAtlas

validating-changes-in-browserlisted

Final browser validation after implementation AND review have succeeded. Boots the app via `lt dev up`, seeds realistic `@test.com` data, derives a step-by-step test list from the diff (every affected page, role, flow, empty/error state, mobile pass, console + network sweep), then walks it autonomously via Chrome DevTools MCP. Fixes everything it finds, including pre-existing issues, in the same loop. Activates as the last step of any ship-oriented workflow, and on "im Browser prüfen", "durchklicken". NOT a substitute for implementation, code review, or automated E2E tests, which run before.
lenneTech/claude-code · ★ 0 · Web & Frontend · score 75
Install: claude install-skill lenneTech/claude-code
# Validating Changes in the Browser This skill is the **last station** before a ticket is shipped. It is invoked **only after** the implementation is complete and the relevant review step has succeeded — not as a substitute for either, but as the final user-eye check that catches the things a unit test, an API test, or a static review cannot see: broken empty states, missing toasts, focus traps, regressed flows on roles the developer didn't think to test, console errors, layout glitches, latent bugs in sibling pages that the change accidentally exposed. The orchestrator runs the test list **itself** via Chrome DevTools MCP. Whatever it finds — including issues that pre-date the current branch — is fixed in the same loop. The user only sees the **final** list, fully ticked, with a question: ship or optimize further. **Language convention for this skill:** - The instructions you read here (English) tell you HOW to run the workflow. - The artefacts the **developer sees** at the end (test plan headings, walked list, status labels, ship-or-optimize question and options) are rendered in the **language the user has been speaking in this session** — German if the conversation has been in German, English if in English, the user's language otherwise. The English examples below are illustrative templates; translate the headings, columns, action prose, status labels, and the AskUserQuestion text+options to match the user's language before showing them. ## When to Use This Skill Act