use-modern-browser-apis

Included with Lifetime

$97 forever

Utilize built-in browser APIs (like Popover API, View Transitions etc) instead of building features manually via JavaScript

Backend & APIs

What this skill does

# Using Modern Browser APIs

We prefer native, modern browser APIs — _standardized, widely supported, and high-leverage_ — to heavy external libraries or custom fallbacks. Use them to simplify logic, improve performance, and reduce bundle size where appropriate.

## Philosophy

- **PREFER** browser-native capabilities over third-party dependencies
- **PROGRESSIVE ENHANCE**: Always provide sensible fallbacks for APIs that aren’t available in all clients
- **ASYNC & SECURE**: Use promise-based and secure context APIs for non-blocking, safe access

## Core & Widely Supported APIs

These APIs are stable, broadly implemented, and useful in everyday applications.

### UI & Interaction

- **Intersection Observer API** — Efficiently detect when elements enter/exit the viewport (lazy loading, infinite scroll).
- **ResizeObserver API** — React to element size changes without layout thrashing.
- **PerformanceObserver API** — Observe performance metrics (RUM/perf insights).
- **BroadcastChannel API** — Cross-tab communication in the same origin.

### Navigation & View Management

- **View Transitions API** — Native, hardware-accelerated transitions between UI states.
- **URLPattern API** — Declaratively match and parse URLs (helps in routing logic).

### Clipboard & Sharing

- **Clipboard Async API** — Non-blocking, modern clipboard read/write with user consent.
- **Web Share API Level 2** — Share text, links, files through native device dialogs.

### Files & Persistence

- **File System Access API** — Read/write local files with user permissions.
- **File Handle & Directory Picker** extensions for batch file/directory selection.

### Concurrency & Scheduling

- **Web Locks API** — Coordinate async access to shared resources (avoid races).
- **Scheduling API** — Prioritize/background non-essential work to improve responsiveness.

### Workers & Off-Main Thread

- **Web Workers API** — Run scripts off the main thread for intensive tasks.
- **OffscreenCanvas** — Use canvas rendering in workers for performant graphics/visuals.

### Speech & Accessibility

- **Web Speech API** — Integrate speech recognition and synthesis for accessibility and voice UI.

### Advanced Graphics & Compute

- **WebGPU API** — Low-level GPU access for high-perf rendering and compute workloads (in many browsers; includes Chromium + newer Safari + Firefox support).

### Real-Time & Networking

- **WebRTC** — Real-time peer-to-peer audio/video communication without plugins.

## When to Use & How to Fallback

- **FEATURE DETECTION** is required before use:
```js
if ('clipboard' in navigator) { … }
```

For APIs not universally supported (e.g., WebGPU), provide a graceful fallback (WebGL or degraded UI).

Always combine user gesture requirements (e.g., for sharing or clipboard) with permission checks.

## Best Practices

**ASYNC FIRST**: Prefer promise/async APIs to avoid blocking UI.

**PERMISSIONS UI**: Convey clearly to users when the browser will ask for access (files, clipboard, sharing).

**PERFORMANCE MINDFUL**: Observe and prioritize main thread work using PerformanceObserver or Scheduling APIs.

**SECURE CONTEXTS**: Use HTTPS; many APIs require secure contexts to function.

## General Principles

Write code for browsers as platforms, not just JS engines.

Prefer native semantics (e.g., lazy loading via IntersectionObserver vs manual scroll handlers).

Reduce external dependencies where modern browser APIs suffice.

Document API usage and fallback patterns for maintenance and cross-browser support.

Files: 1

Size: 3.7 KB

Complexity: 6/100

Category: Backend & APIs

Source: https://github.com/academind/ai-config/tree/main/skills/modern-browser-apis

Related in Backend & APIs

jfrog

Included

