screenfull-fullscreen-api
Build Screenfull Fullscreen Controls
Fullscreen UI work can be fragile across browsers and Angular components. This skill provides screenfull patterns for toggles, viewers, dashboards, and presentation modes.
Install with my Agent
Copy this request to your Agent. It includes the canonical Skill page and manifest.
Review the Skillstore skill "screenfull-fullscreen-api" from https://skillstore.io/skills/7spade-screenfull-fullscreen-api.md and its manifest at https://skillstore.io/api/skills/7spade-screenfull-fullscreen-api/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.Your Agent should still show its plan and request any confirmation required by the security policy.
Agent-readable resources
Use these links when an AI agent, crawler, or script needs clean context instead of reading the full page.
Test it
Using "screenfull-fullscreen-api". Add a fullscreen button to my dashboard.
Expected outcome:
- A component-level implementation plan using screenfull.
- State handling for fullscreen changes and exits.
- Fallback behavior when the browser API is unavailable.
Using "screenfull-fullscreen-api". Review my presentation mode design.
Expected outcome:
A concise audit covering keyboard controls, exit handling, listener cleanup, and browser support.
Using "screenfull-fullscreen-api". Plan a fullscreen photo viewer.
Expected outcome:
A workflow that opens selected media in fullscreen, exits cleanly, and accounts for limited mobile browser support.
Security Audit
SafeAll static findings are false positives caused by Markdown code fences, screenfull API method names, keyboard event property names, and reference links. I found no prompt injection, data exfiltration intent, system reconnaissance, certificate handling, or executable malware behavior in SKILL.md.
Risk Factors
⚙️ External commands (20)
🌐 Network access (6)
Share & cite this report
Share the versioned assessment report, neutral badge, embed card, and citations. Skillstore reports evidence without deciding whether this Skill is safe.
Copy report link
https://skillstore.io/skills/7spade-screenfull-fullscreen-api/audits/6?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdown badge
[](https://skillstore.io/skills/7spade-screenfull-fullscreen-api?utm_source=security_passport_badge)HTML badge
<a href="https://skillstore.io/skills/7spade-screenfull-fullscreen-api?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/7spade-screenfull-fullscreen-api/security.svg" alt="Skillstore security assessment" loading="lazy"></a>Embed card
<iframe src="https://skillstore.io/embed/skills/7spade-screenfull-fullscreen-api.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>Academic citations (APA · BibTeX · CFF)
APA citation
7Spade. (2026). screenfull-fullscreen-api security audit report (audit version 6) [Author version unspecified]. Skillstore. https://skillstore.io/skills/7spade-screenfull-fullscreen-api/audits/6BibTeX citation
@techreport{7spade-7spade-screenfull-fullscreen-api-2026,
author = {7Spade},
title = {screenfull-fullscreen-api security audit report (audit version 6)},
institution = {Skillstore},
year = {2026},
number = {6},
url = {https://skillstore.io/skills/7spade-screenfull-fullscreen-api/audits/6},
note = {Author version unspecified}
}CITATION.cff
cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "screenfull-fullscreen-api security audit report (audit version 6)"
version: "unspecified"
type: report
authors:
- name: "7Spade"
date-released: "2026-07-04"
url: "https://skillstore.io/skills/7spade-screenfull-fullscreen-api/audits/6"
identifiers:
- type: other
value: "skillstore:7spade-screenfull-fullscreen-api:audit:6"
description: "Skillstore immutable audit report identifier"
Skillstore Score
Why this score Evidence Confidence: HighWhat You Can Build
Add Dashboard Fullscreen
Build a fullscreen mode for monitoring dashboards while preserving state and clear exit controls.
Create Media Reviewers
Add fullscreen photo or video viewers for teams that inspect project media.
Design Presentation Mode
Create keyboard-aware presentation screens with compatibility checks and cleanup guidance.
Try These Prompts
Add a fullscreen toggle to my Angular component using screenfull. Explain required imports, state handling, and fallback behavior.
Refactor this Angular dashboard so only its container enters fullscreen. Include event listener cleanup and user-visible exit controls.
Design a fullscreen image viewer for construction photos using screenfull and Angular signals. Include accessibility, mobile limits, and state reset behavior.
Audit my fullscreen implementation against the skill checklist. Identify browser compatibility gaps, event cleanup issues, and unsafe user interaction patterns.
Best Practices
- Check screenfull.isEnabled before requesting fullscreen.
- Request fullscreen only after a clear user action.
- Remove event listeners when the Angular component is destroyed.
Avoid
- Do not force fullscreen on page load or without user intent.
- Do not leave fullscreen change listeners registered after navigation.
- Do not use fullscreen for sensitive confirmation or payment flows.