Act as a senior front-end engineer. Build the app shell for {{business_name}} in my {{tech_stack}} project: sidebar, header and content area. Inspect the existing layout, routes and components first and tell me what you'll keep. Structure: - skip link, then a nav landmark, a header and a main - sidebar items come from these areas: {{features}}, grouped under small labels; active item has aria-current="page"; count badges carry visually hidden text such as "3 unread" - items depend on role ({{user_roles}}); hiding an item is a convenience, and the server still enforces access - header 56px: page title as the h1, breadcrumbs when nested, a search or command trigger, user menu Breakpoints: - 1280 and up: sidebar 248px expanded - 768 to 1279: 64px icon rail with tooltips on hover and focus; expand state remembered per user - 360 to 767: top bar with a menu button opening the nav as a drawer (focus trapped, Escape closes) Content padding 16 / 24 / 32px; forms max 720px wide, tables use the full width. Use 100dvh, not 100vh, so phones don't clip. Behavior: - the shell renders instantly; only the content area shows skeletons while loading - an error boundary inside main keeps navigation usable when a page fails - on route change, move focus to the new h1 and update the document title - a first-run empty workspace points to the one action that matters Visual: sidebar on a surface token one step off the background, 1px dividers, 14px nav labels at weight 500, 20px icons with 1.5px strokes, 36px rows with 44px touch targets on mobile. Density from tokens, not one-off values. Motion: rail and drawer 200ms ease-out; instant under prefers-reduced-motion. Avoid: a gradient sidebar, stat cards with fake numbers and decorative sparklines, cards with shadows wrapping every block, nested scroll areas that trap the wheel. List the files you changed and why.