skills.rest
tankpkg
tankpkgOFFICIAL
Explore all skills by this author →
GitHub

@tank/browser-polyfills

Diagnose browser compatibility issues in Next.js applications across Safari and Firefox.

1|1|Updated Feb 20, 2026
Search Tags:#nextjs#polyfills#safari#browserslist#browser compatibility#feature detection#css workarounds
One-click install
npx skills add https://github.com/tankpkg/packages --skill tank-browser-polyfills
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: @tank/browser-polyfills
Source: https://github.com/tankpkg/packages/tree/main/skills/browser-polyfills
Command: npx skills add https://github.com/tankpkg/packages --skill tank-browser-polyfills

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps you diagnose and fix browser compatibility problems in Next.js apps, especially when code works in Chrome but fails in Safari, iOS Safari, or Firefox. It focuses on the smallest safe fix so you avoid shipping unnecessary polyfills or brittle browser-specific hacks.

Core Features & Use Cases

  • Identify the missing API, CSS quirk, or browser setting behind a Safari-only bug.
  • Choose between a JavaScript polyfill, a CSS workaround, a feature-detection guard, or a Next.js configuration change.
  • Apply best-practice delivery for App Router and Pages Router projects, including browserslist tuning and safe loading patterns.
  • Example use case: fixing requestIdleCallback crashes, 100vh layout issues on iPhone, input zoom problems, and smooth scrolling inconsistencies without bloating the bundle.

Quick Start

Ask for a Next.js browser compatibility diagnosis and the safest Safari-aware fix for the issue you are seeing.

Frequently Asked Questions about @tank/browser-polyfills

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I fix Safari compatibility issues in a Next.js app?▼

To fix Next.js Safari compatibility issues, diagnose missing JavaScript APIs or CSS layout bugs, then apply the smallest safe polyfill, CSS workaround, or feature-detection guard via _app or instrumentation-client to prevent bundle bloat.

Why does my Next.js code work in Chrome but break in iOS Safari?▼

Next.js code breaks in iOS Safari due to missing JavaScript APIs, viewport handling errors like 100vh layout issues, or scroll behavior inconsistencies that require feature detection and conditional polyfill loading to resolve safely.

What is the best way to load polyfills for Next.js without bloating the bundle?▼

The best way to load Next.js polyfills safely is using feature detection, conditional loading through instrumentation-client or _app, and tuning browserslist to target specific Safari and Firefox versions, ensuring you ship only necessary code.

How do I fix 100vh layout bugs and input zoom on iPhone in Next.js?▼

Fix iPhone 100vh layout bugs and input zoom problems in Next.js by applying targeted CSS workarounds and browser-specific viewport handling adjustments instead of shipping heavy JavaScript polyfills for Safari.

Does this approach support both App Router and Pages Router for browser compatibility?▼

Yes, this approach supports both App Router and Pages Router projects by applying best-practice delivery patterns, including browserslist tuning and safe polyfill loading configurations for Next.js applications.

Related Skills

Explore More Software Engineering Skills→
PrasadTelasulaPrasadTelasula

cross-browser-testing

Automate cross-browser compatibility tests across Chrome, Firefox, Safari, and Edge.

Community
Advanced
forbotsakeforbotsake
5

gstack

Automate end-to-end QA testing and evidence collection for web pages with a headless browser.

Official
Advanced
ApothecaryManApothecaryMan

skeleton-loading-system

Implement a 4-tier skeleton loading system for web applications using JavaScript.

Community
Advanced
aleen42aleen42
3

ie-compatibility-skill

Configure Babel, PostCSS, and Webpack for IE8+ compatibility.

Community
Advanced