helpmetest-visual-check

Original：🇺🇸 English

Translated

Instant visual verification via screenshots. For quick checks like 'does button look blue', 'is layout centered', 'header look right on mobile'. Fast alternative to formal testing - just look and confirm. Use when user wants visual inspection without creating test files.

1installs

Sourcehelp-me-test/skills

Added on2026-03-08

NPX Install

npx skill4agent add help-me-test/skills helpmetest-visual-check

SKILL.md Content

View Translation Comparison →

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:

robot

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 edge

Step 4: Test Interactions (If Needed)

If user wants to verify behavior (hover, click, etc):

robot

# 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":

robot

# 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

robot

# 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=5000

Every 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.

helpmetest-visual-check

NPX Install

Tags

SKILL.md Content

Visual Check

When to Use This Skill

Process

Step 1: Understand What to Check

Step 2: Navigate and Capture

Step 3: Describe What You See

Step 4: Test Interactions (If Needed)

Step 5: Responsive Checks (If Needed)

Guidelines

Interactive Commands Available

Example Workflows

Example 1: Quick Button Check

Example 2: Layout Verification

Example 3: Responsive Check

Example 4: Hover State

Example 5: Modal Appearance

Output Format

When to Stop