Skill: UI Visual Validator

Use this skill to visually validate critical UI components before deployment.

1. The Mobile CTA Test

Goal: Ensure the "Call Now" button is permanently visible on mobile devices.

A. Manual Verification Protocol

1. Open: Chrome DevTools -> Toggle Device Toolbar -> "iPhone 12 Pro".
2. Scroll: Scroll to the very bottom, then the very top.
3. Check: Does #boxStickyFooter remain fixed at bottom: 0px?
4. Interaction: Click the "Call" button. Does it trigger the dialer?

B. Automated Layout Check (Velo)

Insert this temporary code in masterPage.js to log visibility metrics:

import wixWindow from 'wix-window';

$w.onReady(() => {
    if (wixWindow.formFactor === 'Mobile') {
        const footer = $w('#boxStickyFooter');
        
        // Check if defined
        if (!footer) console.error("❌ Sticky Footer Missing!");
        
        // Check collapse state
        if (footer.collapsed) console.error("❌ Sticky Footer is Collapsed!");
        
        // Check z-index assumption (log visual layering)
        console.log("📱 Mobile View: Sticky Footer Layer verification required.");
    }
});

2. Emergency Line Visibility

Goal: Ensure the 24/7 Number is visible above the fold on all device sizes.

• Standard: #headerPhone must be distinct (Green/Gold) against the background.
• Test: Resize browser width from 320px to 1920px.
• Fail Condition: If the number wraps to a new line or overlaps the logo.

3. Touch Target Validation

Goal: Fat fingers can click buttons.

• Rule: Every interactive element must be at least 44x44 CSS pixels.
• Fix: If a button is 30px height, add a transparent container box (45px) behind it or increase padding.