---
name: browser-validator-f84a07567af2
description: Automatically validate implementations in real browsers after code is written or when user says "test this". Uses Chrome DevTools MCP to test responsive breakpoints (320px, 768px, 1024px), check accessibility compliance (WCAG AA contrast, keyboard navigation, ARIA), validate interactions, and generate detailed technical reports with file paths and specific fixes.
---

# Browser Validator Skill

## Purpose
Validate design implementations in real browsers using Chrome DevTools MCP to ensure quality, accessibility, and responsiveness.

## Philosophy

Real browser testing catches issues that code review cannot.

### Core Beliefs

1. **Test in Real Environments**: Browsers behave differently than localhost
2. **Multiple Breakpoints Required**: Mobile, tablet, desktop have different challenges
3. **Accessibility Requires Manual Verification**: Automated tools miss context-dependent issues
4. **Visual QA Prevents Surprises**: Screenshots catch layout breaks before users see them

### Why Browser Validation Matters

- **Cross-Browser Consistency**: Ensure components work everywhere
- **Responsive Behavior**: Verify breakpoints function correctly
- **Accessibility Compliance**: Check keyboard navigation and screen reader compatibility
- **Professional Quality**: Catch visual regressions before deployment

## When This Skill Activates

This skill automatically activates when:
- User says "test this", "validate", "check if it works"
- After component implementation is complete
- User asks "does it look right?"
- User mentions "browser", "Chrome", or "DevTools"
- Component is ready for QA
- Before submitting for review

## Decision Framework

Before validating in browser, determine:

### What Needs Validation?

1. **Responsive behavior** → Test layout at 320px, 768px, 1024px breakpoints
2. **Accessibility** → Check contrast, keyboard nav, ARIA, focus indicators
3. **Interactions** → Test hover, click, focus states
4. **Visual accuracy** → Compare with design reference (if provided)
5. **Functionality** → Verify buttons, forms, links work correctly

### What Are the Test URLs?

**Local development**:
- `http://localhost:8000/component`
- `http://site.ddev.site/test-page`
- `http://site.test/node/123`

**Staging/production**:
- `https://staging.example.com/feature`
- `https://production.com/public-page`

**URL must be**:
- Accessible from your machine
- Fully loaded (not 404, not auth-protected)
- Stable (not constantly changing)

### What Breakpoints to Test?

**Standard breakpoints** (always test):
- ✅ **Mobile**: 320px x 568px (minimum, iPhone SE)
- ✅ **Tablet**: 768px x 1024px (iPad)
- ✅ **Desktop**: 1024px x 768px (laptop)
- ⚠️ **Large desktop**: 1920px x 1080px (optional)

**What to check at each breakpoint**:
- Layout doesn't break
- No horizontal scrolling
- Text is readable (no overflow)
- Touch targets ≥ 44px (mobile), ≥ 40px (desktop)
- Images don't extend beyond viewport

### What Accessibility Checks?

**WCAG 2.1 Level AA (always check)**:
- ✅ **Color contrast**: Calculate exact ratios (4.5:1 normal, 3:1 large)
- ✅ **Keyboard navigation**: Tab through all interactive elements
- ✅ **Focus indicators**: Visible 2px minimum
- ✅ **Semantic HTML**: Proper headings, landmarks, ARIA
- ✅ **Alt text**: Content images have descriptive alt, decorative have alt=""

**How to test**:
- Use `mcp__chrome-devtools__press_key` to Tab through page
- Use `mcp__chrome-devtools__take_snapshot` to check DOM structure
- Calculate contrast ratios from screenshots

### What Interactions to Test?

**Interactive states**:
- `:hover` - Use `mcp__chrome-devtools__hover` on elements
- `:focus` - Tab to elements with keyboard
- `:active` - Click elements with `mcp__chrome-devtools__click`

**Capture screenshots**:
- Initial state
- Each breakpoint
- Hover/focus states
- Any dynamic behavior

### What Errors to Check?

**Console errors**:
- Use `mcp__chrome-devtools__list_console_messages`
- Check for JavaScript errors
- Report with stack traces

**Network issues**:
- Use `mcp__chrome-devtools__list_network_requests`
- Check for 404s, failed requests
- Note slow-loading resources

### Decision Tree