Interact with the JFrog Platform via the JFrog CLI and REST/GraphQL APIs. Use this skill when the user wants to manage Artifactory repositories, upload or download artifacts, manage builds, configure permissions, manage users and groups, work with access tokens, configure JFrog CLI servers, search artifacts, manage properties, set up replication, manage JFrog Projects, run security audits or scans, look up CVE details, query exposures scan results from JFrog Advanced Security, manage release bundles and lifecycle operations, aggregate or export platform data, or perform any JFrog Platform administration task. Also use when the user mentions jf, jfrog, artifactory, xray, distribution, evidence, apptrust, onemodel, graphql, workers, mission control, curation, advanced security, exposures, or any JFrog product name.

Backend & APIsscripts

cupynumeric-migration-readiness

Included

Pre-migration readiness assessor for porting NumPy to cuPyNumeric. Use BEFORE substantial porting work begins when the user asks whether code will scale on GPU, whether they should migrate to cuPyNumeric, which NumPy patterns transfer cleanly, what must be refactored before porting, or mentions pre-port assessment, scaling analysis, or refactor planning. Inspect the user's source code, look up NumPy usage, cross-reference the cuPyNumeric API support manifest, and distinguish distributed-scaling-friendly patterns from blockers such as unsupported APIs, scalar synchronization, host round-trips, Python/object-heavy control flow, shape/data-dependent branching, and in-place mutation hazards. Produce a verdict of READY, LIGHT REFACTOR, SIGNIFICANT REFACTOR, or NOT RECOMMENDED, with concrete refactor pointers.

Backend & APIsscripts

alibabacloud-data-agent-skill

Included

Invoke Alibaba Cloud Apsara Data Agent for Analytics via CLI to perform natural language-driven data analysis on enterprise databases. Data Agent for Analytics is an intelligent data analysis agent developed by Alibaba Cloud Database team for enterprise users. It automatically completes requirement analysis, data understanding, analysis insights, and report generation based on natural language descriptions. This tool supports: discovering data resources (instances/databases/tables) managed in DMS, initiating query or deep analysis sessions, real-time progress tracking, and retrieving analysis conclusions and generated reports. Use this Skill when users need to query databases, analyze data trends, generate data reports, ask questions in natural language, or mention "Data Agent", "data analysis", "database query", "SQL analysis", "data insights".

Backend & APIsscripts

token-optimizer

Included

Reduce OpenClaw token usage and API costs through smart model routing, heartbeat optimization, budget tracking, and native 2026.2.15 features (session pruning, bootstrap size limits, cache TTL alignment). Use when token costs are high, API rate limits are being hit, or hosting multiple agents at scale. The 4 executable scripts (context_optimizer, model_router, heartbeat_optimizer, token_tracker) are local-only — no network requests, no subprocess calls, no system modifications. Reference files (PROVIDERS.md, config-patches.json) document optional multi-provider strategies that require external API keys and network access if you choose to use them. See SECURITY.md for full breakdown.

Backend & APIsscripts

resend-cli

Included

Use this skill when the task is specifically about operating Resend from an AI agent, terminal session, or CI job via the official resend CLI: installing/authenticating the CLI, sending/listing/updating/cancelling emails, batch sends, domains and DNS, webhooks and local listeners, inbound receiving, contacts, topics, segments, broadcasts, templates, API keys, profiles, or debugging Resend CLI/API failures. Trigger on mentions of Resend CLI, `resend`, `resend doctor`, `resend emails send`, `resend domains`, `resend webhooks listen`, `resend emails receiving`, or agent-friendly terminal automation.

Backend & APIsscripts

alibabacloud-odps-maxframe-coding

Included

Use this skill for MaxFrame SDK development and documentation navigation on Alibaba Cloud MaxCompute (ODPS). Helps answer MaxFrame API, concept, official example, and supported pandas API questions; create data processing programs; read/write MaxCompute tables; debug jobs (remote or local); and build custom DPE runtime images. Trigger when users mention MaxFrame, MaxCompute with MaxFrame, ODPS table processing, DPE runtime, MaxFrame docs/examples, DataFrame/Tensor operations, or GPU runtime setup. Works for both English and Chinese queries about Alibaba Cloud data processing with MaxFrame.

Backend & APIsscripts