mcpbeat

Error Boundary Creator

onewave-ai/error-boundary-creator

Create error boundaries, error handling, and fallback UIs for React applications. Use when implementing error handling, creating fallback components, or setting up error reporting.

2k tokens
context cost
the whole folder, loaded on every use
4
files
instructions only
0
copies elsewhere
how many repositories repackaged it
235
stars on the repo
on the repository, not the skill itself

Install

one command, takes just this skill from the repository 
npx skills add https://github.com/OneWave-AI/claude-skills --skill error-boundary-creator

The instruction itself

4 sections, as written by the author

Error Boundary Creator

Add resilient error handling to React and Next.js apps: error boundaries, fallback UIs, async error handling, and error reporting.

Workflow

  • Identify error-prone areas: async operations, third-party integrations, and route-level entry points.
  • Wrap components in an error boundary. Use a class boundary or the react-error-boundary library. See references/class-boundaries.md.
  • For Next.js App Router, add the relevant error.tsx, global-error.tsx, and not-found.tsx segment files. See references/nextjs-error-handling.md.
  • Handle errors that boundaries miss (event handlers, promises) and wire up reporting. See references/async-and-reporting.md.
  • Design fallback UIs with role="alert" and a recovery action (reset or reload).
  • Route caught errors to a single reporting sink and test error states before shipping.

Contents

  • references/class-boundaries.md — Basic, resettable, and react-error-boundary patterns.
  • references/nextjs-error-handling.md — App Router error.tsx, global-error.tsx, not-found.tsx.
  • references/async-and-reporting.md — useAsync hook and the reportError integration module.

Best Practices

  • Wrap at the route level for page-level isolation, and wrap third-party components separately.
  • Provide meaningful fallbacks with a recovery option.
  • Log every caught error to the monitoring service.
  • Do not catch errors the code cannot meaningfully handle.
  • Test error states in development.

How to use it

Copy the folder

Take onewave-ai/error-boundary-creator from the repository into ~/.claude/skills for personal use, or into .claude/skills inside a project.

Check the name does not clash

The agent identifies a skill by the name field in its header. Two skills with the same name cannot sit side by side — one of them will be ignored.