Who you are: If .helpmetest/SOUL.md exists in this project, read it before starting — it defines your character and shapes how you work.No MCP? The CLI has full feature parity — use helpmetest <command> instead of MCP tools. See the CLI reference.Visual Check
Quick visual verification using screenshots. Tests how things look without creating formal test files.
When to Use This Skill
Use when user asks casual verification questions like:
- "Check if the login button is blue"
- "Does the header look right on mobile?"
- "See if the pricing table is centered"
- "Is the footer visible?"
- "Verify the hero image loaded"
- "Check that modal is showing correctly"
NOT for:
- Creating formal tests (use
/helpmetest-test-generator) - Comprehensive site testing (use
/helpmetest) - Debugging failing tests (use
/helpmetest-debugger)
Process
Step 1: Understand What to Check
Extract from user's request:
- URL - Where to look (if not provided, ask)
- Element/Feature - What to verify ("login button", "header", "pricing table")
- Expected state - What should it look like? ("blue", "centered", "visible")
Step 2: Navigate and Capture
Use helpmetest_run_interactive_command with navigation + screenshot:
Go To <url>Tool returns:
- Screenshot (automatically included)
- Page state
- Any console errors
Step 3: Describe What You See
Based on screenshot, describe:
- Is the element there? - Present or missing
- How does it look? - Color, size, position, styling
- Matches expectation? - Yes/No with specifics
Example response:
✓ Login button found in top-right navigation
✓ Color: Blue (#0066FF) - matches expected blue
✓ Size: Standard button size (~120px wide)
✓ Position: Aligned right, 20px from edgeStep 4: Test Interactions (If Needed)
If user wants to verify behavior (hover, click, etc):
# Hover to check hover state
Hover button:has-text("Login")
# Click to check if it works
Click button:has-text("Login")Each command returns a new screenshot showing the result.
Step 5: Responsive Checks (If Needed)
If user mentions "mobile" or "tablet":
# Set mobile viewport
Set Viewport Size 375 667 # iPhone SE
# Capture mobile view
Go To <url>Common viewports:
- Mobile: 375x667 (iPhone SE), 390x844 (iPhone 12)
- Tablet: 768x1024 (iPad)
- Desktop: 1920x1080
Guidelines
Be Specific:
- ❌ "Button looks fine"
- ✅ "Button is blue (#2563EB), 140px wide, centered in navbar"
Compare to Expectation:
- User said: "check if button is blue"
- You say: "Button is blue (#0066FF) ✓" or "Button is red (#DC2626) ✗ - Expected blue"
Mention Issues:
- Overlapping elements
- Cut-off text
- Misaligned items
- Wrong colors
- Missing elements
- Console errors
Keep It Casual:
- This is quick verification, not formal QA
- No need to create artifacts or tests
- Just answer: "Does it look right? Yes/No, here's why"
Interactive Commands Available
# Navigation
Go To <url>
# Element inspection
Get Element <selector> # Check if exists
Get Style <selector> <property> # Get CSS value
# Viewport changes
Set Viewport Size <width> <height>
# Interactions (to check behavior)
Click <selector>
Hover <selector>
Fill Text <selector> <text>
Press Keys <selector> <key>
# Scrolling
Scroll To Element <selector>
Scroll By <x> <y>
# Waiting (if page loads slowly)
Wait For Elements State <selector> visible timeout=5000Every command automatically returns a screenshot.
Example Workflows
Example 1: Quick Button Check
User: "Check if the Sign Up button is green"
1. Go To https://example.com
2. Look at screenshot
3. Find "Sign Up" button in nav
4. Respond: "Sign Up button is green (#10B981) ✓"Example 2: Layout Verification
User: "Is the pricing table centered?"
1. Go To https://example.com/pricing
2. Look at screenshot
3. Check table position
4. Respond: "Pricing table is centered ✓ - Equal margins on both sides (~200px)"Example 3: Responsive Check
User: "Does the header look good on mobile?"
1. Set Viewport Size 375 667
2. Go To https://example.com
3. Look at screenshot
4. Respond: "Header stacks vertically ✓ - Logo on top, menu items below. Hamburger icon visible."Example 4: Hover State
User: "Check if the button changes color on hover"
1. Go To https://example.com
2. Look at initial screenshot (button default state)
3. Hover button:has-text("Submit")
4. Look at new screenshot (button hover state)
5. Respond: "Button changes from blue (#0066FF) to dark blue (#0047B3) on hover ✓"Example 5: Modal Appearance
User: "See if the modal shows up when clicking Contact"
1. Go To https://example.com
2. Click button:has-text("Contact")
3. Look at screenshot
4. Respond: "Modal appears ✓ - Dark overlay with white form centered on screen"Output Format
Always structure your response:
[Element/Feature Name]
Status: ✓ Matches expectation / ✗ Issue found / ⚠️ Partial match
Details:
- [Specific observation 1]
- [Specific observation 2]
- [Specific observation 3]
[If issue found:]
Issue: [What's wrong]
Expected: [What it should be]
Actual: [What it is]When to Stop
This skill is for QUICK checks. If user asks:
- "Test this thoroughly" → Use
/helpmetest - "Create a test for this" → Use
/helpmetest-test-generator - "Why is this test failing?" → Use
/helpmetest-debugger
Keep it simple: Look, describe, confirm.