```
User requests browser validation
    ↓
Check: Chrome DevTools MCP available?
    ↓ Yes
Navigate to test URL
    ↓
Test each breakpoint (320/768/1024px)
    ↓
Capture screenshots at each breakpoint
    ↓
Check accessibility (contrast/keyboard/ARIA)
    ↓
Test interactions (hover/focus/click)
    ↓
Check console & network errors
    ↓
Generate detailed technical report
```

## Required MCP Integration

This skill requires **Chrome DevTools MCP** integration. Correct tool names to use:

**Navigation & Pages**:
- `mcp__chrome-devtools__navigate_page` - Navigate to URL
- `mcp__chrome-devtools__list_pages` - Get available pages
- `mcp__chrome-devtools__new_page` - Create new tab

**Viewport & Screenshots**:
- `mcp__chrome-devtools__resize_page` - Change viewport size
- `mcp__chrome-devtools__take_screenshot` - Capture screenshot
- `mcp__chrome-devtools__take_snapshot` - Get DOM structure

**Interaction**:
- `mcp__chrome-devtools__click` - Click element by UID
- `mcp__chrome-devtools__hover` - Hover over element
- `mcp__chrome-devtools__fill` - Fill form field
- `mcp__chrome-devtools__press_key` - Press keyboard key

**Debugging**:
- `mcp__chrome-devtools__list_console_messages` - Get JavaScript errors
- `mcp__chrome-devtools__list_network_requests` - Check network activity

## Validation Process

### Phase 1: Initial Setup

```javascript
// Navigate to test page
await mcp__chrome-devtools__navigate_page({
  url: testUrl,
  type: "url"
});

// Wait for page load (built-in)

// Take initial full-page screenshot
await mcp__chrome-devtools__take_screenshot({
  filePath: "screenshots/component/initial-fullpage.png",
  fullPage: true
});

// Get page structure
const pageSnapshot = await mcp__chrome-devtools__take_snapshot({
  verbose: true
});
```

### Phase 2: DOM Structure Validation

```javascript
// Get detailed page structure
const pageStructure = await mcp__chrome-devtools__take_snapshot({
  verbose: true
});

// Check for:
// - Proper semantic HTML
// - Heading hierarchy
// - Form labels
// - Image alt attributes
// - ARIA attributes
// - No empty elements
```

**Semantic HTML Checklist:**
- [ ] `<header>` for site/section header
- [ ] `<nav>` for navigation
- [ ] `<main>` for main content (only one per page)
- [ ] `<article>` for self-contained content
- [ ] `<section>` for thematic grouping
- [ ] `<aside>` for tangentially related content
- [ ] `<footer>` for site/section footer

**Heading Hierarchy Check:**
```
✅ GOOD:
<h1>Page Title</h1>
  <h2>Section 1</h2>
    <h3>Subsection 1.1</h3>
  <h2>Section 2</h2>

❌ BAD:
<h1>Page Title</h1>
  <h3>Section 1</h3>  ← Skipped h2
  <h2>Section 2</h2>
```

**Image Alt Text Check:**
```
✅ Content images: <img src="chart.png" alt="Q3 sales chart showing 25% growth">
✅ Decorative images: <img src="divider.png" alt="">
❌ Missing alt: <img src="photo.png">
```

### Phase 3: Responsive Testing

Test at all standard breakpoints:

```javascript
// Mobile (320px)
await mcp__chrome-devtools__resize_page({
  width: 320,
  height: 568
});
await mcp__chrome-devtools__take_screenshot({
  filePath: "screenshots/component/mobile-320px.png"
});

// Tablet (768px)
await mcp__chrome-devtools__resize_page({
  width: 768,
  height: 1024
});
await mcp__chrome-devtools__take_screenshot({
  filePath: "screenshots/component/tablet-768px.png"
});

// Desktop (1024px)
await mcp__chrome-devtools__resize_page({
  width: 1024,
  height: 768
});
await mcp__chrome-devtools__take_screenshot({
  filePath: "screenshots/component/desktop-1024px.png"
});

// Large Desktop (1920px) - optional
await mcp__chrome-devtools__resize_page({
  width: 1920,
  height: 1080
});
await mcp__chrome-devtools__take_screenshot({
  filePath: "screenshots/component/large-1920px.png"
});
```

