Menu
Utilize built-in browser APIs (like Popover API, View Transitions etc) instead of building features manually via JavaScript
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Describes efficient usage of Bun and Bun APIs instead of Node.js (and its APIs)
Write clean, efficient TypeScript code that follows common best practices
Write clean, modern, and highly accessible HTML & JSX code, using semantically correct elements and attributes
Build modern Next.js apps with App Router and best practices
Build clean, modern React components that apply common best practices and avoid common pitfalls like unnecessary state management or useEffect usage
Build clean, scalable UIs with Tailwind CSS using modern utilities and variants
| name | use-modern-browser-apis |
| description | Utilize built-in browser APIs (like Popover API, View Transitions etc) instead of building features manually via JavaScript |
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.
These APIs are stable, broadly implemented, and useful in everyday applications.
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.
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.
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.