web-interface-guidelines-review

Web Interface Guidelines Review

Audit frontend files for accessibility, interaction quality, performance, and content rules. Return concise findings in file:line format grouped by file, with no preamble.

When to use

• Use case 1: When you need a fast compliance pass on UI components before merge
• Use case 2: When a team wants consistent accessibility and interaction quality checks
• Use case 3: When reviewers need terse, high-signal findings instead of long explanations

Required tools / APIs

• rg (ripgrep) — fast code search across source files
• node (optional) — structured scans and report generation
• No external API required

Install options:

# Ubuntu/Debian
sudo apt-get install -y ripgrep nodejs npm

# macOS
brew install ripgrep node

Skills

basic_usage

Run a pattern-based compliance scan and emit grouped findings.

# 1) Choose files (example)
FILES="src/**/*.{vue,js,jsx,html,css}"

# 2) Run targeted checks (examples)
rg -n "<button[^>]*>\s*(<svg|<i)" $FILES
rg -n "<img(?![^>]*\balt=)" -P $FILES
rg -n "transition\s*:\s*all" -P $FILES
rg -n "outline-none|outline:\s*none" -P $FILES
rg -n "onPaste\s*=\s*\{[^}]*preventDefault" -P $FILES
rg -n "user-scalable\s*=\s*no|maximum-scale\s*=\s*1" -P $FILES

Node.js:

const { execSync } = require('node:child_process');

const checks = [
  { rule: 'icon button missing aria-label', cmd: "rg -n \"<button[^>]*>\\s*(<svg|<i)\" src" },
  { rule: 'image missing alt', cmd: "rg -n -P \"<img(?![^>]*\\balt=)\" src" },
  { rule: 'transition: all used', cmd: "rg -n -P \"transition\\s*:\\s*all\" src" },
  { rule: 'outline removed without replacement', cmd: "rg -n -P \"outline-none|outline:\\s*none\" src" }
];

function runCheck({ rule, cmd }) {
  try {
    const out = execSync(cmd, { encoding: 'utf8' }).trim();
    if (!out) return [];
    return out.split('\n').map((line) => {
      const [file, lineNo] = line.split(':');
      return `${file}:${lineNo} - ${rule}`;
    });
  } catch {
    return [];
  }
}

const findings = checks.flatMap(runCheck);
if (!findings.length) {
  console.log('✓ pass');
} else {
  console.log(findings.join('\n'));
}