**Mobile Validation (320px-767px):**
- [ ] No horizontal scrolling
- [ ] Text is readable (minimum 16px)
- [ ] Touch targets are 44px minimum
- [ ] Images scale properly
- [ ] Content stacks vertically
- [ ] Navigation is accessible
- [ ] Forms are usable

**Tablet Validation (768px-1023px):**
- [ ] Layout transitions smoothly
- [ ] Multi-column layouts work
- [ ] Navigation adapts appropriately
- [ ] Images maintain aspect ratio
- [ ] Spacing increases appropriately

**Desktop Validation (1024px+):**
- [ ] Full layout displays correctly
- [ ] Hover states function
- [ ] Maximum width constraints work
- [ ] Multi-column content aligns
- [ ] No excessive white space

### Phase 4: Interactive Elements Testing

Test all interactive elements:

```javascript
// Get page snapshot with element UIDs
const snapshot = await mcp__chrome-devtools__take_snapshot({
  verbose: false
});

// Find buttons by UID from snapshot
const buttons = snapshot.elements.filter(el => el.role === 'button');

// Test each button
for (const button of buttons) {
  // Hover test
  await mcp__chrome-devtools__hover({
    uid: button.uid
  });

  await mcp__chrome-devtools__take_screenshot({
    filePath: `screenshots/component/button-${button.uid}-hover.png`
  });

  // Click test
  await mcp__chrome-devtools__click({
    uid: button.uid
  });

  // Check result (wait for any changes)
  // Take screenshot if needed
}

// Test form interactions
const formInputs = snapshot.elements.filter(el => el.role === 'textbox');

for (const input of formInputs) {
  // Fill input
  await mcp__chrome-devtools__fill({
    uid: input.uid,
    value: "Test Value"
  });

  // Verify input accepted
}

// Test keyboard navigation
await mcp__chrome-devtools__press_key({
  key: "Tab"
});

// Check focus moved to next element
```

**Button/Link Checklist:**
- [ ] All buttons are clickable
- [ ] Links navigate to correct URLs
- [ ] Hover states appear
- [ ] Focus states are visible
- [ ] Disabled states are clear
- [ ] Loading states work (if applicable)

### Phase 5: Keyboard Navigation Testing

Test complete keyboard navigation flow:

```javascript
// Start from top of page
await mcp__chrome-devtools__navigate_page({
  url: testUrl,
  type: "reload"
});

// Tab through interactive elements
for (let i = 0; i < 10; i++) {
  await mcp__chrome-devtools__press_key({
    key: "Tab"
  });

  // Take snapshot to see what's focused
  const snapshot = await mcp__chrome-devtools__take_snapshot({
    verbose: false
  });

  // Check that focus indicator is visible
  // Check focus order is logical
}

// Test other keyboard interactions
await mcp__chrome-devtools__press_key({
  key: "Enter"  // Activate button
});

await mcp__chrome-devtools__press_key({
  key: "Escape"  // Close modal
});

await mcp__chrome-devtools__press_key({
  key: "Space"  // Activate button/checkbox
});
```

**Keyboard Navigation Checklist:**
- [ ] All interactive elements are focusable
- [ ] Focus order is logical (top→bottom, left→right)
- [ ] Focus indicators are visible (2px outline minimum)
- [ ] Enter/Space activates buttons
- [ ] Escape closes modals/dialogs
- [ ] Arrow keys work for custom components
- [ ] No keyboard traps

### Phase 6: Color Contrast Analysis

Check all text meets WCAG AA requirements:

```javascript
// Get all text elements from snapshot
const textElements = snapshot.elements.filter(el => el.text);

// For each text element:
// 1. Get computed foreground color
// 2. Get computed background color
// 3. Calculate contrast ratio
// 4. Compare against WCAG requirements

// WCAG AA Requirements:
// - Normal text (< 18pt or < 14pt bold): 4.5:1
// - Large text (≥ 18pt or ≥ 14pt bold): 3:1
// - UI components: 3:1
```

**Contrast Ratio Calculation:**
```
Relative Luminance (L) = 0.2126 * R + 0.7152 * G + 0.0722 * B
(where R, G, B are gamma corrected)

Contrast Ratio = (L1 + 0.05) / (L2 + 0.05)
(where L1 is lighter, L2 is darker)
```

