Works with the AI tools you already use

    Claude CodeClaude CodeCursorCursorCodex CLICodex CLIGitHub CopilotGitHub CopilotGemini CLIGemini CLI+17 more

    Cross Browser Bug Triager

    1

    Diagnose and fix engine-specific CSS and layout bugs for Safari, iOS, and mobile browsers.

    Free

    0 installsSecurity scanned

    See it in action

    You say

    My mobile navigation menu is being cut off at the bottom on Safari on iPhone, but it works fine in Chrome on my desktop. Here is my CSS for the container: height: 100vh; overflow-y: scroll;

    Your agent does

    The issue is the classic WebKit 100vh quirk where the address bar isn't accounted for in the viewport height.

    Diagnosis: WebKit Viewport Overflow. Fix: Use height: 100dvh; (Dynamic Viewport Height) to automatically adjust for browser UI elements. Verification: Test in iOS Safari.

    About this skill

    The problem

    Layouts that look perfect in Chrome often break in Safari or mobile browsers due to engine-specific rendering quirks. Identifying whether a bug stems from WebKit, Gecko, or Blink behavior is difficult without deep platform-specific knowledge.

    What it does

    • Maps reported UI symptoms to specific browser engine behaviors (WebKit, Blink, Gecko).
    • Identifies mobile-specific issues like the Safari 100vh address bar overflow and safe-area-insets.
    • Diagnoses stacking context and z-index inconsistencies triggered by transforms or filters.
    • Troubleshoots touch-vs-hover interaction conflicts and sticky positioning failures.
    • Provides standards-based fixes using modern CSS units like dvh, svh, and lvh.

    Frameworks & tools

    CSS3, HTML5, WebKit (Safari/iOS), Blink (Chrome/Edge), Gecko (Firefox).

    Why this beats prompting it yourself

    Generic prompts often result in outdated vendor-prefix suggestions or "shotgun debugging" that bloats your CSS. This skill uses a structured triage process to pinpoint the exact engine quirk, favoring modern standards-based solutions over fragile hacks.

    Use cases

    • Fixing elements that overflow or gap unexpectedly on iPhone browsers.
    • Resolving sticky headers that fail only on specific mobile viewports.
    • Debugging hover states that get "stuck" on touch devices.
    • Aligning inconsistent Flexbox or Grid behavior across different rendering engines.

    Known limitations

    Requires specific browser, OS, and device details to provide an accurate diagnosis. Visual bugs are best triaged when CSS/HTML snippets or detailed box-model descriptions are provided.

    How to install

    Drop the file into your AI Agent. Works with Claude, Cursor, ChatGPT, and 20+ more.

    Reviews

    No reviews yet

    Be one of the first to try it. Every listed skill passes our trust checks below.

    Security scanned

    Passed our 8-point scan before listing

    Fresh listing

    Recently published to Agensi

    Free forever

    No account required to browse

    Trust & safety

    Security scanned

    Verified clean 1 day ago

    • Free to download with an account

    Listed1 day ago

    Frequently Asked Questions

    Free