skills.rest
daichan132
daichan132COMMUNITY
Explore all skills by this author →
GitHub

fullscreen-chat-contracts

Diagnose iframe hiding and DOM relocation issues during YouTube fullscreen transitions.

34|Updated Oct 30, 2023
Search Tags:#debugging#youtube#iframe#browser-extension#overlay#dom-manipulation#fullscreen
One-click install
npx skills add https://github.com/daichan132/Youtube-Live-Chat-Fullscreen --skill fullscreen-chat-contracts
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: fullscreen-chat-contracts
Source: https://github.com/daichan132/Youtube-Live-Chat-Fullscreen/tree/main/.agents/skills/fullscreen-chat-contracts
Command: npx skills add https://github.com/daichan132/Youtube-Live-Chat-Fullscreen --skill fullscreen-chat-contracts

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Provides a comprehensive contract and debugging guide for fullscreen chat overlays to prevent boundary breaches and throttling, ensuring stable user experience when YouTube switches to fullscreen and moves the chat container.

Core Features & Use Cases

  • Runtime contracts for live, archive, no-chat states, and rules to avoid iframe borrowing that leads to broken overlays.
  • Guidance on iframe concealment, DOM relocation, and CSS tricks to preserve chat visibility during fullscreen transitions.
  • Debugging checklist and practical references to agent-browser workflows for validating DOM state and overlay behavior.

Quick Start

Refer to fullscreen-chat-contracts and use the ylc-agent-browser workflow to validate DOM relocation, iframe concealment, and overlay behavior during fullscreen transitions.

Frequently Asked Questions about fullscreen-chat-contracts

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
Why does my YouTube fullscreen chat overlay break during DOM relocation?▼

Separating canToggle and sourceReady states prevents broken overlays during YouTube fullscreen DOM relocation. Applying iframe concealment strategies and strict blur/background rules ensures chat visibility without boundary breaches or throttling across live, archive, and no-chat states.

How do I debug iframe hiding issues during YouTube fullscreen transitions?▼

Validate iframe concealment and DOM relocation using an agent-browser workflow to inspect DOM state during fullscreen transitions. Apply a debugging checklist to isolate style application failures and verify overlay behavior across live, archive, and no-chat states.

What runtime contracts are needed for a fullscreen chat overlay?▼

Runtime contracts must separate canToggle and sourceReady states, enforce iframe concealment, and apply strict blur and background rules. These contracts govern live, archive, and no-chat states to prevent iframe borrowing and overlay throttling.

How do I prevent iframe borrowing when relocating chat containers in fullscreen?▼

Enforce strict DOM relocation contracts and iframe concealment strategies to prevent iframe borrowing. Apply blur and background CSS rules during fullscreen transitions to maintain stable overlay behavior without boundary breaches or throttling.

Does separating canToggle and sourceReady fix fullscreen chat throttling?▼

Separating canToggle and sourceReady states fixes fullscreen chat throttling by preventing premature iframe borrowing. Combined with proper iframe concealment and blur/background rules, it ensures stable overlay behavior across all chat states.

What are the limitations of CSS tricks for preserving chat visibility in fullscreen?▼

CSS tricks alone cannot prevent boundary breaches when YouTube moves the chat container during fullscreen transitions. Without enforcing runtime contracts for iframe concealment and DOM relocation, style application issues and throttling persist across live, archive, and no-chat states.

Related Skills

Explore More Software Engineering Skills→
daichan132daichan132
34

ylc-agent-browser

Validate YouTube live chat overlay UI states across live and replay modes.

Community
Advanced
yanochka11yanochka11

webapp-testing

Automate Playwright browser tests for local web applications.

Community
Intermediate
ai-shifuai-shifu
309

fullscreen-dialog-portal

Detect fullscreen mode and manage dialog portal containers for correct overlay rendering.

Official
Intermediate
pacphipacphi
14

Chrome DevTools

Debug web pages via Chrome DevTools MCP with performance, network, and DOM inspection.

Community
Advanced