**Example:**
```
Text: #666666 (rgb(102, 102, 102))
Background: #ffffff (rgb(255, 255, 255))

L1 = 1.0 (white)
L2 = 0.132 (gray)

Ratio = (1.0 + 0.05) / (0.132 + 0.05) = 3.8:1
Result: ❌ Fails WCAG AA (need 4.5:1)

Fix: Use #595959 instead
New ratio = 4.54:1 ✅ Passes
```

### Phase 7: Console and Network Analysis

Check for JavaScript errors and network issues:

```javascript
// Get console messages
const consoleMessages = await mcp__chrome-devtools__list_console_messages({
  types: ["error", "warn"],
  pageSize: 100
});

// Analyze errors
const errors = consoleMessages.filter(msg => msg.type === "error");
const warnings = consoleMessages.filter(msg => msg.type === "warn");

// Get network requests
const networkRequests = await mcp__chrome-devtools__list_network_requests({
  resourceTypes: ["document", "script", "stylesheet", "image"],
  pageSize: 100
});

// Find failed requests
const failedRequests = networkRequests.filter(req => req.status >= 400);
```

**Console Issues to Report:**
- ❌ JavaScript errors (with stack traces)
- ⚠️  Console warnings
- ❌ 404 errors (missing resources)
- ❌ CORS errors
- ⚠️  Deprecated API usage
- ❌ Network failures

### Phase 8: Accessibility Audit

Comprehensive accessibility checks:

**Focus Indicators:**
```javascript
// Check all focusable elements have visible indicators
// Minimum 2px outline
// High contrast color
// Non-hidden
```

**ARIA Usage:**
```javascript
// Check proper ARIA attributes:
// - aria-label on icon-only buttons
// - aria-describedby for complex widgets
// - aria-live for dynamic content
// - aria-hidden for decorative elements
// - role attributes where needed
```

**Touch Targets:**
```javascript
// Measure all interactive elements
// Must be ≥ 44x44px on mobile viewports
// Spacing between targets ≥ 8px
```

## Report Format

Generate detailed technical report:

```markdown
# Validation Report: Component Name
**URL**: {test-url}
**Date**: {timestamp}

## 📊 Summary
✅ Passed: {N} checks
⚠️  Warnings: {N} checks
❌ Failed: {N} checks

## 📱 Responsive Behavior

### Mobile (320px)
Screenshot: screenshots/component/mobile-320px.png
**Issues:**
❌ Text overflow in heading
   File: components/hero.scss:45
   Current: font-size: 2rem;
   Fix: font-size: clamp(1.5rem, 5vw, 2rem);

### Tablet (768px)
✅ Layout optimal

### Desktop (1024px)
✅ Layout optimal

## ♿ Accessibility

### Color Contrast
❌ Body text: 3.8:1 (need 4.5:1)
   File: components/hero.scss:23
   Current: color: #666
   Fix: color: #595959
   Calculation: (255+0.05)/(89+0.05) = 4.54:1 ✅

### Keyboard Navigation
✅ All elements focusable
⚠️  Focus indicator weak (1px)
   File: base/buttons.scss:15
   Fix: outline: 2px solid; outline-offset: 2px;

### ARIA
⚠️  Icon button missing label
   File: patterns/hero.php:42
   Fix: Add aria-label="Close banner"

## 🖱️  Interactions
✅ Hover states working
✅ Click handlers functioning

## 🐛 Console & Network
✅ No JavaScript errors
✅ All resources loaded

## 📝 Recommendations (Priority Order)

🔴 CRITICAL
1. Fix body text contrast (hero.scss:23)
2. Add aria-label to icon button (hero.php:42)

🟡 IMPORTANT
3. Fix mobile text overflow (hero.scss:45)
4. Strengthen focus indicators (buttons.scss:15)

🟢 NICE TO HAVE
5. Increase touch target size (hero.scss:67)
```

## Error Handling

### Chrome DevTools MCP Not Available

If Chrome DevTools MCP is not connected, provide manual checklist:

