browser-bugslisted

Audit frontend code for 50 known cross-browser bugs and mobile compatibility pitfalls documented in 'Fifty Problems with Standard Web APIs in 2025.' Scans HTML, CSS, and JavaScript/TypeScript for patterns that break on Safari iOS, Firefox iOS, Chrome, and mobile browsers — then produces a severity-ranked report with specific fixes. Use this skill when the user asks to check for browser bugs, audit cross-browser compatibility, review mobile compatibility, check Safari issues, find iOS bugs in their code, or asks why something doesn't work on mobile/Safari/Firefox. Also trigger when the user mentions viewport units breaking, audio not playing on iOS, drag-and-drop not working on mobile, fullscreen issues, or touch interaction problems.
svyatov/agent-toolkit · ★ 0 · Web & Frontend · score 72

Install: claude install-skill svyatov/agent-toolkit

# Browser Bugs Audit Scan a frontend codebase for 50 documented cross-browser bugs and produce a prioritized fix report. Based on [Fifty Problems with Standard Web APIs in 2025](https://zerotrickpony.com/articles/browser-bugs/). ## Step 1: Determine Scope Ask the user what to scan if not obvious from context: | Trigger | Scope | |---------|-------| | Specific file or component | That file/component and its styles | | "check my app" / "audit the frontend" | Scan all HTML, CSS, JS/TS in the project | | Specific symptom ("audio broken on iOS") | Targeted scan for related bug patterns | For project-wide scans, find frontend files first: ``` Glob: **/*.{html,css,scss,less,js,jsx,ts,tsx,vue,svelte} ``` ## Step 2: Scan for Bug Patterns Read `references/bug-catalog.md` for the full catalog of 50 bugs with detection patterns and fixes. Scan code in four passes, checking each file against the relevant patterns: ### Pass 1: CSS / Styling Search for these high-signal patterns across all stylesheets and style blocks: - `100vh` or `100vw` without `dvh` fallback — **viewport units break on iOS** (#1, #2) - `svh` or `lvh` usage — **broken on Firefox iOS** (#26). Prefer `dvh` instead - `flex-grow` in scrollable containers without `flex-shrink: 0` on siblings — **Safari shrinks text** (#18) - `::selection` for critical UI — **ignored on Safari iOS** (#30) - `filter: blur()` on `<svg>` elements — **broken on Safari** (#31) - Dark theme without `scrollbar-color` — **white scrollbars