browser-validator
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
- Test in Real Environments: Browsers behave differently than localhost
- Multiple Breakpoints Required: Mobile, tablet, desktop have different challenges
- Accessibility Requires Manual Verification: Automated tools miss context-dependent issues
- Visual QA Prevents Surprises: Screenshots catch layout breaks before users see them
Why Browser Validation Matters
More from kanopi/cms-cultivator
responsive-styling
Automatically generate mobile-first responsive CSS/SCSS when creating component styles or mentioning responsive design. Implements standard breakpoints (768px, 1024px), ensures WCAG AA color contrast, creates touch-friendly interfaces (44px minimum targets), adds proper focus indicators, supports reduced motion, scales typography responsively, and provides detailed technical specifications with exact values.
29drupalorg-issue-helper
Quick help with drupal.org issue templates, formatting, contributing patches, and best practices. Invoke when user asks "how do I write a bug report?", "drupal.org issue template", "issue formatting", "I have a patch", "contribute back", "submit my fix", "I fixed a bug in a module", or needs help structuring issue descriptions or contributing code to drupal.org projects.
25drupalorg-contribution-helper
Quick help with drupal.org contribution workflows including git commands, branch naming, issue fork setup, and merge request creation. Invoke when user asks "how do I contribute to drupal.org?", "drupal.org git workflow", "issue fork", "drupal merge request", or needs help with git.drupalcode.org commands.
18design-analyzer
Automatically extract technical requirements from design references when user mentions Figma, uploads images, or says "implement this design". Analyzes colors, typography, spacing, layout, and maps to WordPress blocks or Drupal paragraph fields. Provides detailed specifications for developers including exact values, responsive behavior, and accessibility requirements.
18performance-analyzer
Automatically analyze performance issues when user mentions slow pages, performance problems, or optimization needs. Performs focused performance checks on specific code, queries, or components. Invoke when user says "this is slow", "performance issue", "optimize", or asks about speed.
17code-standards-checker
Automatically check code against PHPCS, ESLint, WordPress Coding Standards, or Drupal Coding Standards when user asks about code style, standards compliance, or best practices. Invoke when user mentions "coding standards", "code style", "linting", "PHPCS", "ESLint", or asks if code follows conventions.
16