skills.rest
PlasticDigits
PlasticDigitsCOMMUNITY
Explore all skills by this author →
GitHub

contributor-mobile-album-dock

Sync RootLayout app-header margins with the AlbumPlayerBar dock constant.

1|Updated Mar 25, 2026
Search Tags:#debugging#layout#frontend#css#mobile#guardrails#album-dock
One-click install
npx skills add https://github.com/PlasticDigits/yieldomega --skill contributor-mobile-album-dock
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: contributor-mobile-album-dock
Source: https://github.com/PlasticDigits/yieldomega/tree/main/skills/contributor-mobile-album-dock
Command: npx skills add https://github.com/PlasticDigits/yieldomega --skill contributor-mobile-album-dock

SYSTEM DOCUMENTATION & REQUIREMENTS

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.

Frequently Asked Questions about contributor-mobile-album-dock

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

FAQPage Schema
How do I fix mobile header overlap with a fixed audio player dock?▼

Fix mobile header overlap by syncing the RootLayout nav margin with the fixed AlbumPlayerBar dock using the MOBILE_HEADER_TOP_CLEARANCE_BELOW_SAFE_AREA_REM constant. This guardrail ensures consistent spacing so UI elements remain separate and legible at mobile breakpoints.

Why does my fixed mobile player bar cover the navigation header on narrow screens?▼

A fixed mobile player bar covers the navigation header when CSS margins and TypeScript layout constants are out of sync. Aligning the RootLayout .app-header margin with the MOBILE_HEADER_TOP_CLEARANCE_BELOW_SAFE_AREA_REM constant resolves the visual clash.

How to prevent visual overlap when editing frontend layout and audio chrome at mobile breakpoints?▼

Prevent visual overlap by enforcing invariant spacing between the AlbumPlayerBar dock and RootLayout .app-header. Update frontend CSS and mobileAlbumDockLayout.ts so the app header margin matches the active MOBILE_HEADER_TOP_CLEARANCE_BELOW_SAFE_AREA_REM value.

Can I use a single source of truth to align CSS margins with TypeScript layout constants?▼

Yes, you can align CSS margins with TypeScript layout constants by syncing the RootLayout .app-header margin with MOBILE_HEADER_TOP_CLEARANCE_BELOW_SAFE_AREA_REM. This single source of truth prevents spacing drift during frontend edits.

What causes mobile header spacing regressions after frontend layout edits?▼

Mobile header spacing regressions occur when editing frontend CSS or audio chrome breaks alignment with the MOBILE_HEADER_TOP_CLEARANCE_BELOW_SAFE_AREA_REM constant. Running the mobileAlbumDockLayout regression test verifies the invariant enforcement remains intact.

Do I need a regression test to guard mobile header spacing during frontend edits?▼

Yes, a regression test like mobileAlbumDockLayout.test.ts guards mobile header spacing by verifying the AlbumPlayerBar dock does not encroach on the RootLayout .app-header. It ensures consistent spacing survives future frontend layout edits.

Related Skills

Explore More Software Engineering Skills→
wibus-weewibus-wee
6

frontend-guardrails

Enforce centralized SWR keys, UI settings, and form configuration guardrails in frontend code.

Community
Advanced
nassimbfnassimbf
3

browser-qa

Automates browser-based QA for visual, interaction and accessibility checks across web applications.

Community
Advanced
rarestgrarestg
1

code-quality

Automate code quality tooling setup for Python and JavaScript/TypeScript projects.

Community
Advanced
saint2706saint2706

responsive-design

Generate mobile-first responsive web designs using CSS Grid, Flexbox, and media queries.

Community
Intermediate