From vanguard-frontier-agentic
Reviews error-boundary placement, fallback UX, and failure-isolation strategy to prevent component errors from crashing the entire page.
How this skill is triggered — by the user, by Claude, or both
Slash command
/vanguard-frontier-agentic:frontend-error-boundary-resilience-reviewThis skill is limited to the following tools:
The summary Claude sees in its skill listing — used to decide when to auto-load this skill
Review the placement, granularity, and fallback UX of error boundaries across a frontend application so that a single component's runtime error is isolated to its own section instead of blanking the entire page. This skill exists because "we have an error boundary" is frequently true and still insufficient: a single app-root boundary, a fallback that leaks `error.stack` to end users, or a caugh...
Review the placement, granularity, and fallback UX of error boundaries across a frontend application so that a single component's runtime error is isolated to its own section instead of blanking the entire page. This skill exists because "we have an error boundary" is frequently true and still insufficient: a single app-root boundary, a fallback that leaks error.stack to end users, or a caught error that is never logged are each individually shippable-looking and each individually a defect. This skill treats failure isolation as a design surface with its own placement rules, accessibility requirements, and observability contract — not an afterthought bolted on after an incident.
Use this skill when the user asks to:
Do not use this skill for:
ssr-hydration-streaming-diagnosis, though the two are frequently reviewed together since every suspending read needs a paired error boundary,api-integration-contract-review./reactjs/react.dev before approving any specific error-boundary implementation. React does not currently offer a function-component error-boundary primitive — static getDerivedStateFromError and componentDidCatch are class-component-only lifecycle methods, and React's own docs point to the community-maintained react-error-boundary package for teams that want a component API without hand-writing the class boilerplate. Recommending a hook-based error boundary (useErrorBoundary as a from-scratch primitive, for example) as if React ships one natively is a version-sensitive mistake; verify before approving.query-docs scoped to the confirmed React major version for "error boundary" and, if the tree also suspends via use() or Suspense, for "use hook error boundary" — a rejected Promise from use() propagates to the nearest Error Boundary, not the nearest Suspense fallback, so a suspending read wrapped only in <Suspense> with no ancestor Error Boundary crashes to unhandled on rejection.react-error-boundary, confirm the installed version's API surface (fallback vs fallbackRender vs FallbackComponent, resetKeys, onReset) via query-docs before approving a specific prop pattern — this library's API has shifted across major versions.official_docs URLs in this skill's metadata.json and label every claim documentation-based, unverified against current release.use() on a Promise, a lazy-loaded component via React.lazy, a third-party SDK embed that can throw) needs a paired ancestor Error Boundary. A Suspense boundary alone only handles the pending state, not rejection — treat a suspending read with no ancestor Error Boundary as a crash-to-blank defect, not a style preference.error.message or error.stack to end users in production. That is an information-disclosure defect, not a copy nitpick — internal implementation detail (stack traces, library names, internal endpoint paths) belongs in server-side/observability logs, never in the DOM a user or attacker can read.componentDidCatch (or the onError/onReset hook equivalent in react-error-boundary) must always forward to logging/observability, even when the UI gracefully degrades.role="alert" or an aria-live region) so screen-reader users are notified of the failure, not left staring at a silently-changed DOM region.Load these only when needed:
resetKeys, retry affordances) so a boundary doesn't stay permanently tripped.Return, at minimum:
documentation-based, repo evidence, user-provided evidence, or inference) and what Context7 query grounded the claim,npx claudepluginhub raishin/vanguard-frontier-agentic --plugin vanguard-frontier-agenticAudits code for silent error swallowing, degraded fallbacks, backwards compatibility shims, and UI failing to show errors to users. Finds and fixes all occurrences in specified scope.
Sets error handling conventions including error propagation, retry strategies, circuit breakers, typed errors, and graceful degradation for all applications.
Designs error prevention, detection, communication, and recovery UX for forms, pages, network issues, empty states, and permissions.