Agent skill · software engineering · aiskillstore
screenfull-fullscreen-api
Implement fullscreen functionality using screenfull library for cross-browser fullscreen support in ng-events project
Why this skill is useful
Provides specific implementation patterns for using the screenfull library to enable fullscreen functionality in Angular applications, which the AI may not generate on its own.
What it needs
Requires screenfull installed locally. About 5k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
Screenfull Fullscreen API Skill This skill guides the implementation of fullscreen functionality using the screenfull library in the ng-events construction site management system. When to Use This Skill Triggers: "fullscreen", "screenfull", "full screen mode", "toggle fullscreen", "exit fullscreen" Use this skill when: Adding fullscreen toggle buttons Creating fullscreen viewers (images, videos, dashboards) Implementing presentation modes Building immersive UI experiences Providing fullscreen for specific components Installation & Setup Core Patterns 1. Basic Fullscreen Toggle 2. Fullscreen Specific Element 3. Image Gallery Fullscreen 4. Presentation Mode API Reference screenfull Methods Integration Checklist When using screenfull: [ ] Check screenfull.isEnabled before using API [ ] Handle browser compatibility gracefully [ ] Clean up event listeners on component destroy [ ] Provide exit fullscreen button [ ] Test on different browsers (Chrome, Firefox, Safari) [ ] Handle keyboard shortcuts (Escape to exit) [ ] Style fullscreen mode appropriately [ ] Consider mobile browsers (limited support) Best Practices DO ✅ Always check screenfull.isEnabled before use Provide clear UI to exit fullscreen Use Escape key to exit fullscreen Style fullscreen elements appropriately Clean up event listeners Handle errors gracefully DON'T ❌ Assume fullscreen API is always available Force fullscreen without user interaction Forget to remove event listeners Ignore mobile browser limitations Use fullscreen for sensitive actions Browser Compatibility Browser Support --------- --------- Chrome ✅ Full support Firefox ✅ Full support Safari ✅ Full support (iOS limited) Edge ✅ Full support iOS Safari ⚠️ Limited (video only) Android Chrome ✅ Full support References screenfull.js GitHub Fullscreen API MDN Can I Use Fullscreen --- Version: 1.0.0 Compatible with: screenfull 6.0.x Last Updated: 2025-12-25
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/screenfull-fullscreen-api