use-modern-browser-apislisted
Install: claude install-skill orassayag/agentic-project-workflow
# 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