TypeScript + React

Complete guide to what VibeCode QA checks, which tools it uses, and what metrics matter for TypeScript + React projects.

Quick Start

npx @vibecodeqa/cli

Set up CI + auto-fix

npx @vibecodeqa/cli init    # creates .github/workflows/vibecodeqa.yml
npx @vibecodeqa/cli fix     # auto-fix lint issues + show fix suggestions

Auto-detects: TypeScript, React, Vite/webpack, vitest/jest, Biome/ESLint, pnpm/npm/yarn.

What Gets Checked

Foundations (23% of score)

CheckWhatToolMetric
Structurepackage.json, tsconfig, LICENSE, lockfile, src/ dir, test ratiobuilt-inmissing files count
LintRuns your linter with JSON outputbiome or eslinterrors + warnings
Type CheckRuns tsc --noEmittsctype errors
Type Safetyas any, : any, @ts-ignore, @ts-nocheck, !.built-inunsafe patterns per KLOC
StandardsFile naming, file size, code smells (console.log, var, ==)built-inviolations per file

Quality (26% of score)

CheckWhatToolMetric
ComplexityCognitive complexity per function, line countbuilt-in% functions over threshold
DuplicationCopy-pasted blocks (6+ lines)jscpd or built-induplication %
Error HandlingEmpty catch, throw string, floating promises, unsafe JSON.parsebuilt-inissues per file
React PatternsConditional hooks, missing keys, index keys, prop spreading, useEffect depseslint-plugin-react-hooks or built-inviolations per component
Accessibilityimg alt, click on div, form labels, autoFocus, tabIndex, html langeslint-plugin-jsx-a11y or built-inviolations per component
DocsREADME quality, JSDoc coverage, CHANGELOG presencebuilt-in% exports documented
Best PracticesCI/CD, OIDC, supply chain, repo hygiene, pre-commit hooksbuilt-inpractices followed %

Testing (15% of score)

CheckWhatToolMetric
TestingPyramid (unit/integration/component/E2E), execution, coverage, pairing, qualityvitest or jest6 sub-dimensions

Test pyramid layers detected: Unit tests (any .test.ts), Component tests (@testing-library), Integration tests (real API calls), E2E (Playwright/Cypress).

Security (16% of score)

CheckWhatToolMetric
SecretsHardcoded API keys, tokens, private keys, .env auditgitleaks or built-in (14 patterns)secrets found
Security36 CWE patterns: XSS, injection, crypto, SSRF, localStorage, prototype pollutionbuilt-inCWE violations
Dependenciesnpm audit + outdated packagesnpm auditcritical/high vulns

Architecture (9% of score)

CheckWhatToolMetric
ArchitectureImport graph, circular deps, god modules, orphans, fan-outbuilt-in (unique)structural issues
PerformanceBarrel imports, heavy deps, dynamic import opportunities, CSS-in-JSbuilt-inoptimization opportunities

6 interactive diagrams: Dependency graph (click to highlight), DSM matrix (hover rows), Sequence diagram, Layer diagram, Package diagram, Container diagram.

AI Readiness (11% of score)

CheckWhatToolMetric
ConfusionFilename similarity (Levenshtein), synonym pairs, generic names, export collisionsbuilt-in (unique)confusion index
ContextToken density per file, import depth, circular dep impact on LLM contextbuilt-in (unique)files over 4K tokens

Recommended Tool Setup

Install these for maximum accuracy. VibeCode QA auto-detects and delegates to them.

# Core (probably already have these)
pnpm add -D typescript @biomejs/biome vitest

# React-specific (enables AST-level checking)
pnpm add -D eslint eslint-plugin-react-hooks eslint-plugin-jsx-a11y

# Security (optional, boosts secret detection)
brew install gitleaks

# E2E (optional, detected for test pyramid)
pnpm add -D @playwright/test

Monorepo Support

VibeCode QA auto-detects pnpm-workspace.yaml, npm/yarn workspaces, Turborepo, Nx, and Lerna. When detected:

Scoring Formula

All scoring is proportional to codebase size. No absolute-count cliffs.

Foundations23%
Quality26%
Testing15%
Security16%
Architecture9%
AI Readiness11%

Grade: A (90+), B (75+), C (60+), D (40+), F (<40). Premium AI Analysis checks (doc-coherence, code-coherence) have 0% weight.

Home · Tool Decisions · Node.js Guide · Flutter Guide