--- name: frontend-scrolling-conventions description: Enforces locked viewport with internal scrolling using view container classes. Use when creating views, fixing overflow issues, or ensuring proper scroll behavior. --- # Frontend Scrolling Conventions This skill defines scrolling conventions where the global container is non-scrollable and all scrolling happens internally. ## When to Use - When creating any new view - When content extends beyond viewport height - When fixing content overflow issues - When implementing scrollable components - When debugging scroll behavior ## Instructions ### Core Principle **The global container (`html`, `body`, `#app`, `.app-main`) is ALWAYS non-scrollable. The viewport is locked to prevent body scroll.** If any view or component needs to display content taller than the screen, it MUST use internal scrolling. ### Why This Matters A locked viewport provides: - Consistent layout (no shifting when content changes) - Predictable positioning (fixed\/absolute elements stay in place) - Better mobile experience (no overscroll bounce on body) - Cleaner animations - Full control over scrolling behavior ### View Container Options Every view **must** use one of these container classes: **1. `.view-fullscreen` (Non-Scrollable)** For views that fit entirely within the viewport (auth pages, simple forms). ```vue