expect
Use when editing .tsx/.jsx/.css/.html, React components, pages, routes, forms, styles, or layouts. Also when asked to test, verify, validate, QA, find bugs, check for issues, or fix expect-cli failures.
Security Assessment
About expect
The Expect skill provides browser-based verification for web development changes, ensuring that code modifications work correctly in a real browser environment before claiming completion. It integrates with the expect MCP tools to automate browser interactions, take screenshots, and validate UI behavior across different scenarios. This skill eliminates the gap between writing code and confirming it actually works, catching visual bugs, accessibility issues, and functional problems that static analysis cannot detect.
The skill features intelligent browser state management, compound interaction support through the Playwright tool, and optimized snapshot handling. It can execute multi-step test sequences in a single call, reuse existing browser sessions to avoid unnecessary restarts, and run verification tasks in parallel subagents to keep the main conversation responsive. The skill emphasizes adversarial testing—checking edge cases, error states, and invalid inputs rather than just happy paths.
This skill is designed for developers working with React components, pages, forms, layouts, and styling in .tsx, .jsx, .css, and .html files. It's particularly valuable during QA processes, bug fixing, post-deployment verification, and any scenario where visual or functional validation is required. By enforcing browser evidence before completion claims, it ensures higher code quality and reduces the cycle of discovering issues only after deployment.
FAQ
When should I use a subagent versus inline browser verification?
Use a subagent for any multi-step browser test or interaction sequence. This keeps the main conversation free for code editing while the browser test runs in parallel. Only run inline for trivial single-screenshot checks.
How do I avoid unnecessary browser restarts?
Before opening a new browser, check if one is already running using browser_tabs or the screenshot tool. If a tab is already open at your target URL, reuse it by refreshing or navigating rather than closing and reopening.
When do I need to take a new snapshot?
Re-snapshot only when crossing DOM boundaries—navigation, form submission, dialog open/close. Simple interactions like fills, clicks, and hovers don't change page structure, so continue using existing refs from your current snapshot.
What browsers and frameworks does this skill support?
The skill works with any web application accessible via browser, with specific focus on React components (.tsx/.jsx files). It uses the expect MCP tools and Playwright under the hood, supporting all major browsers.
What should I do if browser verification fails?
Fix the code immediately and re-verify. Do not ask the user for permission or wait—iterate on the fix until all failures are resolved. Only claim completion when you have passing browser evidence with zero failures.
Install expect
Quick Setup:
- Copy the skill folder to
.claude/skills/ - Claude will automatically detect and use the skill
Repository
millionco/expect