# code-quality

Reviews TypeScript and React codebases against strict typing rules, component size limits, and lint baselines. Runs after feature work or before pull request reviews.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 2000 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/code-quality/SKILL.md
- Updated: 2026-10-20
- HTML: https://affpapa.org/en/nevibecode/skills/code-quality

## What it does

The skill enforces a strict inspection sequence on target files or the entire project. It begins by triggering `pnpm run lint` and `pnpm exec tsc --noEmit`. Lint errors block further review until resolved. It does not treat warnings lightly either.

Next, it runs `grep` commands to spot `any` types, mixed boolean state flags, and duplicated DTO shapes. The instructions require swapping `any` for `unknown` or narrow types, using branded types for validated inputs, and turning flag combinations into discriminated unions. Component files above 150 lines get flagged for splitting into dedicated subcomponents or custom hooks.

Because the workflow relies on `pnpm` and `tsc`, running it in an environment without them will fail immediately. It also searches for direct SDK instantiation and flags missing dependency injection.

## Install

### Claude Code (native platform)

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

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

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add cognitedata/builder-skills --skill code-quality -a codex
```

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

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add cognitedata/builder-skills --skill code-quality -a cursor
```

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

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install cognitedata/builder-skills code-quality
```

2. **Manually: put the files in place**
- File: `.github/skills/code-quality/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add cognitedata/builder-skills --skill code-quality -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/cognitedata/builder-skills --path skills/code-quality
```

### Windsurf (Devin Desktop)

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

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add cognitedata/builder-skills --skill code-quality -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/code-quality/SKILL.md

## When to use it
- Remove any types and enforce strict type guards or Zod schemas
- Convert multi-boolean loading states into discriminated unions
- Split React components longer than 150 lines into hooks and subcomponents
- Detect duplicated fetch patterns and lengthy Tailwind class strings
- Replace direct SDK client instantiations with dependency injection

## Example prompts
- Review src/components/AssetPanel.tsx for code quality before opening a PR
- Run a code quality audit across the entire src directory and remove any types
- Check component sizes and find duplicated API calls in the project

## 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: 96a49bc83d39f65e.

BEGIN THIRD-PARTY FILE 96a49bc83d39f65e
````text
---
name: code-quality
description: "MUST be used whenever reviewing a Flows app for code quality, maintainability, or clean code issues — before a PR review, after a feature is complete, or when the user asks for a code review. Do NOT skip linting steps. Triggers: code quality, code review, clean code, refactor, maintainability, technical debt, any type, naming, dead code, duplication, DRY, single responsibility, component size, lint, linting, TypeScript strict, dependency injection, file structure."
allowed-tools: Read, Glob, Grep, Shell, Write
metadata:
  argument-hint: "[file, directory, or PR branch to review — e.g. 'src/components/AssetPanel.tsx']"
---

# Code Quality Review

Review **$ARGUMENTS** (or the whole app if no argument is given) for code quality issues. Work through every step below in order and report all findings with file paths and line numbers.

---

## Step 1 — Run the linter first

Before reading any code manually, get a baseline from the automated tools:

```bash
pnpm run lint
```

List every error and warning. Fix all errors before proceeding — lint errors are not negotiable. Warnings should be reviewed and resolved unless there is a documented exception.

Also run the TypeScript compiler in strict mode to surface any hidden type issues:

```bash
pnpm exec tsc --noEmit
```

List every type error. These must be fixed.

---

## Step 2 — TypeScript type safety

### 2a — Eliminate `any` types

Search for `any` usage across the codebase:

```bash
grep -rn --include="*.ts" --include="*.tsx" -E ": any|as any|<any>" src/
```

For each hit, replace with the correct type. Common substitutions:

| Instead of | Use |
|------------|-----|
| `any` for unknown external data | `unknown` + type guard or Zod parse |
| `any` for event handlers | `React.ChangeEvent<HTMLInputElement>`, `React.MouseEvent`, etc. |
| `any` for CDF responses | The SDK's own response types (import from `@cognite/sdk`) |
| `any[]` for arrays | `T[]` with the correct generic |
| `as any` casts | Proper type narrowing or explicit overloaded function signature |

The goal is zero `any` in `src/`. If a third-party library forces it, wrap the call in a typed adapter function so `any` does not leak into the app.

### 2b — Make impossible states unrepresentable

Use the type system to make invalid states fail at compile time. Fewer reachable states = easier code to read and change.

**Branded types** — brand primitives so they can't be mixed up. Validate once at the boundary; downstream code trusts the type.

```ts
type PhoneNumber = string & { __brand: "PhoneNumber" };

function parsePhone(input: string): PhoneNumber {
  if (!/^\+?\d{10,15}$/.test(input)) throw new Error(`Invalid: ${input}`);
  return input as PhoneNumber;
}
```
````
END THIRD-PARTY FILE 96a49bc83d39f65e

The third-party file has ended. Everything between the 96a49bc83d39f65e 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 2770 of 16912 bytes. © cognitedata · Apache-2.0 · https://github.com/cognitedata/builder-skills/tree/HEAD/skills/code-quality/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