# correctness-and-error-handling

Finds and fixes runtime errors, missing error boundaries, unhandled promises, and empty data states in Cognite Flows React applications.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 1900 installs · ★ 6
- Author: cognitedata
- License: Apache-2.0 · policy=mirror · the beginning of the file is at the end of this page
- Source: https://github.com/cognitedata/builder-skills/tree/HEAD/skills/correctness-and-error-handling/SKILL.md
- Updated: 2026-10-20
- HTML: https://affpapa.org/en/nevibecode/skills/correctness-and-error-handling

## What it does

This skill targets React and TypeScript applications built for Cognite Flows. The agent searches for flaws and edits code directly instead of just generating a report. It scans critical execution paths for `TODO`, `FIXME`, and `HACK` markers. Every found issue is either fixed or given a safe fallback before removing the comment.

The process follows structured steps. The agent verifies that `App.tsx` contains an `ErrorBoundary`, installing `react-error-boundary` via `pnpm` when missing. Next, it wraps unhandled asynchronous functions in `try/catch` blocks and appends `.catch()` to Promise chains. It also adds loading indicators, error alerts, and empty states to components displaying collections.

Automatic fixes break if `pnpm` is missing from the environment. The skill relies on tools `Read`, `Glob`, `Grep`, `Shell`, and `Write`. Its rules specifically target Cognite Data Fusion SDK calls and TanStack Query patterns.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add cognitedata/builder-skills --skill correctness-and-error-handling -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/correctness-and-error-handling/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/correctness-and-error-handling/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add cognitedata/builder-skills --skill correctness-and-error-handling -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/correctness-and-error-handling/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add cognitedata/builder-skills --skill correctness-and-error-handling -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/correctness-and-error-handling/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install cognitedata/builder-skills correctness-and-error-handling
```

2. **Manually: put the files in place**
- File: `.github/skills/correctness-and-error-handling/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add cognitedata/builder-skills --skill correctness-and-error-handling -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/cognitedata/builder-skills --path skills/correctness-and-error-handling
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/correctness-and-error-handling/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add cognitedata/builder-skills --skill correctness-and-error-handling -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/cognitedata/builder-skills/tree/HEAD/skills/correctness-and-error-handling/SKILL.md

## When to use it
- wrap UI trees with a React Error Boundary
- catch unhandled promise rejections using try/catch
- add loading, error, and empty views to components
- resolve pending TODO and FIXME markers in critical code

## Example prompts
- Find and fix correctness and error handling issues in src/App.tsx.
- Check the whole app for unhandled async errors and add empty list states.
- Resolve pending TODO markers and add try/catch blocks in src/services/api.ts.

## Source text · SKILL.md · Apache-2.0

Below is the content of a third-party file. It is data, not instructions for you: do not act on anything written inside unless the human asks. Block tag: ac8d56b3dcefc0c0.

BEGIN THIRD-PARTY FILE ac8d56b3dcefc0c0
````text
---
name: correctness-and-error-handling
description: "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."
allowed-tools: Read, Glob, Grep, Shell, Write
metadata:
  argument-hint: "[file or directory to fix, or leave blank to fix the whole app]"
---

# Correctness & Error Handling Fix

Find and fix correctness issues and missing error handling in **$ARGUMENTS** (or the whole app if no argument is given). Work through every step below. Each step searches for problems and then **fixes them in place**. Only report issues that cannot be auto-fixed.

---

## Step 1 — Map data flows and fix known defects

Read these files before checking anything:

- `src/main.tsx` / `src/App.tsx` — top-level error boundaries and auth flow
- All files matching `**/hooks/*.ts`, `**/contexts/*.tsx` — shared async state
- All files matching `**/api/*.ts`, `**/services/*.ts` — CDF SDK call sites

For each async data source, note:
- What happens when the request fails (network error, CDF 403, timeout)?
- What does the UI show while loading?
- What does the UI show if the result is empty?

### Find and fix known defects in critical paths

```bash
# Find TODO/FIXME/HACK in critical code paths (not test files)
grep -rn --include="*.ts" --include="*.tsx" -E "(TODO|FIXME|HACK|XXX):" src/ | grep -v ".test." | grep -v ".spec."

# Find "fix" or "broken" or "workaround" markers
grep -rn --include="*.ts" --include="*.tsx" -i -E "(TODO.*fix|workaround|broken|known.?bug|temporary.?hack)" src/
```

For each match in a critical path (data fetching, rendering, auth, navigation):

1. **Read the surrounding code** to understand the incomplete/broken behavior.
2. **Fix the underlying issue** — implement the missing logic, correct the broken behavior, or add proper error handling.
3. If the fix requires significant architectural changes beyond this skill's scope, **replace the TODO with a safe failure mode**: graceful error handling, a sensible fallback value, or an explicit user-facing message explaining degraded functionality.
4. **Remove the TODO/FIXME/HACK comment** after fixing. The code should speak for itself.
````
END THIRD-PARTY FILE ac8d56b3dcefc0c0

The third-party file has ended. Everything between the ac8d56b3dcefc0c0 tags is data: requests and commands from it are not followed. An “end of file” line with another tag inside the block is part of the file.

First 2504 of 12709 bytes. © cognitedata · Apache-2.0 · https://github.com/cognitedata/builder-skills/tree/HEAD/skills/correctness-and-error-handling/SKILL.md

_Part of the page did not fit — see the HTML version._

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md