void-loading-error-boundaries

What problem does it solve? Next.js App Router boundary files (loading.tsx, error.tsx, not-found.tsx) are often placed too high, causing whole-page flashes on partial loads, or too low, letting errors leak past the intended catch. This Skill guides correct per-segment placement so each route streams independently and failures are handled gracefully. ## Core Features & Use Cases - Boundary placement rules: Explains the four boundary files (loading.tsx, error.tsx, not-found.tsx, global-error.tsx), what each wraps, and when each renders. - Skeleton design guidance: Shows how to build skeletons that match the final layout shape to avoid layout shift and jarring content appearance. - Error handling with Sentry: Provides an error.tsx pattern that captures exceptions to Sentry, hides stack traces from users, and offers a recovery action. - Use Case: When adding a new /dashboard/[id] route, use this Skill to decide which boundary files the segment needs, write a layout-matching skeleton, and wire Sentry capture into the error boundary. ## Quick Start Ask the agent to add loading, error, and not-found boundaries for a new route in the app directory with a skeleton matching the page layout.