Quality Gates Skill

Automated quality checkpoints that ensure code meets standards before proceeding.

Gate Levels

1. Pre-Commit Gate

Runs before code is committed.

TypeScript check

npx tsc --noEmit

Lint check

npx eslint . --max-warnings 0

Format check

npx prettier --check .

2. Pre-Push Gate

Runs before code is pushed.

All pre-commit checks +

npm test -- --passWithNoTests

Build check

npm run build

3. CI Gate

Runs in CI pipeline.

All previous checks +

npm test -- --coverage

Coverage threshold

Fail if coverage < 70%

4. Pre-Deployment Gate

Runs before deployment.

All CI checks +

E2E tests

npx playwright test

Security audit

npm audit --audit-level=high

Performance check

npx lighthouse-ci

Gate Definitions

TypeScript Gate

// tsconfig.json { "compilerOptions": { "strict": true, "noImplicitAny": true, "strictNullChecks": true, "noUnusedLocals": true, "noUnusedParameters": true, "noImplicitReturns": true } }

Pass Criteria: Zero errors

ESLint Gate

// .eslintrc { "extends": [ "eslint:recommended", "@typescript-eslint/recommended", "@typescript-eslint/strict" ], "rules": { "@typescript-eslint/no-explicit-any": "error", "@typescript-eslint/no-unused-vars": "error", "no-console": "warn" } }

Pass Criteria: Zero errors, zero warnings

Prettier Gate

// .prettierrc { "semi": true, "singleQuote": true, "tabWidth": 2, "trailingComma": "es5" }

Pass Criteria: All files formatted

Test Gate

// vitest.config.ts export default defineConfig({ test: { coverage: { provider: 'v8', thresholds: { statements: 70, branches: 65, functions: 70, lines: 70, }, }, }, });

Pass Criteria:

• All tests pass

• Coverage meets thresholds

Build Gate

npm run build

Pass Criteria: Build succeeds without errors

Security Gate

Dependency vulnerabilities

npm audit --audit-level=high

Exit codes:

0 = No vulnerabilities

1 = Vulnerabilities found

Pass Criteria: No high/critical vulnerabilities

Gate Implementation

Husky Pre-Commit Hook

#!/bin/sh

.husky/pre-commit

npx lint-staged

// package.json { "lint-staged": { ".{ts,tsx}": [ "eslint --fix", "prettier --write" ], ".{json,md}": [ "prettier --write" ] } }

GitHub Actions Gate

name: Quality Gate

on: [push, pull_request]

jobs: quality: runs-on: ubuntu-latest steps: - uses: actions/checkout@v4

  - name: Setup Node
    uses: actions/setup-node@v4
    with:
      node-version: '22'
      cache: 'npm'

  - name: Install
    run: npm ci

  - name: TypeScript
    run: npm run typecheck

  - name: Lint
    run: npm run lint

  - name: Test
    run: npm test -- --coverage

  - name: Build
    run: npm run build

Quality Metrics

Code Quality

Metric Threshold Tool

Type Coverage 100% TypeScript

Lint Errors 0 ESLint

Code Smells < 5 SonarQube

Duplications < 3% SonarQube

Test Quality

Metric Threshold Tool

Statement Coverage

70% Vitest

Branch Coverage

65% Vitest

Test Pass Rate 100% Vitest

Security

Metric Threshold Tool

Critical Vulns 0 npm audit

High Vulns 0 npm audit

Secrets 0 secretlint

Performance

Metric Threshold Tool

Bundle Size < 500KB vite

LCP < 2.5s Lighthouse

FID < 100ms Lighthouse

Gate Commands

Run all gates

npm run quality

Individual gates

npm run quality:types # TypeScript npm run quality:lint # ESLint npm run quality:test # Tests npm run quality:build # Build npm run quality:security # Security audit

Gate Failure Handling

TypeScript Errors

• Read error message

• Fix type issue

• Re-run npx tsc --noEmit

Lint Errors

• Try auto-fix: npx eslint . --fix

• Manually fix remaining

• Re-run lint

Test Failures

• Check failed test output

• Fix code or test

• Re-run tests

Build Failures

• Check build output

• Fix import/config issues

• Re-run build

Security Failures

• Run npm audit

• Update vulnerable packages

• If can't update, document exception