skills.rest
hassanzohdy
hassanzohdyCOMMUNITY
Explore all skills by this author →
GitHub

mongez-supportive-is-environment

Detect client-side browser and device environments with supportive-is predicates.

12|3|Updated Nov 29, 2017
Search Tags:#javascript#environment-detection#browser-predicates#ssr-safety#isMobile#isBrowser#vendor-probes
One-click install
npx skills add https://github.com/hassanzohdy/supportive-is --skill mongez-supportive-is-environment
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mongez-supportive-is-environment
Source: https://github.com/hassanzohdy/supportive-is/tree/main/skills/environment
Command: npx skills add https://github.com/hassanzohdy/supportive-is --skill mongez-supportive-is-environment

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Developers need reliable, front-end–friendly predicates to detect the execution environment (mobile vs desktop, browser vendor, and SSR vs client). This skill documents the browser and device-environment predicates exposed by @mongez/supportive-is, including isMobile, isMac, isDesktop, isBrowser, isChrome, isFirefox, isSafari, isOpera, isIE, and isEdge, along with SSR safety notes and known edge cases.

Core Features & Use Cases

  • SSR-safe environment checks read navigator/window/document only on the client side and provide safe fallbacks on the server.
  • Vendor-probe predicates help tailor UI logic (layout, keyboard shortcuts, feature flags) across platforms.
  • Composability: use isMobile.any(), isBrowser(name), and isDesktop() to drive responsive behavior.

Quick Start

Import the environment predicates from @mongez/supportive-is and start using isMobile.any() to adapt the UI for mobile or desktop.

Frequently Asked Questions about mongez-supportive-is-environment

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

FAQPage Schema
How do I detect mobile vs desktop environments safely in an SSR JavaScript application?▼

Detect browser vendors in JavaScript using vendor-probe predicates such as isChrome, isFirefox, isSafari, isOpera, isIE, and isEdge. These checks allow you to tailor UI logic, including layout adjustments and keyboard shortcuts, for specific platforms.

How do I check the browser vendor in JavaScript to adjust UI features?▼

Detect browser vendors in JavaScript using vendor-probe predicates such as isChrome, isFirefox, isSafari, isOpera, isIE, and isEdge. These checks allow you to tailor UI logic, including layout adjustments and keyboard shortcuts, for specific platforms.

What is the best way to safely access navigator and window during server-side rendering?▼

The safest way to access navigator and window during server-side rendering is using SSR-safe environment checks. Predicates like isBrowser automatically provide safe fallbacks on the server, preventing reference errors before client hydration.

Does this environment detection method support macOS platform distinctions?▼

Yes, environment detection supports platform distinctions through the isMac predicate. You can combine platform-specific checks with responsive predicates to drive UI decisions across different desktop environments.

What are the limitations of using vendor probes for responsive UI decisions?▼

A limitation of using vendor probes for responsive UI decisions is the reliance on client-side navigator reads, which are unavailable during SSR. You must account for known edge cases and ensure safe fallbacks are applied when running on the server.

Related Skills

Explore More Software Engineering Skills→
hassanzohdyhassanzohdy
12

mongez-supportive-is-primitives

Document six primitive and numeric type predicates for JavaScript and TypeScript.

Community
Intermediate
mealpacmealpac
1

feature-flag-system

Toggle software features with boolean and percentage-based feature flags.

Community
Advanced
MaxStrootmannMaxStrootmann

integration-nextjs-app-router

Integrate PostHog analytics into Next.js App Router applications.

Community
Intermediate
ccheneyccheney
58

modern-css

Explain native CSS Grid, Flexbox, and Container Queries for responsive layouts.

Community
Intermediate