Skills
.Work. You
Rest

contributor-mobile-album-dock

Community

Guard mobile header spacing during frontend edits

Software Engineering#debugging#layout#frontend#css#mobile#guardrails#album-dock
AuthorPlasticDigits
Version1.0.0
Installs0

System Documentation

What problem does it solve?

The mobile header and AlbumPlayerBar can visually clash on narrow screens if the fixed dock overlaps the nav chrome; this guardrail ensures consistent spacing so UI elements remain separate and legible.

Core Features & Use Cases

  • Invariant enforcement: keeps the AlbumPlayerBar dock from encroaching on the RootLayout .app-header at mobile widths.
  • Single source of truth: aligns CSS margins with the MOBILE_HEADER_TOP_CLEARANCE_BELOW_SAFE_AREA_REM constant in the TypeScript layout file.
  • Guidance for editors: provides a clear reference when front-end developers adjust mobile chrome and header margins.

Quick Start

Update frontend CSS and mobileAlbumDockLayout.ts so the app header margin remains synced with the active MOBILE_HEADER_TOP_CLEARANCE_BELOW_SAFE_AREA_REM value.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: contributor-mobile-album-dock
Download link: https://github.com/PlasticDigits/yieldomega/archive/main.zip#contributor-mobile-album-dock

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.