← ClaudeAtlas

use-modern-browser-apislisted

Utilize built-in browser APIs (like Popover API, View Transitions etc) instead of building features manually via JavaScript
orassayag/agentic-project-workflow · ★ 1 · AI & Automation · score 62
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