What problem does it solve? Frontend developers often create inconsistent page layouts when building new screens, leading to mismatched content widths, duplicated sidebar logic, and broken navigation patterns across the application. ## Core Features & Use Cases - App Shell Conventions: Documents the sidebar + outlet structure in src/routes/_app.tsx with auth guard, fixed 260px sidebar, and header containing page title, gem/streak indicators, and ProfileDropdown. - Content Width Rules: Standardizes max-width choices per page type — full width for dashboards, max-w-3xl/max-w-2xl for reading and forms, max-w-lg centered for focus mode. - Focus Mode Layout: Provides a dedicated layout route (src/routes/_focused.tsx) without sidebar or header, plus shared components like FocusBar, FocusComplete, FocusEmpty, and BackLink for flashcard SRS, exercises, and exams. - Use Case: When creating a new exam page, load this Skill to correctly place it under the focus mode layout with FocusBar progress tracking instead of the standard sidebar shell. ## Quick Start Load the layout-patterns skill and create a new exam page using the focus mode layout with a FocusBar and completion screen.
