vendix-frontend-sticky-header

What problem does it solve?

This skill provides a standardized approach to implementing sticky headers that reliably stay at the top of the viewport, avoiding unintended shifts caused by padded containers.

Core Features & Use Cases

• Implementation checklist for sticky header: ensure the header uses sticky positioning, high z-index, and a translucent or solid background with backdrop blur as appropriate.
• Layout guidance: headers should live at the root of the main container, not inside inner padded sections, to prevent offset during scroll.
• Reusable component pattern: provide a consistent header API and styling guideline that can be shared across pages (dashboards, forms, lists).
• Use Case: apply the pattern to dashboards, forms, and content pages that require a persistent top navigation or title bar.

Quick Start

Start applying the sticky header pattern by refactoring your main layout to place the header at the root container level, use a fixed/sticky top position, and ensure inner content uses padding without affecting the header.