```markdown
❌ Chrome DevTools MCP not connected

Browser validation requires Chrome DevTools MCP.

**To enable:**
1. Install: https://github.com/anthropics/claude-chrome-mcp
2. Configure in Claude Code settings
3. Restart Claude Code
4. Retry validation

**Alternative: Manual Validation Checklist**

Test URL: {test-url}

📋 Responsive Testing:
□ View at 320px width (mobile)
□ View at 768px width (tablet)
□ View at 1024px+ width (desktop)
□ No horizontal scrolling on mobile
□ Touch targets ≥ 44px on mobile

📋 Accessibility:
□ Check contrast: https://webaim.org/resources/contrastchecker/
□ Test Tab key navigation
□ Verify focus indicators visible
□ Check heading hierarchy
□ Verify alt text on images

📋 Interactions:
□ Test all hover states
□ Test all click actions
□ Check console for errors
□ Verify network requests successful
```

### Test URL Not Accessible

```markdown
❌ Cannot access test URL: {url}

**Possible issues:**
- Local dev server not running
- URL typo
- Network/firewall restrictions
- HTTPS certificate issues

**Solutions:**
1. Verify URL in browser first
2. Check dev server is running
3. Try alternate URL
4. Check /etc/hosts for local domains
```

## Best Practices

1. **Test Early**: Don't wait until implementation is complete
2. **Test Often**: Validate after each significant change
3. **Fix Critical First**: Address WCAG failures before UX issues
4. **Re-validate**: Always re-run after applying fixes
5. **Real Devices**: Follow up automated tests with real device testing
6. **Document Issues**: Save reports for reference and tracking

## Integration with Commands

This skill is used by:

### `/design-to-block` Command
- Validates WordPress block patterns after creation
- Checks responsive behavior
- Ensures accessibility compliance

### `/design-to-paragraph` Command
- Validates Drupal paragraph types after creation
- Tests responsive layouts
- Verifies accessibility

### `/design-validate` Command
- Standalone validation of any implementation
- Can compare against design reference
- Generates detailed technical report

## Common Validation Failures

### Text Overflow on Mobile
**Symptom**: Heading text wraps awkwardly or extends beyond container
**Fix**: Use fluid typography with `clamp()`

### Low Contrast
**Symptom**: Text difficult to read, fails WCAG AA
**Fix**: Darken text color or lighten background

### Weak Focus Indicators
**Symptom**: Hard to see which element has keyboard focus
**Fix**: Increase outline to 2px, add offset

### Small Touch Targets
**Symptom**: Buttons/links difficult to tap on mobile
**Fix**: Increase padding to ensure 44px minimum

### Missing ARIA Labels
**Symptom**: Screen readers can't identify icon-only buttons
**Fix**: Add `aria-label` with descriptive text

### JavaScript Errors
**Symptom**: Console shows errors, functionality broken
**Fix**: Debug and fix JavaScript, verify asset paths

## Testing Scope

**What this validates:**
- ✅ Responsive layouts at multiple breakpoints
- ✅ WCAG AA accessibility (contrast, keyboard nav, ARIA)
- ✅ Interactive element functionality
- ✅ JavaScript console errors
- ✅ Network request failures
- ✅ Visual accuracy (if design reference provided)

**What this does NOT validate:**
- ❌ Cross-browser compatibility (Chrome only)
- ❌ Performance metrics (use performance tools)
- ❌ Security vulnerabilities
- ❌ Code quality
- ❌ SEO


---
Source attribution: David-Li0406
Original project: https://github.com/David-Li0406/meta-skill-evloving/blob/ca3a335628981df10c36e00cb9850df2c247ab9a/skill-flow/data/skills-refined-36k/skillsmp/browser-validator/SKILL.md
License: Apache-2.0
License information: https://www.apache.org/licenses/LICENSE-2.0
Original upstream instructions; downloaded from Mega AI Hub.

## Upstream license notice

