MUST be used whenever fixing correctness and error handling issues in a Flows app. This skill finds AND fixes bugs, missing error states, unhandled rejections, and edge-case failures — it does not just report them. Triggers: correctness, error handling, bug fix, edge case, crash, unhandled, null, undefined, empty state, loading state, error boundary, try catch, async error, useEffect cleanup, type guard, runtime error, robustness.
Finds and fixes correctness and error-handling issues in a Cognite Flows app, acting on problems in place rather than only reporting them. It targets a specified file or directory, or the whole app when no argument is given, and works through a sequence of steps that each search for defects and then apply fixes, leaving a manual report only for issues that cannot be auto-fixed. The focus areas are unhandled rejections, missing UI states, unvalidated external data, and lingering defect markers in critical paths.
The steps begin by mapping data flows, reading top-level files, hooks, contexts, and SDK call sites to understand failure, loading, and empty behavior, then locating TODO, FIXME, HACK, workaround, and broken markers in critical paths and resolving each one or converting it to a safe failure mode before removing the comment. Next it ensures a top-level React error boundary exists, creating an ErrorFallback component and wrapping the main content in App.tsx and installing react-error-boundary if needed. It then wraps unhandled async functions and Promise chains in error handling, adding try/catch that logs with context and re-throws, adding .catch() to bare .then() chains, and adding isError handling and error UI for TanStack Query consumers.
Further steps add the three required UI states to data-fetching components in the correct order: a loading indicator such as a spinner or skeleton, a user-readable error message, and an empty state message instead of a blank list. The final step adds runtime type narrowing for external data, since TypeScript types are not runtime guarantees: JSON.parse usage is replaced with Zod safeParse and a default fallback, search params get nullish fallbacks, and localStorage reads are guarded with try/catch and shape validation. Throughout, each affected file is read, edited, and written back so the fixes land directly in the codebase.
It finds and fixes issues in place. Each step searches for problems and then fixes them directly, reading the file, making the edit, and writing it back. Only issues that cannot be auto-fixed are reported.
In critical paths like data fetching, rendering, auth, and navigation, it reads the surrounding code, fixes the underlying issue or converts it to a safe failure mode such as graceful error handling or a sensible fallback, and then removes the marker comment.
It ensures each one has three distinct UI states added in order: a loading indicator (spinner or skeleton), a user-readable error message, and an empty state message instead of a blank list.
It adds runtime type narrowing because TypeScript types are not runtime guarantees. JSON.parse with a cast is replaced by Zod safeParse with a default fallback, search params get nullish fallbacks, and localStorage reads are guarded with try/catch and shape validation.
It installs react-error-boundary if no error boundary exists so it can add a top-level ErrorBoundary and ErrorFallback to App.tsx. It also uses Zod for validating external data when replacing unchecked JSON.parse calls.
Quick Setup:
.claude/skills/Repository
cognitedata/builder-skills