Apache License
                           Version 2.0, January 2004
                        http://www.apache.org/licenses/

   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION

   1. Definitions.

      "License" shall mean the terms and conditions for use, reproduction,
      and distribution as defined by Sections 1 through 9 of this document.

      "Licensor" shall mean the copyright owner or entity authorized by
      the copyright owner that is granting the License.

      "Legal Entity" shall mean the union of the acting entity and all
      other entities that control, are controlled by, or are under common
      control with that entity. For the purposes of this definition,
      "control" means (i) the power, direct or indirect, to cause the
      direction or management of such entity, whether by contract or
      otherwise, or (ii) ownership of fifty percent (50%) or more of the
      outstanding shares, or (iii) beneficial ownership of such entity.

      "You" (or "Your") shall mean an individual or Legal Entity
      exercising permissions granted by this License.

      "Source" form shall mean the preferred form for making modifications,
      including but not limited to software source code, documentation
      source, and configuration files.

      "Object" form shall mean any form resulting from mechanical
      transformation or translation of a Source form, including but
      not limited to compiled object code, generated documentation,
      and conversions to other media types.

      "Work" shall mean the work of authorship, whether in Source or
      Object form, made available under the License, as indicated by a
      copyright notice that is included in or attached to the work
      (an example is provided in the Appendix below).

      "Derivative Works" shall mean any work, whether in Source or Object
      form, that is based on (or derived from) the Work and for which the
      editorial revisions, annotations, elaborations, or other modifications
      represent, as a whole, an original work of authorship. For the purposes
      of this License, Derivative Works shall not include works that remain
      separable from, or merely link (or bind by name) to the interfaces of,
      the Work and Derivative Works thereof.

      "Contribution" shall mean any work of authorship, including
      the original version of the Work and any modifications or additions
      to that Work or Derivative Works thereof, that is intentionally
      submitted to Licensor for inclusion in the Work by the copyright owner
      or by an individual or Legal Entity authorized to submit on behalf of
      the copyright owner. For the purposes of this definition, "submitted"
      means any form of electronic, verbal, or written communication sent
      to the Licensor or its representatives, including but not limited to
      communication on electronic mailing lists, source code control systems,
      and issue tracking systems that are managed by, or on behalf of, the
      Licensor for the purpose of discussing and improving the Work, but
      excluding communication that is conspicuously marked or otherwise
      designated in writing by the copyright owner as "Not a Contribution."

      "Contributor" shall mean Licensor and any individual or Legal Entity
      on behalf of whom a Contribution has been received by Licensor and
      subsequently incorporated within the Work.

   2. Grant of Copyright License. Subject to the terms and conditions of
      this License, each Contributor hereby grants to You a perpetual,
      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
      copyright license to reproduce, prepare Derivative Works of,
      publicly display, publicly perform, sublicense, and distribute the
      Work and such Derivative Works in Source or Object form.

   3. Grant of Patent License. Subject to the terms and conditions of
      this License, each Contributor hereby grants to You a perpetual,
      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
      (except as stated in this section) patent license to make, have made,
      use, offer to sell, sell, import, and otherwise transfer the Work,
      where such license applies only to those patent claims licensable
      by such Contributor that are necessarily infringed by their
      Contribution(s) alone or by combination of their Contribution(s)
      with the Work to which such Contribution(s) was submitted. If You
      institute patent litigation against any entity (including a
      cross-claim or counterclaim in a lawsuit) alleging that the Work
      or a Contribution incorporated within the Work constitutes direct
      or contributory patent infringement, then any patent licenses
      granted to You under this License for that Work shall terminate
      as of the date such litigation is filed.

   4. Redistribution. You may reproduce and distribute copies of the
      Work or Derivative Works thereof in any medium, with or without
      modifications, and in Source or Object form, provided that You
      meet the following conditions:

      (a) You must give any other recipients of the Work or
          Derivative Works a copy of this License; and

      (b) You must cause any modified files to carry prominent notices
          stating that You changed the files; and

      (c) You must retain, in the Source form of any Derivative Works
          that You distribute, all copyright, patent, trademark, and
          attribution notices from the Source form of the Work,
          excluding those notices that do not pertain to any part of
          the Derivative Works; and

      (d) If the Work includes a "NOTICE" text file as part of its
          distribution, then any Derivative Works that You distribute must
          include a readable copy of the attribution notices contained
          within such NOTICE file, excluding those notices that do not
          pertain to any part of the Derivative Works, in at least one
          of the following places: within a NOTICE text file distributed
          as part of the Derivative Works; within the Source form or
          documentation, if provided along with the Derivative Works; or,
          within a display generated by the Derivative Works, if and
          wherever such third-party notices normally appear. The contents
          of the NOTICE file are for informational purposes only and
          do not modify the License. You may add Your own attribution
          notices within Derivative Works that You distribute, alongside
          or as an addendum to the NOTICE text from the Work, provided
          that such additional attribution notices cannot be construed
          as modifying the License.

      You may add Your own copyright statement to Your modifications and
      may provide additional or different license terms and conditions
      for use, reproduction, or distribution of Your modifications, or
      for any such Derivative Works as a whole, provided Your use,
      reproduction, and distribution of the Work otherwise complies with
      the conditions stated in this License.

   5. Submission of Contributions. Unless You explicitly state otherwise,
      any Contribution intentionally submitted for inclusion in the Work
      by You to the Licensor shall be under the terms and conditions of
      this License, without any additional terms or conditions.
      Notwithstanding the above, nothing herein shall supersede or modify
      the terms of any separate license agreement you may have executed
      with Licensor regarding such Contributions.

   6. Trademarks. This License does not grant permission to use the trade
      names, trademarks, service marks, or product names of the Licensor,
      except as required for reasonable and customary use in describing the
      origin of the Work and reproducing the content of the NOTICE file.

   7. Disclaimer of Warranty. Unless required by applicable law or
      agreed to in writing, Licensor provides the Work (and each
      Contributor provides its Contributions) on an "AS IS" BASIS,
      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
      implied, including, without limitation, any warranties or conditions
      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
      PARTICULAR PURPOSE. You are solely responsible for determining the
      appropriateness of using or redistributing the Work and assume any
      risks associated with Your exercise of permissions under this License.

   8. Limitation of Liability. In no event and under no legal theory,
      whether in tort (including negligence), contract, or otherwise,
      unless required by applicable law (such as deliberate and grossly
      negligent acts) or agreed to in writing, shall any Contributor be
      liable to You for damages, including any direct, indirect, special,
      incidental, or consequential damages of any character arising as a
      result of this License or out of the use or inability to use the
      Work (including but not limited to damages for loss of goodwill,
      work stoppage, computer failure or malfunction, or any and all
      other commercial damages or losses), even if such Contributor
      has been advised of the possibility of such damages.

   9. Accepting Warranty or Additional Liability. While redistributing
      the Work or Derivative Works thereof, You may choose to offer,
      and charge a fee for, acceptance of support, warranty, indemnity,
      or other liability obligations and/or rights consistent with this
      License. However, in accepting such obligations, You may act only
      on Your own behalf and on Your sole responsibility, not on behalf
      of any other Contributor, and only if You agree to indemnify,
      defend, and hold each Contributor harmless for any liability
      incurred by, or claims asserted against, such Contributor by reason
      of your accepting any such warranty or additional liability.

   END OF TERMS AND CONDITIONS

   APPENDIX: How to apply the Apache License to your work.

      To apply the Apache License to your work, attach the following
      boilerplate notice, with the fields enclosed by brackets "[]"
      replaced with your own identifying information. (Don't include
      the brackets!)  The text should be enclosed in the appropriate
      comment syntax for the file format. We also recommend that a
      file or class name and description of purpose be included on the
      same "printed page" as the copyright notice for easier
      identification within third-party archives.

   Copyright [yyyy] [name of copyright owner]

   Licensed under the Apache License, Version 2.0 (the "License");
   you may not use this file except in compliance with the License.
   You may obtain a copy of the License at

       http://www.apache.org/licenses/LICENSE-2.0

   Unless required by applicable law or agreed to in writing, software
   distributed under the License is distributed on an "AS IS" BASIS,
   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
   See the License for the specific language governing permissions and
   limitations under the License.



# Mega AI Hub resource metadata

Creator / publisher: David-Li0406
Original project: https://github.com/David-Li0406/meta-skill-evloving/blob/ca3a335628981df10c36e00cb9850df2c247ab9a/skill-flow/data/skills-refined-36k/skillsmp/browser-validator/SKILL.md
Attribution basis: Source repository record

Fields of work: Design, Development & Engineering
Roles: Frontend Developer, QA / Test Engineer, UX Designer
Specialties: Testing
Tools: Chrome Devtools
Country applicability: Country not specified
Classification basis: Source catalog labels
Instruction SHA-256: b785f932701fae06a2ca30369a2a70276d2948d387c633bebce658cdeca4484b